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内 容 提要 


Unity 古 一 个 可 以 轻松 创建 各 类 型 互动 内 容 的 多 平台 绕 合 型 游戏 开 
发 工具 ， 是 一 个 全 面 整合 的 专业 游戏 引 苟 。 本 书 基于 Unity 5.0 及 以 上 
版 本 进行 讲解 ， 引 导读 者 深度 认识 并 掌握 这 一 重要 的 游戏 开发 工具 。 


本 书 共 分 8 草 ， 通 过 4 个 典型 的 游戏 项 目 来 引导 读者 进行 学 习 ， 
两 章 完成 一 个 游戏 案例 ， 案 例 式 的 讲解 模式 更 有 利于 读者 快速 提升 实 
践 能 力 。 人 金币 采集 游 戏 开 局 了 Unity 开 发 之 旅 ， 随 后 的 太空 射击 游戏 进 
一 步 丰富 了 各 类 庆 戏 设计 技巧 ， 之 后 又 通过 二 维 冒 险 游 戏 完 整地 呈现 
了 Unity 的 强大 功能 ， 最 后 通过 一 个 人 工 稚 能 项 目 完整 地 将 地 形 构建 、 
导航 等 功能 有 机 地 整合 到 游戏 当中 。 


本 书 几 乎 包含 了 学 习 Unity 所 需 的 所 有 内 容 ， 案 例 式 的 学 习 更 有 助 
于 读者 快速 掌握 开发 拉 巧 。 本 书 非 常 适合 那些 没有 Unity 和 游戏 开发 经 
验 的 读者 ， 通 过 阅读 本 书 ， 读 者 将 掌握 使 用 Unity 进 行 游戏 开发 的 核心 
技巧 。 如 果 读 者 对 游戏 开发 和 Unity 本 身 有 着 浓厚 的 兴趣 ， 那 将 对 其 学 
习 提 供 无 限 助 力 ， 学 习 效 果 会 更 加 出 色 。 


作者 简介 


Alan Thorn 是 一 位 屡 获 殊 采 的 作家 、 数 学 家 ， 同 时 也 是 一 位 独立 
的 视频 游戏 开发 两 ， 目 前 居住 于 英国 伦敦 。 他 创立 了 “Wax Lyrical 
Games” 游 戏 开发 工作 室 ， 并 开发 了 一 球 广 受 好 评 的 PC 冒险 游戏 《 维 塔 
德 男 咽 : 火 绝 的 复仇 》。Alan 作 为 一 名 自由 职业 者 ， 曾 经 服务 于 世界 
上 一 些 大 型 的 游戏 公司 。 他 曾经 在 欧洲 最 著名 的 机 构 讲 授 游戏 开发 ， 
编写 了 9 本 游戏 编程 方面 的 图 书 ， 这 其 中 整 包 括 十 分 受 欢迎 的 Teach 
Yourself Games Programming ~ Game Engine Design and Implementation 
和 UDK Game Development。Alan 还 对 计算 、 数 学 、 制 图 学 和 哲学 很 感 
兴趣 。 关 于 他 的 “WwWax Lyrical Games” 公 司 的 更 多 信息 可 以 访问 
http:/www.waxlyricalgames.com/ 获 取 。 


审 稿 人 简介 


Francesco Sapio 毕 业 于 意大利 的 罗马 大 学 ， 在 校 期 间 获 得 了 优异 
的 成 绩 ， 现 在 正在 攻读 人 工 知 能 和 机 器 人 学 的 硕士 学 位 。 


他 是 一 位 Unity 3D 的 专家 ， 同 时 也 是 一 位 熟练 的 游戏 软件 开发 
者 ， 也 是 一 位 经 验 丰 是 的 图 形 程序 使 用 者 。 


最 近 ， 他 刚刚 编写 了 Unity UI Cookbook 一 书 ， 专 门 教授 读者 如 何 
使 用 Unity 开 发 引 和 人 注目 并 且 实 用 的 图 形 用 户 界面 。 此 外 ， 他 还 是 
Unity Game Development Scripting 一 书 的 审 校 专 家 。Francesco 还 是 一 位 
首 乐 家 和 作曲 家 ， 尤 其 擅长 为 小 电影 和 视频 游戏 配乐 。 近 年 来 ， 他 还 
从 事 了 演员 和 舞蹈 家 的 工作 。 目 前 ， 他 还 是 罗马 布 兰 卡 乔 剧院 的 特 邀 
嘉宾 。 


此 外 ， 他 还 是 一 个 非常 活泼 的 人 ， 曾 经 在 罗马 的 意大利 文化 中 心 


担任 儿童 娱乐 志愿 者 。 他 还 为 高 中 和 大 学 的 学 生 讲授 数学 和 音乐 的 私 
人 课程 。 


Francesco 热 爱 数学 、 哲 学 、 逻 辑 学 和 破解 难题 ， 尤 其 是 开发 视频 
游戏 ， 这 一 切 都 源 目 他 对 游戏 设计 和 编程 开发 的 热情 。 读 者 可 以 在 领 
英 上 查看 关于 他 的 个 人 信息 。 


在 这 里 我 要 深 深 感谢 我 的 父母 ， 是 他 们 永 无 止 尽 的 耐心 、 热 情 和 文 持 
直 伴 随 我 到 现在 。 而 且 我 也 要 感谢 家 庭 的 所 有 成 员 ， 尤 其 是 我 的 祖父 


母 ， 在 我 的 生命 中 ， 他 们 总 是 不 断 地 用 拉丁 语 *Ad Maiora” 和 “Per aspera ad 
astra” 来 鼓励 我 去 将 事情 做 得 更 好 。 


最 后 ， 我 要 对 身边 每 一 个 我 爱 的 人 表示 最 大 的 谢意 ， 尤 其 是 我 的 女 
友 ， 我 非常 感谢 她 为 我 所 做 的 一 切 ! 


译 者 序 


游戏 是 从 现实 通 往 梦境 的 一 个 通道 ， 在 我 们 每 个 人 的 成 长 过 程 
中 ， 游 戏 都 扮演 着 一 个 不 可 或 缺 的 角色 。 直 到 现在 我 依然 后 不 了 ， 在 
上 中 学 时 ， 每 当 放 学 就 偷偷 跑 到 街 边 的 游戏 厅 和 同学 大 战 《 拳 量 》 的 
情景 。 那 些 一 个 个 操作 简单 、 画 面 朴 实 的 游戏 ， 却 不 知道 实现 了 多 少 
人 儿 时 心中 的 英雄 梦 。 


随 着 计算 机 技术 的 不 断 发 展 ， 一 个 个 令 人 惊叹 的 游戏 不 断 出 现 ， 
从 很 早 的 《金庸 群 侠 传 》 《星际 争霸 》《 暗 黑 破 坏 神 》 一 直到 现在 那 
些 我 也 无 法 叫 上 名 字 的 新 游戏 。 各 种 新 游戏 不 断 出 现 ， 新 游戏 画面 越 
来 越 精美 ， 情 市 越 来 越 丰 富 ， 这 一 切 都 得 益 于 游戏 开发 引 敬 的 不 断 进 
有 


可 以 晕 不 众 张 地 说 ， 游 戏 开 发 者 其 实 残 是 在 扮演 着“ 造 梦 者 ”的 角 
色 。 这 个 职业 在 绝 大 多 数 人 的 眼中 是 极为 神秘 的 ， 他 们 应 该 每 天 在 高 
符 的 大 楼 里 面 无 休止 地 融 打 着 键盘 ， 用 那些 剖 通 人 无 法 理解 的 代码 创 
造 着 一 个 义 一 个 的 虚拟 世界 。 


其 实 这 是 一 个 误解 ， 很 多 游戏 就 是 游戏 开发 者 在 家 里 利用 业余 时 
间 完 成 的 ， 有 些 开 发 者 甚至 可 能 只 懂 一 点 编程 的 知识 。 怎 么 样 ? 听 到 
这 些 是 不 是 觉得 很 吃惊 。 其 实 每 个 人 都 可 以 成 为 游戏 开发 者 ， 需 要 什 
么 呢 ? 只 要 有 一 个 Unity 3D 就 足够 了 ! 


Unity 3D 是 什么 呢 ? 严格 来 说 ， 这 是 一 款 游戏 开发 的 引擎 。 关 于 
它 的 详细 摘 述 ， 读 者 可 以 目 行 了 解 。 如 采 要 我 来 描述 Unity 3D， 只 
两 个 词 一 一 简单、 强大 。 如 采 你 有 一 家 公司 、 一 个 水 乎 高 超 的 开发 团 
队 及 一 笔 不 菲 的 开发 基金 ， 那 你 融 可 以 用 Unity 3D 开 发 出 一 款 脸 秋 人 
口 的 游戏 。 如 果 你 什么 都 没有 ， 那 么 特 着 对 游戏 开发 的 热情 ， 在 家 
里 ,一 个 人 从 头 学 起 ，Unity 同 样 可 以 帮助 你 开发 出 一 款 风 靡 世界 的 游 
戏 ! 


本 书 的 作者 Alan Thom 有 是 一 位 职业 游戏 开发 者 ， 他 所 开发 的 游戏 
4《 维 塔 德 男 器 : 炙 绝 的 复仇 》 受 到 了 很 多 人 的 欢迎 。 难 能 可 贯 的 是 ， 
他 在 本 书 编写 中 详细 地 分 享 了 使 用 Unity 开 发 游戏 的 案例 过 程 。Alan 
Thorn 绝 对 是 一 位 与 众 不 同 的 作家 ， 在 他 的 作品 中 ， 极 少 提 到 技术 以 外 
的 问题 ， 全 书 都 是 详实 的 案例 ， 肋 无 资 言 ， 所 有 案例 准确 细致 ， 由 浅 
入 深 。 这 一 护 让 我 在 本 书 的 翻译 过 程 中 受益 菲 浅 。 


感谢 人 民 邮 电 出 版 社 的 编辑 胡 俊 英 ， 在 本 书 编写 的 这 段 时 间 中 她 
始终 文 持 我 的 写作 ， 她 的 痉 励 和 帮助 引导 我 能 顺利 翻译 完成 全 部 书 
稿 。 最 后 感谢 我 的 母 杀 ， 是 她 将 我 培养 成 人 人， 并 在 人 生 的 每 一 个 关键 
阶段 给 我 提供 帮助 ， 感 谢 我 深 爱 的 妻子 及 我 可 受 的 儿子 ， 感 谢 你 们 在 
我 翻译 本 书 的 时 候 ， 给 我 无 条 件 的 理解 和 文 持 。 


一 李 华 峰 
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视频 游戏 作为 一 种 文化 现象 ， 在 过 去 半 个 世纪 已 经 在 世界 范围 内 
吸引 并 娱乐 了 数 十 亿 人 “。 视 频 游 戏 作为 一 种 产业 和 文化 ， 无 论 对 于 开 
发 者 还 是 忆 术 家 来 说 ， 都 是 一 个 令 人 兴 理 的 所 在 。 通 过 游戏 ， 你 的 意 
愿 、 想 法 和 工作 可 以 去 影响 更 多 的 人 ， 并 且 以 一 种 前 所 未 有 的 方式 来 
塑造 和 改变 一 代 又 一 代 的 人 。 在 最 近 的 一 段 时 间 里 ， 兴 起 了 一 股 游戏 
开发 的 平民 化 运动 ， 日 标 是 游戏 的 开发 过 程 要 更 人 简单， 游戏 本 映 要 更 
容易 、 更 广泛 地 被 人 们 所 接受 ， 包 括 开 发 者 在 预算 有 限 的 情况 下 ， 在 
家 里 束 能 从 事 游 戏 开 发 的 工作 。 推 动 这 项 运动 的 倡导 者 束 是 Unity 引 
擎 ， 这 也 是 本 书 的 主题 。Unity 引 擎 是 一 个 计算 机 程序 ， 它 可 以 与 你 现 
有 的 资源 途径 (例如 三 维 建 模 软件 ， 协同 工作 ， 用 来 编写 可 以 在 多 平 
台 和 设备 ， 包 括 Windows、Mac、Linux、Android、iOS 和 Windows 
Phone 上 都 能 正常 工作 的 视频 游戏 。 使 用 Unity 引 警 ， 开 发 者 可 以 导入 
现成 的 资源 〈 例 如 音乐 、 贴 图 、3D 模 型 等 ) ， 然 后 将 它们 组 装 成 一 个 
有 机 的 整体 ， 通 过 一 个 全 局 的 游戏 逻辑 形成 一 个 游戏 世界 。Unity 引 擎 
是 一 个 令 人 着 迷 的 程序 。 最 新 版 本 的 Unity 可 以 免费 下 载 和 使 用 ， 而 且 
它 可 以 十 分 有 效 地 和 其 他 程序 (例如 GIMP 和 Blender) 协同 工作 。 本 
书 着 眼 于 Unity 引 擎 以 及 如 何 使 用 它 来 开发 一 个 好 玩 并 且 有 趣 的 游戏 。 
学 习 Unity 并 不 需要 什么 基础 ， 但 是 必须 对 编程 语言 有 一 定 的 了 解 (如 
JavaScript、ActionScript、C、C++、Java 或 者 C#) 。 现 在 我 们 以 章节 
的 形式 来 看 看 本 书 中 都 涵盖 了 哪些 内 容 。 


本 书 内 容 


本 书 将 在 实践 中 探讨 Unity 引 擎 的 使 用 ， 通 过 具体 的 游戏 实例 ， 一 
步 步 地 市 你 进行 游戏 开发 。 本 书 共 有 8 章 ， 重 点 讲解 了 4 个 近 然 不 同 的 
案例 ， 每 两 章 完 成 一 个 案例 。 接 下 来 ， 我 们 来 看 看 这 些 案例 的 具体 内 


Je 


丛 。 


第 1 章 以 第 一 人 称 视角 金币 采集 游戏 开始 了 我 们 的 Unity 开 发 之 
旅 。 如 采 你 此 前 对 Unity 完 全 不 了 解 并 且 准 备 开 始 你 的 第 一 个 游戏 ， 那 
和 这 就 是 一 个 绝 佳 的 切入 点 。 


第 2 章 紧 接 第 1 章 的 内 容 ， 并 完成 了 这 个 游戏 。 这 里 假设 你 已 经 完 
成 了 第 1 章 的 内 容 ， 并 且 完 成 了 整个 的 项 目 ， 殊 为 下 一 章 的 开始 做 了 销 


执 。 


第 3 章 标志 着 第 二 个 项 目的 开始 ， 我 们 将 专注 于 一 个 太空 射击 游戏 
的 开发 。 在 这 里 ， 我 们 创建 一 个 游戏 ， 在 游戏 中 玩家 将 要 面 对 迎 面 而 
来 的 敌人 。 


第 4 章 完 成 了 整个 的 太空 射击 项 目 ， 这 一 章 的 内 容 紧 随 上 一 章 ， 并 
为 项 目 添 加 最 后 的 加 工 。 


第 5 章 展 示 了 二 维 游 戏 和 UI 功能 的 风采 。 在 这 里 ， 我 们 将 通过 开 
发 一 个 依 徘 二 维 物理 属性 的 侧 视 图 游戏 来 探讨 Unity 强 大 的 二 维 功能 。 


第 6 章 完成 上 一 章 开 始 的 二 维 冒 险 游 戏 ， 为 此 进行 了 最 后 的 完善 ， 
并 根据 总 体 游戏 逻辑 将 各 个 环 世 连接 在 一 起 。 通 过 这 个 实例 我 们 可 以 


很 清晰 地 了 解 游 戏 中 的 各 个 部 分 和 各 个 方面 是 如 何 有 机 地 形成 一 个 整 
体 的 。 


第 7 草 着 重 研 究 人 工 养 能， 创造 了 一 个 可 以 巡逻 、 奶 逐 并 攻击 的 政 
人 ， 而 且 也 实现 了 这 些 敌 人 的 导航 功能 。 


第 8 章 结束 了 上 一 章 的 人 工 知 能 项 目 ， 和 本 书 的 其 他 内 容 成 为 一 个 
有 机 的 整体 。 在 这 个 项 目 中 ， 我 们 将 会 看 到 如 何 使 用 有 限 状 态 机 来 实 
现 一 个 强大 的 人 工 智能 ， 这 个 人 工 知 能 可 以 被 应 用 在 各 种 情况 下 。 


本 书 要 求 


本 书 几 乎 包含 了 学 习 Unity 的 所 有 内 容 。 每 一 章 都 提供 了 注重 实用 
性 的 真实 Unity 开 发 案例 ， 并 提供 了 可 以 下 载 和 使 用 的 配套 文件 。 除 了 
本 书 和 你 的 学 习 兴 趣 之 外 ， 你 还 需要 下 载 一 个 最 新 版 本 的 Unity 软 件 。 
本 书 在 编写 的 时 候 ，Unity 的 最 新 版 是 5.3.1。 这 个 软件 的 个 人 版 

(personal edition) 可 以 免费 下 载 和 使 用 ， 下 载 地 址 为 

https://unity3d.com/。 除 了 Unity 之 外 ， 如 果 创 建 道具 、 人 物 角 色 ， 或 
者 其 他 的 3D 资 源 ， 可 能 需要 3D 建 模 软 件 和 动画 软件 ， 例 如 3DS Max、 
Maya 或 者 Blender 等 ， 可 能 还 会 需要 图 像 编 辑 软 件 ， 例 如 Photoshop 和 
GIMP 等 。Blender 是 一 蒜 免 费 的 软件 ， 可 以 从 http://www.blender.org/ 下 
载 。GIMP 也 是 一 款 免费 的 软件 ， 可 以 从 https:/www.gimp.org/ 下 载 。 


本 书 的 目标 读者 


本 书 十 分 适合 那些 没有 Unity 和 游戏 开发 经 验 ， 但 却 希 望 将 游戏 开 
发 作为 一 种 爱好 或 者 职业 的 读者 。 你 也 许 已 经 有 了 一 些 与 游戏 开发 无 
天 的 程序 编写 或 者 脚本 编辑 基本 知识 ， 例 如 C、C++、C#、Java、 
JavaScript、ActionScript、Python 或 者 其 他 面 回 对 象 编程 语言 的 编程 能 
力 。 此 外 ， 你 至 少 应 该 要 有 一 些 基本 的 天 于 游戏 开发 的 重要 概念 。 例 
如 ， 本 书 假设 你 已 经 知道 了 3D 模 型 、 贴 图 、 首 频 文件 、 可 执行 文件 等 
基础 性 知识 。 本 书 会 对 这 些 概念 进行 简单 的 讲解 ， 但 是 不 会 深入 。 本 
书 将 专注 于 Unity 作 为 软件 开发 游戏 的 功能 ， 每 一 章 都 是 一 篇 可 以 深入 
研究 的 教程 ， 并 提供 了 一 个 可 以 试 玩 和 扩展 的 游戏 。 


本 书 约定 


本 书 中 会 有 很 多 的 文本 样式 ， 这 些 样式 用 来 区 分 不 同 种 类 的 信 
思 。 下 面 给 出 了 这 些 样 式 的 一 些 实例 以 及 它们 含义 的 解释 。 


代码 段 将 按照 如 下 格式 显示 : 
using UnityEngine 
Using System.Collections; 
public class Coin : MonoBehaviour 


// Use this for initialization 
void Start () 人 0 


// Update is called once per frame 
void Update () {} 


当代 码 块 中 的 特定 部 分 需要 注意 时 ， 相 关 的 行 或 者 条 目 会 被 设置 
为 粗 体 : 


using UnityEngine 
Using System,.Collections ; 


public class Coin : MonoBehaviour 
// Use this for initialization 


void Start () { 
Debug.Log ("Object Created"); 
} 


// Update is called once per frame 
void Update () { 


} 


新 名 词 和 重要 的 词汇 ， 例 如 “菜单 “对 话 框 "等 将 会 以 粗 体 显示 ， 
显示 格式 如 同 “你 将 需要 创建 一 个 新 项 目 ”。 


I: 


告 或 重要 的 注释 出 现在 这 样 的 括号 里 。 


我 们 欢迎 读者 的 反馈 意见 。 无 论 你 对 本 书 有 什么 想法 ， 喜 欢 或 者 
不 喜欢 哪些 内 容 ， 都 可 以 告诉 我 们 。 这 些 反 馈 意 见 对 我 们 创作 出 对 大 
家 真正 有 所 帮助 的 作品 至 关 重 要 。 


你 可 以 将 一 般 的 反馈 以 电子 邮件 的 方式 发 送 到 
feedback@packtpub.com ， 并 在 邮件 主题 中 包含 书 名 。 


考 我 们 的 作者 指南 www.packtpub.comy/authors。 


客户 支持 


现在 你 已 经 是 Packt 图 书 的 苯 贯 读者 了 ， 我 们 会 尽力 帮 读 者 充分 利 
I 


示例 代码 下 载 


可 以 使 用 账号 在 http://www.packtpub.com 下 载 本 书 的 样 例 代码 。 
如 果 是 通过 其 他 途径 购买 的 本 书 ， 则 可 以 访问 网 址 
http:/www.packtpub.com/support 进行 注册 ， 这 些 文件 会 直接 发 送 到 你 
的 邮箱 中 。 


可 以 按照 如 下 步骤 下 载 代码 文件 。 
1. 使 用 邮箱 地 址 和 密码 在 我 们 的 网 站 登录 或 者 注册 。 


2. 将 鼠标 移动 到 顶部 的 “SUPPORT” 选 项 卡 上 。 


3. 单 击 “Code Downloads & Errata”。 
4. 在 查找 对 话 框 中 输入 本 书 的 名 字 。 
5. 选中 要 下 载 代码 文件 的 书 名 。 


6. 从 下 拉 列 表 框 中 选中 购买 本 书 的 途径 。 


7. 单 击 “Code Download”。 


当 文件 下 载 之 后 ， 需 要 使 用 如 下 软件 的 最 新 版 来 对 这 个 文件 进行 
解压 。 


Windows 操 作 系 统 下 的 WinRAR / 7-Zip 
Mac 操 作 系 统 下 的 Zipeg / iZip / UnRarX 


Linux 操 作 系 统 下 的 7-Zip / PeaZip 
下 载 本 书 的 彩 图 版 


我 们 同样 提供 了 使 用 本 书 的 PDF 彩 图 版 ， 彩 色 的 图 片 可 以 更 有 效 
地 帮助 读者 理解 书 中 的 内 容 ， 可 以 从 下 面 的 这 个 地 址 下 载 本 书 的 彩 
版 https://www.packtpub.com/sites/default/ 
files/downloads/UnitySxByExample_ColorImages.pdf ° 


勘误 


虽然 我 们 已 尽力 确保 本 书 内 容 正确 ， 但 错误 仍 在 所 难免 。 如 采 读 
者 在 书 中 发 现任 何 文 字 或 者 代码 错误 ， 束 请 将 这 些 错误 提交 给 我 们 ， 
以 便 帮 助 我 们 改进 本 书 的 后 续 版 本 ， 避 人 免 其 他 读者 产生 不 必要 的 误 
解 。 如 果 读 者 发 现 了 错误 ， 请 访问 http://www.packtpub.com/ submit- 
errata， 选 择 相 应 图 书 ， 单 击 errata submission form 链 接 ， 然 后 填写 具体 
的 错误 信息 即 可 。 勘 误 一 经 核实 ， 读 者 的 提交 将 被 接受 ， 此 勘误 将 被 
上 传 到 本 公司 网 站 或 添加 到 现 有 勤 误 表 中 。 读 者 可 以 通过 在 
http://www.packtpub.com/support 上 选择 书 名 来 查看 本 书 所 有 的 勘误 
表 o 


侵权 声明 
版 权 问题 是 每 一 个 媒体 都 要 面 对 的 问题 。Packt 非 常 重视 版 权 的 保 


护 。 如 果 读 者 发 现 我 们 的 作品 在 互联 网 上 以 任何 形式 被 非法 复制 ， 请 
立即 告知 我 们 相关 网 址 或 网 站 名 称 ， 以 便 我 们 采取 措施 。 


请 把 可 疑 盗版 材料 的 链接 发 到 copyright@packtpub.com 。 
非常 感谢 你 帮助 我 们 保护 作者 的 权益 。 
问题 


如 果 你 对 本 书 有 任何 方面 的 疑问 ， 可 以 通过 
questions@packpub.com 联系 我 们 ， 我 们 将 尽 最 大 的 努力 解决 。 


第 1 章 ”金币 采集 游戏 (1) 


本 章 将 会 以 一 个 十 分 有 趣 的 采集 类 游戏 作为 Unity 的 入 门 。 即 使 你 
以 前 从 来 都 没有 使 用 过 Unity 这 个 游戏 引擎 ， 也 无 需 有 任何 的 担心 我 
们 的 教程 将 会 一 步 一 步 地 来 指导 你 熟悉 Unity。 到 了 下 一 章 结束 的 时 
候 ， 你 整 可 以 利用 所 学 的 内 容 构 迁 出 一 个 比较 位 单 但 古 功 能 相当 完 赫 
的 游戏 。 这 将 是 一 个 非 第 重要 的 过 程 ， 因 为 在 从 始 至 终 的 开发 中 ， 你 
将 会 了 解 到 整个 游戏 的 实现 流程 。 


在 本 章 中 将 会 学 习 到 如 下 内 容 : 
。 Unity 游 戏 的 设计 
。 Unity 项 目 和 目录 
。 Unity 资 源 (Asset) 的 导入 和 配置 
。 Unity 游 戏 关卡 的 设计 
。 Unity 游 戏 设计 中 的 对 象 


。 Unity 中 的 结构 树 (Hierarchies) 


1.1 游戏 设计 


现在 就 来 开始 游戏 的 开发 之 旅 吧 。 首 先 ， 这 是 一 个 第 一 人 称 视角 
的 游戏 ， 玩 家 必须 在 规定 时 间 内 通过 不 断 地 移动 去 采集 所 有 的 金币 。 
如 果 玩 家 在 时 间 耗 尽 时 还 没有 采集 到 所 有 金币 ， 则 视 为 玩家 失败 ， 游 
戏 结束 。 如 果 玩 家 在 时 间 耗 尽 之 前 就 将 全 部 的 金币 采集 完毕 ， 则 视 为 
玩家 胜利 。 这 款 游戏 的 方向 控制 采用 标准 “WASD” 的 模式 ， 按 下 “WwW” 键 
向 前 运动 ， 按 下 “A” 键 向 左 运动 ， 按 下 “S” 键 向 右 运 动 ， 按 下 “D” 键 向 后 
运动 。 视 角 的 变换 由 鼠标 控制 ， 当 走 到 金币 的 位 置 时 就 可 以 完成 金币 
的 采集 。 如 图 1.1 所 示 ， 采 用 Unity 编 辑 器 实现 对 游戏 行为 的 设计 。 开 发 
这 个 游戏 的 最 大 优势 就 在 于 ， 通 过 整个 的 开发 过 程 ， 可 以 了 解 到 Unity 
的 全 部 关键 特性 ， 同 时 无 需 使 用 任何 额外 的 软件 来 产生 游戏 所 需 的 资 
源 (Asset) ， 例 如 贴图 (Textures) 、 网 格 (Meshes) 以 及 材质 


(Materials) 等 。 


图 1.1 金币 采集 游戏 (最 终 完 成 效果 


本 章 和 下 一 章 介 绍 了 这 个 金币 采集 游戏 的 开发 过 程 ， 关 于 这 个 金币 采 
集 游戏 的 完整 代码 ， 可 以 在 本 书 的 配套 文件 Chapter01/CollectionGame 目 录 
下 找到 。 


1.2 从头 开始 一 一 Unity 中 的 项 目 


当 在 Unity 中 创建 一 个 新 游戏 时 ， 如 现在 的 金币 采集 游戏 ， 都 需要 
先 创建 一 个 新 的 项 目 。 一 般 来 说 ，Unity 中 的 “项 目 ” 这 个 词 就 等 同 于 “ 游 
戏 ”。 在 Unity 中 有 两 种 方法 来 创建 一 个 新 的 项 目 ， 但 其 实 这 两 者 并 没有 
大 大 的 差别 。 在 打开 的 Unity 的 图 形 化 编辑 界面 中 ， 可 以 看 到 一 个 场景 
或 者 关卡 ， 从 应 用 沫 单 上 依次 选择 “File | New Project"， 如 图 1.2 所 示 。 
这 时 Unity 会 询问 是 否 对 当前 已 经 打开 的 项 目 进行 保存 ， 这 时 需要 根据 
目 己 的 实际 情况 来 选择 “Yes” 或 者 “No”。 在 选择 完 “New Project” 以 后 ， 
Unity 将 会 出 现 一 个 项 目 创建 向 导 ， 根 据 这 个 向 导 的 要 求 ， 束 可 以 一 步 
一 步 完成 项 目的 创建 工作 了 。 


所 
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图 1.2 ”使 用 主 菜单 来 创建 一 个 新 的 项 目 


如 果 是 第 一 次 启动 Unity， 则 会 看 到 一 个 欢迎 的 对 话 框 ， 如 图 1.3 所 
示 。 在 这 个 对 话 框 中 ， 可 以 通过 选择 “NEW PROJECT” 按 钮 来 创建 新 的 
项 目 。 


Unity 5.1.3f1 | 


Ee— 


Projects jetting start [DN opEN oTHER ES EE 


<— 


图 1.3 ”Unity 的 欢迎 界面 


选择 “NEW PROJECT” 创 建 癌 导 之 后 ，Unity 就 会 按照 指定 的 一 些 
基本 设置 来 创建 一 个 新 的 项 目 。 此 处 需要 填写 项 目的 名 称 (例如 
CollectionGame) ， 然 后 在 电脑 上 选择 一 个 用 来 保存 自动 生成 项 目 文件 


的 文件 夹 。 最 后 ， 注 意 3D 和 2D 的 这 两 个 按钮 ， 当 单 击 3D 按 钮 时 ， 这 意 
味 着 要 创建 的 是 一 个 三 维 游戏 ， 如 果 单 击 的 是 2D 按 钮 ， 这 意味 着 将 要 
创建 一 个 二 维 的 游戏 ， 所 有 这 些 步 又 都 完成 之 后 ， 需 要 单 击 “Create 
project” 按 钮 来 完成 整个 项 目的 生成 过 程 ， 如 图 1.4 所 示 。 


包 Unity 5.1.3f1 


图 1.4 创建 一 个 新 的 项 目 


1.3 项目 和 项 目 文件 夹 


现在 Unity 已 经 创建 了 一 个 空白 的 新 项 目 。 这 里 就 是 开发 一 个 新 游 
戏 的 起 点 ， 在 这 个 新 创建 的 项 目 中 并 不 包含 任何 的 东西 ， 没 有 任何 的 
网 格 ， 贴 图 或 者 其 他 资源 。 这 一 点 只 需要 检查 一 下 位 于 Unity 编 辑 器 界 
面 下 方 的 项 目 (Project) 面板 区 域 就 可 以 确定 。 这 个 项 目 (Project) 面 
板 中 会 显示 项 目 文件 夹 中 的 全 部 资源 ， 同 时 它 也 对 应 着 一 个 本 地 了 驱动 
器 上 的 文件 夹 ， 而 这 个 文件 夹 就 是 在 之 前 项 目 向 导 中 所 创建 的 。 这 个 


文件 夹 如 图 1.5 所 示 ， 现 在 也 是 空 的 。 在 这 个 游戏 的 开发 过 程 中 ， 还 会 
使 用 到 这 个 项 目 (Project) 面板 中 的 更 多 功能 。 
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图 1.5 ”位 于 Unity 开 发 界面 的 底部 的 项 目 (Project) 面板 


如 果 现 在 使 用 的 Unity 开 发 界面 的 布局 与 图 1.5 所 示 的 有 些 不 同 ， 那 么 可 
以 选择 将 用 户 开发 界面 的 布局 进行 重 置 ， 恢 复 为 默认 布局 。 只 需要 单 击 开 
发 界面 石上 角 的 布局 下 拉 菜 单 ， 然 后 再 选择 “Default*"， 见 图 1.6。 


所 Unity (64bib - Untitled - CollectionGame - PC Mac & Linux Standalone <DX11> - 


File Edit Assets GameObject Component Window Help 


二 Hierarchy 


[Defaut | |Aaccount >| 
E Gami | © Inspector 2by3 
"||2D|| 这 | |"| | Gizamos 7| (orA | | 4 Split 

Default Ne 


Tall 
Wide 


Main Camera 
Directional Light 


Save Layout... 
Delete Layout… 
Revert Factory Settings... 


Project 
| Create | 
Ti7Favorites Assets 
© all Materials 
(© all Models 
人 AI scripts 
© all prefabs 


This folder is empty 


图 1.6 切换 成 默认 的 开发 界面 布局 


可 以 在 Windows 操 作 系 统 下 的 资源 管理 圳 或 者 Mac 操 作 系统 中 的 
Finder 直 接 查 看 到 项 目 文 件 夹 中 的 内 容 。 要 做 到 这 一 点 ， 只 需要 在 
Unity 编 辑 器 上 的 项 目 (Project) 面板 中 单 击 鼠 标 右键 ， 这 时 就 会 显示 
出 一 个 内 容 荣 单 ， 然 后 在 这 个 荣 单 上 选择 选项 <Show in Explorer”， 这 
个 过 程 如 图 1.7 所 示 。 
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图 1.7 使 用 项 目 (Project) 面板 显示 项 目 文件 夹 


单 击 “Show in Explorer" 可 以 在 默认 的 系统 文件 浏览 右 中 对 文件 夹 
中 的 内 容 进 行 浏览 ， 如 图 1.8 所 示 。 以 这 种 方式 查看 文件 ， 可 以 更 容易 
地 实现 对 文件 的 检查 、 请 点 或 者 备份 操作 。 但 是 ， 不 要 在 Windows 操 作 
系统 下 的 资源 管理 器 或 者 Mac 操 作 系 统 中 的 Finder 中 对 文件 夹 中 的 内 容 
进行 修改 ， 尤 其 是 不 要 进行 移动 、 重 命名 或 者 删除 文件 的 操作 ， 这 样 
操作 可 能 会 导致 Unity 项 目 损坏 。 如 果 进 行文 件 的 删除 和 移动 操作 ， 驶 


在 Unity 编 辑 器 中 的 项 目 (Project) 面板 中 进行 。 只 有 这 样 操作 ，Unity 


会 同时 对 它 的 元 数据 进行 更 新 ， 以 确保 项 目 能 继续 正常 工作 。 


File Home Share 


1 BB <«< chapter 01 » 


广 Name 
四 Assets 
| 肠 Library 
于 ProjectSettings 
用 Temp 
了 
3 
芋 
则 
| 
v 


4 items 1 item selected 


CollectionGame ~- 口 
@ 


» start » CollectionGame 


Date modified Type 


图 1.8 ”从 操作 系统 的 文件 浏览 器 中 查看 项 目 (Project) 面板 的 内 容 


如 采 是 从 操作 系统 的 文件 浏览 器 中 查看 项 目 文件 夹 ， 束 可 以 看 到 一 些 


在 项 目 (Project) 面板 中 看 不 到 的 文件 和 文件 夹 ， 例 如 Library 文 件 夹 、 
Project Settings 文 件 夹 或 者 Temp 文 件 夹 。 这 些 文件 夹 中 保存 的 都 是 项 目的 元 


数据 。 这 些 文件 并 不 是 项 目 直接 的 组 成 部 分 ， 但 是 却 包含 一 些 额外 的 设置 


和 首选 项 信息 ， 


这 些 信息 保证 了 Unity 能 正常 运行 。 注 意 ， 不 要 试图 对 这 些 


文件 夹 和 其 中 的 文件 进行 修改 或 者 编辑 。 


质 源 是 游戏 开发 中 的 原材料 ， 也 融 是 组 成 游戏 的 模块 。Unity 中 的 
资源 包括 网 格 〈 或 者 3D 模 型 ) 、 贴 图 、 各 种 音乐 和 音效 、 场 景 ， 其 中 
网 格 包括 各 种 人 物 、 道 具 、 植 物 、 建 筑 物 等 ， 贴 图 包括 各 种 JPEG 文 件 
和 PNG 文 件 ， 这 些 图 片 决 定 了 网 格 的 外 观 ， 音乐 和 音效 用 来 提高 游戏 
真实 性 和 气氛 ; 场景 (Scene) 是 一 个 网 格 、 纹 理 、 音 乐 、 音 效 等 协同 
工作 而 组 成 的 独立 系统 。 因 此 可 以 这 样 说 ， 游 戏 不 能 没有 资源 ， 否 则 
这 些 游戏 看 起 来 空虚 而 又 无 趣 。 基 于 这 个 原因 ， 人 金币 采集 游戏 也 同样 
需要 资源 。 和 毕竟 这 个 游戏 需要 一 个 可 以 在 其 中 进行 移动 和 采集 操作 的 
环境 。 


Unity 只 是 一 个 游戏 开发 引擎， 而 并 非 是 一 个 资源 开发 软件 。 这 意 
味 着 在 游戏 中 需要 的 资源 (例如 各 种 人 物 、 道 具 ) ， 通 常 是 由 一 些 设 
计 痢 使 用 其 他 软件 开发 出 来 的 。 然 后 ， 这 些 设计 者 将 这 些 制作 好 的 资 
产 导 出 ， 并 传递 给 Unity。Unity 则 人 负责 将 这 些 资 源 有 机 地 组 合 到 一 个 游 
戏 系统 中 。 这 些 用 来 设计 3D 模 型 资源 的 第 三 方 软件 包括 Blender (这 是 
一 款 免费 的 软件 ) 、Maya 或 者 3DMAX 。 而 对 于 纹理 的 创建 ， 可 以 选择 
Photoshop 或 者 GIMP 〈 这 也 是 一 款 免 费 的 软件 ) 。 至 于 音效 的 制作 ， 可 
以 选择 使 用 Audacity 〈 这 款 软件 同样 是 免费 的 ) 。 当 然 除 了 这 些 软件 以 
外 ， 还 有 更 多 的 选择 。 这 些 软 件 的 具体 内 容 并 不 在 本 书 的 范围 内 。 通 
常 ，Unity3 引 擎 会 认为 已 经 有 了 可 以 导入 到 游戏 中 的 资源 。 例 如 ， 在 金 
币 采 集 的 游戏 中 将 使 用 Unity 所 提供 的 资源 。 现 在 ， 将 这 些 资源 导入 到 
这 个 项 目 中 ， 为 此 ， 需 要 首先 选择 染 单 栏 上 的 “Assets” 选 项 ， 然 后 在 下 
拉 荣 单 上 选中 *Import Package”， 然 后 如 图 1.9 所 示 依 次 选 
中 “Characters”ParticleSystems”“Environment” 和 “Prototyping” 等 选项 。 
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然后 单 击 *Import” 按 钮 即 可 。 
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图 1.9 ”使 用 资源 包 导 入 (Import Package) 菜单 完成 资源 导入 操作 


行 一 个 资源 包 的 导入 操作 时 ， 都 会 出 现 一 个 
行 任何 改动 ， pei 
这 个 过 程 如 图 1.10 所 示 。 
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图 1.10 ”选择 需要 导入 的 资源 


默认 情况 下 ，Unity 会 从 资源 包 (一 个 资源 的 库 文 件 ， 中 的 所 有 文 
件 解压 缩 到 当前 项 目 中 。 在 导入 操作 结束 后 ， 各 种 各 样 的 大 量 资 源 和 
数据 将 会 添加 到 项 目 中 ， 以 后 可 以 随时 使 用 这 些 文件 ， 它 们 都 是 原来 
文件 的 副本 。 所 以 ， 无 论 对 项 目 中 的 哪个 文件 进行 更 改 ， 都 不 会 影响 
到 原来 文件 。 这 些 文件 包括 各 种 模型 、 声 首 、 贴 图 等 。 图 1.11 所 示 为 在 
Unity 项 目 (Project) 面板 的 编辑 器 中 列 出 的 这 些 文件 。 
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图 1.11 从 项 目 (Project) 面板 中 对 导入 的 资源 进行 浏览 


当 在 应 用 菜单 


和 上 依次 选择 了 “Assets | Import* 之 后 


百 ， 如 果 什 么 资源 包 都 


没有 ， 那 么 可 以 从 Unity 的 主 


页 https:// Unity3d.com/ 上 下 载 和 安装 这 些 资源 


包 。 打 开 这 个 主 


页 之 后 ， 首 先 选择 “Additional Downloads”， 


所 示 的 页 面 上 选择 “Standard Assets”。 


然后 在 如 


图 1.12 
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图 1.12 ”标准 资源 包 (Standard Assets) 的 下 载 


然而 导入 的 资源 并 没有 存在 于 游戏 之 中 ， 没 有 出 现在 屏幕 上 ， 
不 Pe 它们 只 是 被 简单 地 添加 到 了 项 目 (Project) Ce 
这 些 资源 现在 更 像 是 一 个 库 或 者 说 是 资源 的 仓库 ， 可 以 从 其 中 进 
eg 到 目前 为 止 ， 这些 资源 ie 
在 之 后 的 章节 中 将 继续 使 用 它们 ， 来 完善 金币 采集 游戏 的 功 
。 如 果 想 了 解 关 于 每 个 资源 的 详细 信息 ， 可 以 使 用 鼠标 单 击 选中 这 
A 这 时 关于 这 个 资源 的 详细 信息 就 会 出 现在 Untiy 编 辑 器 右 侧 的 
今 查 (Inspector) 面板 中 。 检 查 (Inspector) 面板 是 一 个 位 于 开发 界面 


右 侧 的 属性 编辑 器 ， 它 是 上 下 文敏 感 的 ， 并 会 自动 切换 为 显示 所 选 对 
象 的 属性 ， 如 图 1.13 所 示 。 
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图 1.13 ”检查 (Inspector) 面板 显示 了 当前 选中 物体 的 所 有 属性 


1.4 开始 一 个 关卡 


现在 已 经 创建 了 一 个 Unity 的 项 目 ， 并 且 利 用 Unity 的 标准 资源 包 导 
入 了 一 个 很 大 的 资源 库 ， 包 括 一 些 建筑 类 网 格 ， 例 如 墙 、 地板、 天 人 花 
板 、 楼 梯 等 ， 将 使 用 这 些 资源 建立 第 一 个 关卡 (level) 。 记 住 , 在 
Unity 中 ， 一 个 场景 《Scene) 往往 也 就 意味 着 一 个 关卡 。 场 景 和 关卡 这 
两 个 词汇 在 这 里 是 没有 区 别 的 ， 都 是 指 一 个 三 维 空间 ， 也 驶 是 游戏 发 
生 的 时 空 。 现 在 来 创建 一 个 金币 采集 游戏 的 场景 ， 首 移 从 应 用 程序 菜 
单 依次 选择 “File | New”， 或 者 也 可 以 在 键盘 上 按 下 “Ctrl + N” 组 合 键 。 
当 完 成 了 这 个 操作 之 后 ， 一 个 新 的 空白 的 场景 就 被 创建 好 了 。 可 以 在 
占据 了 Unity 开 发 界面 最 大 部 分 的 场景 (Scene) 选项 卡 中 看 到 场景 的 预 
览 ， 如 图 1.14 所 示 。 
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图 1.14 场景 《Scene) 选项 卡 中 给 出 了 一 个 3D 世 界 的 预览 


图 1.14 所 示 ， 在 Unity 中 的 场景 (Scene) 选项 卡 以 外 的 其 他 选项 卡 也 
是 可 见 的 ， 并 且 可 以 使 用 的 。 这 些 选 项 卡 包括 游戏 (Game) 选项 卡 和 动画 
Animator) 选项 卡 。 有 时 ， 选 项 卡 的 数目 可 能 会 更 多 。 不 过 现在 可 以 忽 
略 除了 场景 以 外 的 其 他 所 有 选项 卡 。 场 景 (Scene) 选项 卡 是 为 了 能 够 在 游 
戏 的 开发 中 简单 快速 地 查看 一 个 关卡 。 


每 一 个 新 的 场景 都 是 空 的 ,严格 来 说 几乎 是 空 的。 默认 情况 下 ， 
每 一 个 狐 的 场景 都 是 由 两 个 对 象 开 始 的 ， 首 移 添 加 一 个 用 来 照 亮 其 他 


任意 对 象 的 光源 对 象 (Light) ， 然 后 是 一 个 用 来 从 特定 角度 对 场景 中 
的 内 容 进行 显示 和 泻 染 用 的 摄像 机 (Camera) 。 可 以 使 用 开发 界面 

( 见 图 1.15) 左 侧 的 层次 (Hierarchy) 面板 来 查看 所 有 在 场景 中 对 象 的 
完整 列表 。 这 个 面板 上 显示 了 场景 中 所 有 对 象 的 名 称 。 在 Unity 中 ， 游 
戏 对 象 的 含义 就 是 在 场景 中 存在 的 单一 、 独 立 的 东西 ， 无 论 它们 是 可 
见 的 还 十 不 可 见 的 ， 例 如 网 格 、 光 源 、 摄 像 机 、 道 具 等 。 因 此 ， 只 有 
从 层次 (Hierarchy) 面板 才能 看 到 游戏 场景 中 的 一 切 。 
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图 1.15 ”层次 (Hierarchy) 面板 


出 


也 可 以 通过 在 层次 (Hierarchy) 面板 中 单 击 游戏 中 对 象 的 名 称 来 选中 


接 下 来 为 这 个 场景 添加 一 个 地 面 (Floor) 。 要 知道 ， 游 戏 中 的 玩 
家 总 得 站 在 一 些 东 西 上 面 。 可 以 使 用 第 三 方 的 建 模 软件 (如 Maya、 
3DS Max 或 者 Blender) 来 创建 一 个 地 面 网 格 。 不 过 ， 在 之 前 导入 过 的 
标准 资源 包 中 残 伟 有 可 以 使 用 的 地 面 网 格 ， 这 是 相当 方便 的 。 这 些 网 
格 都 是 原型 软件 包 (Prototyping Package) 的 一 部 分 。 如 果 想 通过 项 目 

(Project) 面板 完成 对 这 些 资 源 的 访问 ， 可 以 双击 打开 “Standard 

Assets” 文 件 夹 ， 然 后 访问 “Prototyping | Prefabs” 文 件 夹 。 如 图 1.16 所 
示 ， 可 以 看 到 这 些 对 象 ， 并 从 检查 (Inspector) 面板 中 对 它们 进行 预 
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图 1.16 包含 了 大 量 用 于 快速 


土 立场 景 的 网 格 的 标准 资源 包 / 原 型 包 


E: 


六 

你 也 可 以 在 应 用 程序 荣 单 上 依次 选择 GameObject|3D ObjectlPlane， 这 
样 可 以 更 加 方便 地 向 场景 (Scene) 中 添加 地 面 (Floor) 。 不 过 ， 加 进来 的 
这 个 地 面 看 起 来 一 片 灰暗 ， 给 人 一 种 枯燥 无 味 的 感觉 。 当 然 ， 这 个 地 面 的 
外 观 是 可 改变 的 。 正 如 我 们 在 后 面 即将 看 到 的 一 样 ，Unity 中 允许 对 物体 外 


观 进行 改变 。 不 过 ， 在 本 书 中 ， 我 们 将 从 项 目 面 板 (Project panel) 中 的 标 
准 资源 包 里 找到 一 个 专门 的 地 面 网 格 (floor mesh) 来 使 用 。 


图 1.16 所 示 的 名 为 “FloorPrototype64x01x64” 的 网 格 十 分 适合 作为 一 
个 地 面 ， 现 在 只 需要 简单 地 将 项 目 (Project) 面板 (Panel) 中 的 对 象 


拖 忠 到 场景 (Scene) 视图 中 ， 然 后 释放 鼠标 即 可 完成 这 个 网 格 的 添加 
工作 ， 如 图 1.17 所 示 。 当 在 进行 这 个 操作 时 要 注意 ， 在 三 维 空间 中 新 添 
加 了 网 格 之 后 ， 场 景 (Scene) 视图 中 发 生 的 变化 ， 同 时 也 要 注意 到 这 
个 网 格 的 名 称 也 出 现在 了 层次 (Hierarchy) 面板 的 列表 中 。 
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图 1.17 ”将 网 格 资源 从 项 目 (Project) 面板 中 拖 动 到 场景 视图 中 


至 此 ， 现 在 项 目 (Project) 面板 上 的 网 格 资源 已 经 被 实例 化 为 一 个 
场景 中 的 物体 。 这 意味 着 一 个 项 目 (Project) 面板 上 的 副本 已 经 作为 一 
个 独立 的 游戏 对 象 加 入 到 了 场景 之 中 。 地 面 的 实例 (或 者 对 象 ， 依 附 
于 项 目 (Project) 面板 中 的 “floor” 资 源 。 但 是 反 过 来 ， 这 些 资源 却 并 不 
依附 这 些 实例 。 这 意味 着 当 在 场景 中 删除 这 些 实例 (或 者 游戏 对 象 ) 
时 ， 这 些 资源 并 不 会 被 删除 。 反 之 ， 当 删除 了 这 些 资源 时 ， 场 景 中 的 
这 些 实例 就 会 被 删除 。 如 果 场 景 中 需要 更 多 的 地 面 ， 就 可 以 多 次 从 项 
目 (Project) 面板 中 向 场景 (Scene) 视图 拖 动 “floor” 资 源 。 每 进行 一 


次 这 种 操作 ， 都 会 在 场景 中 添加 一 个 单独 的 游戏 物体 。 虽 然 这 些 游戏 
物体 都 依附 于 同一 个 "floor 资源 ， 但 是 它们 相互 之 间 都 是 独立 的 〈 见 图 
1.18) 。 
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图 1.18” 疝 场 景 中 添加 多 个 “floor” 网 格 


实际 上 ， 并 不 需要 这 么 多 重复 的 地 面 ， 所 以 先 把 它们 删除 。 删 除 
这 些 地 面 的 方法 是 先 在 场景 (Scene) 视图 中 逐个 单 击 这 些 “floor” 对 
象 ， 然 后 在 键盘 上 按 下 删除 键 。 另 外 记 住 ， 也 可 以 通过 单 击 层次 

(Hierarchy) 面板 上 这 些 游 戏 物体 的 名 字 ， 然 后 按 下 删除 键 。 不 管 使 
用 的 是 哪 一 种 方法 ， 如 今 在 场景 中 都 只 剩 下 了 唯一 一 个 “floor 对象。 现 
在 还 有 一 个 问题 ， 那 就 是 这 个 “floor" 对 象 的 名 字 问 题 。 在 层次 

(Hierarchy) 面板 上 可 以 清楚 地 看 到 这 个 "floor 对象 的 名 字 


是 “FloorPrototype64x01x64”， 这 个 名 字 很 长 ， 意 义 又 不 够 明确 ， 而 且 
调用 的 时 候 又 不 方便 。 因 此 应 该 将 这 个 名 字 改 为 一 个 更 容易 管理 的 ， 
而 且 意 义 更 明确 的 ， 这 样 才 能 使 工作 更 加 有 条 理 ， rd 
Unity 中 有 很 多 种 可 以 将 对 象 重 命名 的 方法 ， 首 先 选 中 对 象 ， 然 后 在 其 
检查 (Inspector) 面板 中 的 名 称 字段 处 输入 新 的 名 字 。 这 里 将 这 个 对 象 
重 命名 为 “WorldFloor”， 如 图 1.19 所 示 。 
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图 1.19 ”对 “floor”* 网 格 进行 重 命名 


1.5 ”变换 和 导航 


到 现在 为 上 ， Oe ， 但 是 仅仅 这 一 个 游戏 
对 象 还 是 很 无 趣 的 ， 还 需要 问 其 中 添加 更 多 的 内 容 ， 例 如 建筑 物 、 楼 


梯 、 柱 子 或 者 更 多 的 地 面 。 否 则 ， 玩 家 在 这 个 游戏 中 束 没 有 能 进行 探 
索 的 世界 了 。 在 开始 创建 之 前 ， 首 先 要 先 确 认 现 在 的 地 面 处 在 了 整个 
世界 的 中 心 位 置 。 场 景 中 的 任何 一 个 位 置 都 有 一 个 唯一 的 坐标 ， 这 个 
坐标 (x,y,z) 值 指 的 是 距离 世界 中 心 点 (原点 ;的 距离 。 在 检查 

(Inspector) 面板 中 可 以 看 到 当前 选中 对 象 的 坐标 。 事 实 上 ， 在 Unity 
中 ， 一 个 对 象 的 位 置 (Position) 、 角 度 (Rotation) 和 尺寸 (Scale) 
同属 于 一 个 名 为 变换 (Transform) 的 类 别 。 位 置 表示 的 是 一 个 对 象 距 
离 3 个 坐标 轴 的 距离 。 和 角度 表示 一 个 对 象 绕 着 它 的 中 心 轴 旋 转 的 角度 。 
尺寸 表示 一 个 对 象 应 该 缩小 到 多 小 或 者 扩大 到 多 大 。 默 认 的 尺寸 指 的 
就 是 对 象 正常 的 大 小 ， 尺 寸 为 2 表示 扩大 到 原来 两 倍 的 大 小 ， 尺 寸 为 0.5 
表示 缩小 到 原来 的 一 半 ， 以 此 类 推 。 这 样 ， 一 个 对 象 的 位 置 、 角 度 、 
尺寸 共同 构成 了 它 的 变换 属性 。 如 果 想 改变 一 个 选 定 对 象 的 位 置 ， 可 
以 在 x、y 和 z 位 置 字段 输入 新 的 值 。 例 如 将 一 个 对 象 移动 到 游戏 世界 的 
中 心 ， 就 可 以 输入 (0,0,0) ， 如 图 1.20 所 示 。 


| Layers | | Layout ” | Account | 
"三 | @ Inspector | 于 Lighting 六 -三 
图 WorldFloor Dstatic v 
Tag | Untagged + | Layer | Default 


万 和 人 Transform 
Position Xx 
Rotation X 0 
Scale XIl 


2 Floor Prototype 64x01x64 (ML 议 , 
Mesh 最 FloorPrototype64x © 
v. IMMeshRenderer 回头 
Cast Shadows | off 国 
Receive Shadows [Ml 
b> Materials 
Use Light Probes 品 
Reflection Probes |BlendProbes ?| 


Anchor Override None (Transform) © 


图 1.20 ”将 一 个 对 象 移动 到 游戏 世界 的 中 心 点 


如 上 所 示 ， 通 过 输入 适当 的 值 ， 当 然 这 个 值 要 在 系统 许可 的 范围 
内 ， 束 可 以 为 对 象 指 定 准 确 的 位 置 。 不 过 ， 使 用 鼠标 来 直接 移动 对 象 
往往 更 为 直观 。 现 在 就 来 完成 这 个 操作 ， 首 先 添 加 第 二 个 floor 对 象 ， 
这 个 floor 对 象 的 位 置 要 远离 第 一 个 floor 对 象 。 先 从 项 目 (Project) 面板 
上 拖 暇 一 个 floor 对 象 到 场景 中 ， 然 后 单 击 这 个 新 的 floor 场 景 以 选中 
它 ， 然 后 按 下 键盘 上 的 “W”* 键 ， 或 者 单 击 编 辑 絮 界面 顶端 的 变换 工具 图 
标 来 切换 到 变换 工具 。 变 换 工 具 允 许 对 场景 中 的 对 象 进行 重新 定位 ， 
如 图 1.21 所 示 。 


WorldFloor 
Main Camera 
Directional Light 


图 1.21 打开 变换 工具 


当选 定 一 个 游戏 对 象 ， 并 且 打 开 变 换 工 具 以 后 ， 一 个 标识 

(Gizmo) 就 出 现在 游戏 对 象 的 中 心 部 分 ， 在 场景 (Scene) 选项 卡 中 
可 以 看 到 标识 (Gizmo) 其 实 是 由 3 个 不 同 颜色 的 彩色 轴 组 成 的 。 其 
中 ， 红 颜色 的 轴 代 表 x 轴 ， 绿 颜色 的 轴 代 表 y 轴 ， 蓝 颜色 的 轴 代 表 z 轴 。 
如 果 想 移动 一 个 游戏 对 象 ， 首 先 要 将 光标 悬 停 在 这 3 个 轴 中 的 一 个 轴 
(或 者 两 个 轴 之 间 的 平面 ) 上 面 ， 然 后 单 击 并 按 住 鼠 标 ， 同 时 向 目标 
方向 拖 动 。 可 以 反复 地 进行 这 个 操作 ， 将 游戏 对 象 移动 到 指定 的 位 
置 。 现 在 就 用 这 个 方法 来 拖 动 第 二 个 floor 对 象 ， 使 其 远离 第 一 个 floor 
对 象 ， 如 图 1.22 所 示 。 
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图 1.22 ”使 用 标识 (Gizmo) 来 完成 对 一 个 游戏 对 象 的 变换 操作 


也 可 以 使 用 鼠标 来 完成 对 游戏 对 象 的 转动 和 缩放 。 在 键盘 上 按 
下 所 ? 键 可 以 局 动 旋转 工具 ， 按 下 “R" 键 可 以 局 动 缩放 工具 ， 或 者 也 可 
以 在 编辑 器 界面 的 上 方 单 击 它们 对 应 的 工具 栏 图 标 来 局 动 这 些 工 具 。 
当 工 具 启 动 之 后 ， 一 个 标识 (Gizmo) 就 出 现在 这 个 对 象 的 中 心 部 分 ， 
可 以 通过 单 击 和 拖 动 鼠标 来 将 这 个 对 象 旋转 到 指定 角度 ， 或 者 缩放 到 
指定 尺寸 ， 如 图 1.23 所 示 。 


File Edit Assets GameObject Component Mobilelnput Window Help 


EKA S Edisd 


Ee EW X | 夺 Scene | Game | 
Creats A > ) | Shaded 


2D|| 六 | 动因 外 | 


Main Camera 


图 1.23 ”旋转 和 缩放 工具 的 选择 


在 Unity 中 进行 开发 时 ， 使 用 键 弄 和 鼠标 对 物体 进行 快速 的 移动 、 
旋转 和 缩放 是 非常 重要 的 。 所 以 ， 最 好 习惯 使 用 键盘 的 快捷 键 来 完成 
这 些 操作 ， 而 不 是 总 用 鼠标 去 单 击 工具 栏 。 不 过 ， 除 了 要 对 游戏 对 象 
进行 移动 、 旋 转 和 缩放 以 外 ， 可 能 还 需要 频繁 地 变换 目 己 的 视角 ， 这 


样 才 能 从 不 同 的 位 置 、 角 度 和 视角 对 这 个 世界 进行 观察 。 这 意味 着 必 


须要 经 常 改 变 场景 中 的 摄像 机 。 当 要 看 清楚 一 个 游戏 对 象 时 ， 就 会 需 
要 进行 放大 或 缩小 的 操作 。 如 果 想 准确 地 将 游戏 对 象 对 齐 并 结合 在 一 


一 口 号 


起 ， 惑 需要 改变 观察 的 视角 。 如 果 想 完成 这 些 操 作 ， 束 需要 充分 地 将 
鼠标 和 键盘 结合 在 一 起 使 用 。 


如 果 想 靠近 或 者 远离 正在 观察 的 对 象 ， 只 需要 向 上 或 者 向 下 滑动 
鼠标 滚轮 ， 束 可 以 实现 放大 或 者 缩小 目标 对 象 ， 过 程 如 图 1.24 所 示 。 
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图 1.24 ”放大 或 者 缩小 操作 


按 住 鼠 标的 中 键 然后 将 鼠标 向 适当 的 方向 移动 ， 如 向 上 移动 ， 这 
样 就 可 以 将 场景 Scene) 视图 向 上 移动 。 同 样 ， 向 另外 3 个 方向 移动 
鼠标 也 可 以 将 场景 (Scene) 视图 向 这 3 个 方向 移动 。 或 者 也 可 以 在 应 
A (或 者 使 用 键盘 上 的 Q 快 捷 键 ) 激活 移动 工具 ， 如 图 1.25 所 
。 当 这 个 移动 工具 处 于 激活 状态 的 时 候 ， 束 可 以 十 分 简单 地 单 击 并 


拖 动 整个 场景 (Scene) 视图 。 注 意 ， 这 个 操作 并 不 会 改变 场景 的 大 
小 ， 而 只 是 沿 着 向 左 、 癌 右 或 者 和 同上、 向 下 的 方向 滑动 摄像 机 。 
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图 1.25 ”激活 移动 工具 


有 时 在 构建 关卡 时 ， 可 能 会 找 不 到 所 需要 的 对 象 。 例 如 ， 此 时 摄 
像 机 可 能 正在 关注 一 个 与 目标 完全 不 同 的 地 方 ， 这 个 地 方 并 不 是 所 要 
单 击 或 者 看 到 的 。 如 果 遇 到 了 这 种 情况 ， 必 须要 改变 相机 的 视角 来 找 
到 目标 对 象 。 如 有 果 将 这 个 目标 对 象 处 在 整个 场景 的 中 心 ， 束 必须 不 断 
地 进行 改变 位 置 和 旋转 视图 的 操作 。 但 是 如 采 要 目 动 地 完成 这 一 切 ， 
可 以 有 一 种 更 简单 的 方法 ， 那 就 是 从 层次 (Hierarchy) 面板 上 选中 这 
个 对 象 的 名 字 。 然 后 ， 按 下 键盘 上 的 “F” 键 ， 也 可 以 直接 在 层次 
(Hierarchy) 面板 上 直接 双击 来 完成 这 个 操作 ， 如 图 1.26 所 示 。 


图 1.26 一 个 选 定 的 对 象 


当选 中 了 一 个 游戏 对 象 之 后 ， 可 能 会 经 常 性 地 对 这 些 对 象 进行 旋 
转 操作 ， 以 便 能 从 所 有 ww 只 需要 单 击 纪 
标 ， 并 在 拖 动 的 同时 按 住 键盘 上 的 “Alt* 键 ， 就 可 以 完成 视角 的 转动 ， 
如 图 1.27 所 示 。 


图 1.27 ” 绕 着 一 个 选中 的 游戏 对 象 进行 旋转 


最 后 ， 在 场景 (Scene) 视图 中 使 用 第 一 人 称 视角 控制 是 十 分 实用 
的 ， 像 在 玩 一 款 第 一 人 称 视角 的 游戏 一 样 ， 这 将 有 助 于 你 以 一 种 身 临 
其 境 的 方式 来 体验 整个 现场 。 如 果 想 实现 这 个 功能 ， 可 以 在 按 下 电 标 
右键 的 同时 使 用 键盘 上 的 “WwW”A”“S”“D? 来 控制 前 进 、 后 退 或 者 左右 转 
动 。 使 用 鼠标 来 控制 头 的 方向 。 男 外 ， 还 可 以 在 运动 的 同时 按 
下 “Shift”" 键 来 提高 运动 的 速度 ， 如 图 1.28 所 示 。 
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图 1.28 使 用 第 一 人 称 视 角 控制 


这 里 之 所 以 选择 对 各 种 进行 变换 和 导航 控制 的 方法 进行 学 习 ， 玖 
在 于 掌握 了 这 些 知识 之 后 ， 你 就 可 以 以 任何 方式 来 定位 和 移动 目标 对 
象 ， 也 可 以 从 任何 的 位 置 和 角度 来 查看 整个 世界 。 如 采 想 快速 地 建立 
一 个 高 品质 的 游戏 关卡 ， 做 到 这 一 点 是 十 分 重要 的 。 所 有 的 这 些 以 及 
一 些 其 他 的 控制 方式 都 将 贯穿 于 这 本 书 的 场景 创建 和 Unity 开 发 之 中 。 


现在 已 经 成 功 地 实现 了 对 象 的 属性 变换 和 在 场景 视图 中 的 导航 。 
接 下 来 可 以 开始 完成 金币 采集 游戏 的 第 一 个 关卡 了 。 首 先 将 空间 中 的 
两 个 floor 网 格 对 象 分 开 ， 在 它们 之 间 留 一 个 大 的 裂 颖 ， 将 来 会 在 这 个 


裂缝 上 创建 一 个 桥梁 。 玩 家 将 可 以 通过 这 个 桥梁 往返 于 两 个 如 同 岛 屿 
一 样 的 floor 网 格 对 象 之 间 。 可 以 使 用 变换 (Translate) 工具 (W) 来 移 
动物 体 ， 如 图 1.29 所 示 。 
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图 1.29 将 两 个 floor 网 格 对 象 分 隔 成 独立 的 岛屿 


总 
如 果 创 建 更 多 的 foor 对 象 ， 可 以 使 用 之 前 用 过 的 方法 ， 从 项 目 
(Project) 面板 处 拖 动 一 个 网 格 资源 到 场景 视图 中 。 另 外 ， 也 可 以 将 在 场 


景 视 图 中 选中 的 对 象 进行 复制 ， 复 制 的 方法 是 在 选中 目标 对 象 之 后 ， 同 时 
按 下 键盘 上 的 “Ctrl+D"” 组 合 键 ， 这 两 种 方法 都 可 以 达到 目的 。 


接 下 来 ， 要 向 场景 中 添加 一 些 道具 (Props) 和 障碍 物 
(Obstacles) ， 首 先 向 floor 网 格 对 象 上 添加 一 些 房 屋 (House) 对 象 ， 
可 以 按照 “Assets | Standard Assets | Prototyping | Prefabs” 这 个 目录 找到 房 
屋 对 象 (HousePrototype16x16x24) ， 如 图 1.30 所 示 。 
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图 1.30 ”向 场景 中 添加 房屋 道具 


当 将 一 个 房屋 扼 动 到 场景 中 之 后 ， 这 个 房屋 可 能 会 与 地 面 的 底 首 
完美 的 对 齐 ， 但 是 也 有 可 能 不 会 ， 那 你 的 运气 还 真是 不 
彰 。 但 是 我 们 不 可 能 每 次 都 有 这 么 好 的 运气 ， 一 个 专业 的 游戏 开发 着 
应 该 依靠 目 身 的 技能 ， 而 不 是 运气 。 不 过 别 担心 ， 在 Unity 中 ， 可 以 轻 


松 地 使 用 顶点 捕 提 (Vertex Snapping) 来 将 任意 的 两 个 网 格 对 象 进 行 对 
齐 。 这 个 功能 的 工作 原理 是 使 两 个 游戏 中 的 对 象 通过 将 它们 的 顶点 定 
位 到 同一 个 位 置 来 实现 对 齐 操 作 。 


这 里 以 图 1.31 为 例 ， 在 这 张 图 中 房子 牌 牌 扭 扭 地 坐落 在 floor 对 象 之 
上 ， 我 们 很 自然 地 希望 将 它 和 floor 对 象 进行 水 平 对 齐 或 者 角 对 齐 。 要 
实现 这 个 效果 ， 我 们 首先 要 选择 房子 (House) 对 象 ， 这 一 点 可 以 通过 
单 击 或 者 在 层次 面板 中 选择 这 个 对 象 来 完成 ， 要 注意 进行 选中 操作 的 
应 该 是 要 移动 的 那个 对 象 ， 而 不 是 那个 用 来 对 齐 的 参照 物 (此 处 特 指 
floor 对 象 ) 。 
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图 1.31 使 用 顶点 捕捉 (Vertex Snapping) 来 对 没有 对 齐 的 物体 进行 调整 


接 下 来 ， 激 活 变 换 工具 (W) ， 并 且 按 下 键盘 上 的 “V” 键 ， 同 时 移 
动 光标 ， 观 察 选 中 网 格 中 最 近 顶 点 的 标识 (Gizmo) 光标 ， 如 图 1.32 所 
示 。Unity 会 要 求 选 择 一 个 进行 捕捉 操作 的 源 顶 点 。 
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图 1.32” 按 下 “V” 键 来 激活 顶点 捕捉 (Vertex Snapping ) 


按 下 键盘 上 的 “V” 键 ， 同 时 把 光标 移动 到 房屋 的 部 角 的 位 置 ， 然 后 
单 击 并 从 角 拖 动 到 floor 网 格 的 角 。 然 后 房屋 将 会 完成 与 floor 网 格 角 对 
角 的 顶点 捕 提 对 齐 ， 当 完成 了 这 种 对 齐 之 后 ， 释 放 “V” 键 ， 此 时 两 个 网 
格 的 顶点 已 经 对 章 了 ， 如 图 1.33 所 示 。 
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图 1.33 ”通过 顶点 对 齐 两 个 网 格 


现在 ， 可 以 使 用 原型 包 (Prototyping Package) 中 的 网 格 资源 来 搭 
建 一 个 完整 的 场景 了 。 通 过 向 场景 中 拖 放 一 些 道具 ， 并 使 用 变换 、 旋 
转 以 及 缩放 操作 ， 就 可 以 实现 对 这 些 游戏 对 象 的 定位 、 排 放 和 转动 。 
使 用 顶点 捕捉 ， 可 以 按 自 己 所 愿 将 所 有 游戏 对 象 进行 对 齐 。 多 练习 一 
些 这 种 操作 ， 使 用 这 些 工 具 和 资源 可 以 完成 图 1.34 所 示 的 场景 安排 。 


图 1.34 构建 一 个 完整 的 关卡 


现在 已 经 完成 关卡 中 基本 建筑 的 模型 导入 和 布局 摆 放 了 ， 只 使 用 
很 少 的 几 个 网 格 资源 和 一 些 基 本 工具 就 完成 了 这 些 操作 。 不 过 ， 这 些 
工具 的 功能 却 是 相当 强大 的 ， 将 这 些 工具 组 合 操作 ， 可 以 让 游戏 世界 
变 得 丰 宇 多 彩 ， 甚 至 以 假 乱 真 。 不 过 ， 这 里 还 遗 调 了 一 点 很 重要 的 事 
情 ， 那 就 是 光 。 仔 细 观 察 图 1.34， 这 里 所 有 的 物体 看 起 来 都 是 单调 的 ， 
没有 光亮 、 阴 影 。 这 是 因为 场景 中 并 没有 配置 合适 的 照明 系统 ， 虽 然 
在 游戏 创建 的 时 候 已 经 默认 自 带 了 一 个 光源 对 象 (Light) ， 但 是 这 个 
光源 对 象 (Light) 现在 并 没有 起 什么 作用 。 


现在 这 个 场景 中 还 没有 天 空 ， 接 下 来 就 为 这 个 金币 采集 游戏 添加 
上 一 个 天 空 (Sky) 效果 ， 单 击 场景 (Scene) 视图 顶部 工具 栏 的 下 拉 
荣 单 ， 然 后 从 下 拉 菜 单 中 选中 “skybox” 以 启用 天 空 效 果 。 这 里 的 天 空 盒 
(Skybox) 指 的 就 是 一 个 包围 了 整个 场景 的 大 型 立方 体 ， 这 个 立方 体 
的 每 个 内 部 的 侧面 都 有 一 个 贴图 (图 像 ，， 这 些 贴图 连续 在 一 起 ， 看 
起 来 束 如 同 现实 中 的 天 空 一 样 。 这 里 选用 了 “skybox”， 束 在 场景 
(Scene) 视图 中 显示 了 一 个 如 图 1.35 所 示 的 默认 的 天 空 。 
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图 1.35 ”启用 天 空 效 果 


里 然 天 空 效果 的 启用 使 得 整个 场景 看 起 来 好 多 了 ， 但 是 它 却 仍然 
缺乏 一 个 合适 的 照明 系统 。 场 景 中 的 游戏 对 象 缺乏 光亮 和 阴影 ， 为 了 
改善 这 一 点 ， 首 先 要 打开 场景 (Scene) 视图 上 方 〈 见 图 1.36) 的 照明 


图 标 开 关 ， 确 保 照 明 系 统 是 启用 的 。 注 意 ， 这 个 开关 只 是 决定 照明 系 
统 是 否 在 场景 (Scene) 视图 中 起 作用 ， 而 决定 不 了 在 最 后 的 游戏 中 照 
明 系 统 是 否 起 作用 。 
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图 1.36 在 场景 (Scene) 视图 中 启用 场景 照明 系统 


启用 了 照明 系统 之 后 ， 就 会 明显 地 看 到 场景 与 之 前 有 了 很 大 的 差 
异 ， 现 在 的 场景 看 起 来 真实 多 了 。 也 可 以 选择 层次 (Hierarchy) 面板 
上 的 “Directional Light” 来 进行 旋转 操作 ， 以 确定 场景 中 的 灯光 效果 。 众 
所 周知 ， 一 天 中 的 不 同时 间 里 ， 光 线 的 强度 和 角度 都 是 不 同 的 ， 现 在 
就 可 以 利用 这 种 操作 来 实现 不 同时 间 中 光线 的 变化 。 这 样 将 会 改变 场 
景 的 泻 染 方式 ， 如 图 1.37 所 示 。 


图 1.37 ”转动 场景 中 的 方向 光 (Directional Light) 模拟 一 天 中 时 间 的 变化 


如 果 要 撤销 之 前 对 方向 光 (Directional Light) 做 的 任何 操作 ， 可 
以 按 下 键盘 上 的 “Ctrl + Zz” 组合 键 。 为 了 做 好 最 终 及 最 佳 的 照明 效果 ， 
需要 把 场景 中 所 有 不 能 移动 的 游戏 对 象 (例如 墙壁 、 地 板 、 桌 子 、 椅 
子 、 天 花 板 、 草 、 山 、 塔 等 ) 都 标记 为 静态 的 。 对 于 Unity 来 说 ， 意 味 
着 标记 为 静态 的 游戏 对 象 在 整个 的 游戏 过 程 中 ， 无 论 发 生 什 么 ， 都 是 
永远 不 会 被 移动 的 。 通 过 将 游戏 对 象 标记 为 静态 ， 就 可 以 帮助 Unity 在 
对 游戏 泻 染 和 照明 处 理 时 进行 优化 。 现 在 只 需要 在 场景 中 选择 所 有 不 
能 移动 的 对 象 (这 包括 了 目前 为 止 游 戏 中 的 所 有 对 象 ) ， 然 后 在 对 象 
的 检查 (Inspector) 面板 中 选中 静态 (Static) 复 选 框 。 注 意 ， 无 需 分 
别 地 设置 静态 属性 。 在 为 多 个 对 象 设置 静态 属性 时 ， 只 需要 在 选择 这 
些 对 象 的 ， 同 时 按 下 Shift 键 就 能 选中 所 有 对 象 ， 然 后 就 可 以 一 次 性 地 


在 对 象 的 检查 (Inspector) 面板 中 为 这 些 对 象 设置 属性 ， 如 图 1.38 所 
不 o 


图 1.38 ”为 多 个 不 能 移动 的 对 象 设置 静态 选项 以 改善 照明 和 系统 性 能 


当 为 一 个 几何 图 形 的 游戏 对 象 义 选 了 静态 (Static) 复 选 框 之 后 ， 
Unity 将 会 目 动 为 场景 中 的 光线 效果 进行 计算 ， 这些 效果 包括 阴影 、 间 
接 照明 等 。 通 过 计算 得 到 了 一 些 被 称 为 “GI 缓存 ”的 数据 ， 这 些 数 据 中 
包含 了 光 的 传播 路 线 ， 向 Unity 指 示 了 光线 应 该 如 何在 场景 中 进行 传播 
和 反射 ， 才 能 更 真实 地 模拟 现实 世界 。 即 便 如 此 ， 之 前 勺 选 了 静态 复 
选 框 的 游戏 对 象 还 是 没有 阴影 ， 这 将 使 游戏 看 起 来 很 不 真实 。 产 生 这 
种 情况 的 原因 是 大 部 分 的 网 格 对 象 都 有 一 个 产生 阴影 (Cast Shadows) 
的 选项 ， 而 这 个 选项 默认 是 禁用 的 。 现 在 来 消除 这 个 缺陷 ， 首 先 选 中 
场景 中 的 所 有 网 格 对 象 ， 然 后 在 检查 (Inspector) 面板 上 单 击 “Mesh 
Renderer” 组 件 并 选中 “Cast Shadows” 复 选 框 ， 当 完成 这 个 操作 后 ， 所 有 
的 网 格 对 象 就 有 如 图 1.39 所 示 的 阴影 效果 了 。 
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图 1.39 ”从 “Mesh Renderer 组 件 上 启用 阴影 效果 


现在 的 网 格 对 象 都 已 经 产生 了 阴影 ， 下 面 束 此 开发 过 程 做 个 小 
结 。 到 目前 为 止 ， 已 经 创建 了 一 个 新 的 Unity 项 目 ， 使 用 网 格 对 象 填 充 
了 整个 游戏 场景 ， 而 且 使 用 方向 光 (Directional Light) 成 功 地 完成 了 
对 场景 的 上 照明。 如 果 使 用 第 一 人 称 视 角 模 式 在 这 个 游戏 环境 中 进行 一 
番 游 历 ， 那 将 会 是 非常 棱 的 体验 。 好 了 ， 我 们 来 看 看 接 下 来 的 操作 
吧 1! 


1.8 ”游戏 测试 与 游戏 选项 卡 


至 此 ， 已 经 使 用 Unity 自 带 原 型 包 (Prototyping Package) 完成 了 金 
币 采集 游戏 环境 的 构建 。 现 在 的 游戏 环境 包含 了 两 个 主要 的 岛屿 ， 岛 
屿 上 有 一 些 建筑 物 ， 两 个 独立 的 岛屿 通过 一 个 石 桥 连接 在 一 起 ， 如 图 
1.40 所 示 。 可 能 你 的 布局 与 图 1.40 看 起 来 有 一 些 不 同 ， 不 过 也 是 非常 不 
错 的 。 


图 1.40 ”目前 已 经 包含 了 两 个 岛屿 区 域 的 场景 


总 的 来 看 ， 场 景 还 是 完成 得 不 错 ， 现 在 需要 把 这 个 场景 保存 一 
下 。 可 以 选择 按 下 键盘 上 的 “Ctrl + S” 组 合 键 ， 或 者 也 可 以 如 图 1.41 所 
示 ， 从 应 用 程序 菜单 上 选择 “File | Save Scene” 选 项 。 如 果 是 第 一 次 对 场 
景 进行 保存 ，Unity 会 弹出 一 个 “Save” 对 话 框 ， 提 示 为 这 个 场景 起 一 个 
名 字 (这 里 本 书 将 这 个 场景 起 名 为 “level 01”) 。 
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图 1.41 对 场景 进行 保存 


完成 这 个 场景 的 保存 之 后 ， 它 就 成 为 了 当前 项 目的 场景 资源 ， 同 
时 也 如 图 1.42 一 样 出 现在 了 项 目 (Project) 面板 中 。 这 意味 着 当前 的 场 
景 已 经 不 再 像 以 前 是 一 个 临时 拼 竣 在 一 起 的 组 合 了 ， 而 是 一 个 真正 不 
可 分 割 的 整体 。 注 意 ， 对 一 个 场景 进行 保存 与 对 一 个 项 目 进行 保存 并 
不 一 样 ， 比 如 在 应 用 程序 菜单 上 就 分 别 有 “Save Scene” 和 “Save 
Project” 两 个 不 同 的 选项 。 记 住 ， 一 个 项 目 是 一 些 文件 和 文件 夹 的 集 
合 ， 它 包含 了 游戏 中 的 场景 和 资源 。 相 比 之 下 ， 一 个 场景 是 项 目 中 的 
一 个 资源 ， 外 观 就 像 是 一 个 完整 的 3D 地 图 。 这 个 场景 中 包含 了 很 多 网 
格 、 纹 理 和 声音 。 因 此 ， 保 存 一 个 项 目 是 指 将 包括 场景 在 其 中 的 各 种 
文件 和 资源 的 配置 进行 保存 。 而 对 场景 的 保存 ， 只 是 将 指定 场景 中 关 
卡 的 变化 进行 保存 。 


筷 Project 日 Console © Animation 
Create ™ 


v Favorites Assets » scenes 
(Oo All Materials 
[AI Models 


Oall Scripts 
[AI Prefabs 
va Assets 


篇 Editor 
a materlals 
5 prefab 


i scripts 
Pa Standard Assets 


Level 01.unity 


图 1.42 ”保存 的 scenes 被 作为 资源 添加 到 项 目 中 


从 图 1.42 可 以 看 出 ， 已 经 将 场景 保存 到 了 一 个 名 为 “scenes” 的 文件 夹 
中 。 可 以 在 项 目 (Project) 面板 上 的 任意 空白 区 域 单 击 鼠 标 右键 来 为 自己 
的 项 目 创建 一 个 文件 夹 。 另 外 ， 依 次 音 


击 应 用 程序 荣 单 上 的 “Assets | Create 
| Folder”"， 束 可 以 轻易 地 使 用 鼠标 拖 放 来 完成 对 文件 夹 中 的 资源 进行 移动 操 


现在 的 这 个 关卡 中 并 没有 任何 可 以 玩 的 东西 。 它 只 是 一 个 使 用 编 
辑 希 开发 出 来 的 基 止 电 、 了 无 生 趣 的 且 与 外 界 宫 无 交互 行为 的 三 维 环 
境 。 现 在 给 游戏 添加 可 玩 性 ， 人 允许 玩家 通过 控制 键盘 上 
的 “W”*A”S”D” 以 第 一 人 称 视 角 的 方式 在 这 个 游戏 世界 中 进行 环 游 和 
探索 。 为 了 实现 这 个 目标 ， 需 要 向 场景 中 添加 一 个 第 一 人 称 视 角 角 色 
控制 器 (First-person Character Controller) ， 它 是 Unity 中 自 带 的 资源 ， 


本 和 喘 已 经 包含 了 实现 第 一 人 称 视角 角色 控制 的 所 有 功能 。 依 次 打 


开 “Standard Assets | Characters | FirstPerson Character | Prefabs” 文 件 夹 ， 
然后 从 项 目 (Project) 面板 拖 动 “FPSController” 资 源 到 场景 中 ， 如 图 
1.43 所 示 。 
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图 1.43 ”向 场景 中 添加 第 一 人 称 视角 角色 控制 器 


当 添 加 了 第 一 人 称 视角 角色 控制 部 以 后 ， 束 可 以 单 击 Unity 工 具 栏 
上 的 “Play” 按 钮 以 第 一 人 称 视角 模式 来 进行 游戏 ， 如 图 1.44 所 示 。 
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图 1.44” 单 击 工具 栏 上 的 “Play” 按 钮 对 Unity 中 的 场景 进行 测试 


按 下 “Play” 按 钮 之 后 ，Unity 就 可 以 从 场景 (Scene) 选项 卡 切换 到 
游戏 (Game) 选项 卡 ， 正 如 所 看 到 的 ， 场 景 (Scene) 选项 卡 是 以 一 个 
开发 者 的 视角 来 观看 整个 场景 的 ， 此 时 可 以 对 场景 进行 编辑 、 制 作 和 
设计 。 相 比 之 下 ,游戏 (Game) 选项 卡 是 以 一 个 游戏 者 的 视角 来 查看 
整个 场景 的 ， 只 能 进行 游戏 和 测试 。 在 游戏 者 的 视角 中 ， 只 能 从 主 摄 
像 机 的 角度 来 查看 所 有 的 场景 。 当 激活 了 游戏 (Game) 选项 卡 ， 并 局 
动 “Play” 模 式 后 ， 可 以 使 用 游戏 默认 的 控制 方式 开始 这 个 游戏 的 测试 工 
作 。 第 一 人 称 视角 控制 器 使 用 键盘 上 的 “W”A”S”D”4 个 键 来 控制 运 
动 ， 使 用 鼠标 来 控制 视角 ， 如 图 1.45 所 示 。 


图 1.45 ”在 游戏 (Game) 选项 卡 中 完成 对 关卡 的 测试 


六 

即使 处 于 “Play 模式 中 ， 也 可 以 随时 切换 到 场景 《Scene) 选项 卡 中 ， 
甚至 可 以 对 场景 进行 编辑 和 修改 ， 对 场景 中 的 对 象 进行 移动 和 删除 。 但 是 
要 注意 的 是 ， 所 有 ， 在 “Play” 模 式 期 间 进行 的 改动 ， 在 Play” 模式 结束 之 后 
都 会 自动 复原 ， 也 就 是 这 些 改动 都 不 会 被 保留 。 这 是 一 种 特意 的 设计 ， 它 
允许 在 游戏 过 程 中 对 属性 进行 编辑 ， 从 而 可 以 观察 产生 的 影响 ， 并 对 问题 
进行 调试 ， 但 是 却 并 不 真正 地 对 场景 进行 改动 。 


现在 的 关卡 中 已 经 可 以 实现 以 第 一 人 称 视角 模式 行走 了 。 当 结束 
游戏 时 ， 可 以 再 一 次 单 击 “Play” 按 钮 ， 或 者 按 下 键盘 上 的 “Ctrl+P” 组 合 
键 ， 之 后 就 返回 到 场景 (Scene) 选项 卡 中 了 。 


到 现在 为 止 ， 你 应 该 已 经 注意 到 了 ， 当 在 关卡 中 以 第 一 人 称 视角 
控制 器 进行 游戏 的 时 候 ， 在 下 面 的 控制 台 (Console) 窗口 中 不 断 地 输 
出 一 些 信息 。 默 认 情 况 下 ， 这 个 窗口 位 于 Unity 编 辑 需 的 下 方 ， 束 在 项 
目 (Project) 面板 旁边 ， 也 可 以 通过 在 菜单 栏 上 依次 选 
中 “Window|Console” 人 为 地 打开 这 个 窗口 。 挥 制 台 (Console) 窗口 会 
将 所 有 遇 到 的 钳 误 或 者 警告 以 消息 的 形式 显示 出 来 。 销 误 都 会 以 红颜 
色 标 记 ， 和 警告 都 会 以 黄 颜 色 进 行 标记 ， 而 普通 的 信息 则 会 以 默认 的 灰 
色 显 示 。 有 时 ， 一 条 消息 只 会 显示 一 次 ， 而 有 时 却 会 显示 很 多 次 ， 如 
图 1.46 所 示 。 
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图 1.46 ”控制 台 (Console) 窗口 输出 信息 、 警 告 和 错误 


正如 之 前 提 到 过 的 ， 在 控制 台 (Console) 窗口 中 可 以 输出 3 种 不 同 


类 型 的 消息 : 信息 、 和 警告 和 错误 。 信 息 是 指 基于 当前 工作 的 项 目 给 

的 最 佳 建议 和 意见 。 和 警告 是 指 在 代码 或 者 场景 中 出 现 了 一 些 不 太 严 重 
的 问题 ， 如 果 不 改 正 ， 则 可 能 会 导致 游戏 中 出 现 意 想不到 的 行为 以 及 
不 佳 的 游戏 性 能 。 错 误 消 息 描 述 了 需要 立即 引起 注意 的 代码 和 场景 中 
的 错误 。 有 了 时， 这 些 错误 导致 游戏 根本 无 法 工作 ， 或 者 在 运行 的 时 候 
发 生 错误 ， 从 而 引起 游戏 毅 溃 或 者 失去 响应 。 此 时 控制 台 (Console) 


窗口 就 显得 十 分 有 用 了 ， 因 为 它 可 以 实现 对 游戏 进行 调试 。 图 1.46 中 就 


给 出 了 一 个 关于 “Audio Listener” 重 复 的 问题 。 


“Audio Listener" 是 一 个 连接 到 摄像 机 对 和 象 的 组 件 。 稚 认 情 况 下 ， 
每 一 个 摄像 机 都 有 一 个 “Audio Listener" 组 件 ， 它 像 是 一 个 耳 朱 ， 在 摄 


像 机 所 在 的 位 置 接收 场景 中 的 各 种 声音 。 但 是 ，Unity 中 并 不 文 持 在 同 
一 场景 中 使 用 多 个 处 于 激活 状态 的 “Audio Listener”。 这 也 就 意味 着 在 
同一 地 点 同一 时 间 只 能 听 到 一 个 声音 。 那 么 问题 就 产生 了 ， 因 为 现在 
的 场景 中 已 经 包含 了 两 个 摄像 机 ， 其 中 一 个 是 在 创建 场景 时 自动 产生 
的 ， 男 外 一 个 是 添加 的 第 一 人 称 视角 控制 妖 中 目 市 的 。 奉 想 确认 这 一 
点 ， 只 需要 在 层次 (Hierarchy) 面板 上 选中 第 一 人 称 视角 控制 器 对 
象 ， 之 后 单 击 它 名 字 劳 边 的 三 角形 图 标 ， 这 样 惑 会 在 这 个 物体 的 下 方 
显示 更 多 的 对 象 ， 这 些 对 象 都 是 第 一 人 称 视角 控制 器 的 组 成 部 分 ， 如 
图 1.47 所 示 。 
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图 1.47 ”找到 第 一 人 称 视角 控制 器 中 的 摄像 机 


选中 位 于 “FPSController” 下 方 展开 之 后 显示 
的 “FirstPersonCharacter" 对 象 ， 如 图 1.47 所 示 。“FirstPersonCharacter” 对 
象 是 “FPSController” 对 象 的 一 个 子 对 象 。 这 一 点 从 层次 (Hierarchy) 面 


板 上 的 *FPSController" 中 包含 了 “FirstPersonCharacter” 就 可 以 看 出 来 。 
子 对 象 会 继承 它们 上 一 级 对 象 的 变换 (Transformation) 属性 。 这 表示 
当 在 场景 中 对 某 些 对 象 进行 移动 或 者 旋转 操作 时 ， 所 做 的 变换 同样 会 
影响 到 它 的 所 有 子 对 象 。 在 检查 (Inspector) 面板 中 ， 可 以 看 到 这 个 对 
象 包 含 一 个 “Audio Listener” 组 件 ， 如 图 1.48 所 示 。 
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图 1.48 包含 了 “Audio Listener” 组 件 的 第 一 人 称 视角 控制 器 游戏 对 象 


也 可 以 选择 将 “Audio Listener” 组 件 从 FPSController 对 象 上 移 除 ， 但 
是 这 样 做 ， 游 戏 者 在 以 第 一 人 称 视 角 进 行 游戏 时 就 再 也 听 不 到 声音 


了 。 所 以 ， 选 择 将 场景 创建 之 初 自沉 的 摄像 机 删除 。 只 需要 在 层次 
(Hierarchy) 面板 上 选中 图 1.49 所 示 的 摄像 机 ， 然 后 按 下 键盘 上 

的 “Delete” 键 即 可 完成 删除 操作 。 这 样 就 可 以 消除 在 游戏 进行 时 产生 的 
天 于 “Audio Listener” 的 警告 。 现 在 可 以 开始 游戏 的 试 玩 了 ! 
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图 1.49 删除 摄像 机 对 象 


1.9 ”添加 一 个 水 平面 


到 目前 为 止 ， 游戏 已 经 取得 了 不 错 的 进展 ， 已 经 可 以 以 第 一 人 称 
视角 的 模式 在 整个 游戏 环境 中 行走 和 探索 了 。 不 过 ， 这 个 游戏 环境 还 


有 很 多 值得 改进 的 地 方 。 例 如 ，floor 网 格 现在 就 如 图 1.50 所 示 的 那样 孤 
零 雯 地 巧 浮 在 游戏 世界 的 空中 ， 没 有 任何 的 文 撑 。 更 离谱 的 


| 硅 Scene | € Game 7 三 


Shaded 中 |2D|| 洋 | 二 | 四 Gizmos * (oral 


图 1.50 整个 世界 地 面 基 浮 在 空中 ， 没 有 任何 的 文 撑 


是 ， 当 走出 了 地 面 边 毕 的 时 候 ， 束 会 掉 下 一 个 无 底 的 深渊 。 所 以 
现在 需要 在 地 面 下 面 添加 一 片 水 域 ， 这 样 场景 的 环境 就 更 加 完整 了 。 


为 了 同 这 个 游戏 中 添加 水 资源 ， 可 以 使 用 为 一 种 Unity 中 预 置 的 资 
源 。 在 项 目 (Project) 面板 中 依次 打开 “Standard Assets | Environment | 
Water | Water | Prefabs” 文 件 夹 ， 然 后 将 “WaterProDaytime” 资 源 从 项 目 
(Project) 面板 中 拖 动 到 场景 中 ， 如 图 1.51 所 示 ， 这 是 一 个 圆 形 的 对 
象 ， 但 是 实际 上 的 尺寸 比 所 需要 的 小 得 多 。 
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图 1.51 ”向 环境 中 添加 水 资源 


在 向 场景 中 添加 了 水 资源 预 设 体 (Prefab) 之 后 ， 将 其 放置 在 地 平 
面 的 下 面 ， 然 后 使 用 “Scale” 工 具 (R) 来 变 大 水 资源 预 设 体 (Prefab) 
的 平面 (X,Z) 大 小 ， 一 直 扩 大 到 般 远 的 地 平 线 为 止 。 这 样 就 使 得 地 面 
网 格 看 起 来 好 像 是 一 望 无 际 的 大 海 之 中 的 一 个 小 孤岛 ， 完 成 后 的 效果 
如 图 1.52 所 示 。 
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图 1.52 ”环境 中 水 资源 面积 的 调整 以 及 最 后 的 大 小 


现在 ， es (Game) 选项 卡 中 开始 另 一 个 测试 。 在 工具 栏 
上 按 下 “Play” 按 钮 ， 然 后 以 第 一 人 称 视角 模式 来 完成 角色 的 导航 。 如 图 
1.53 所 示 ， 可 以 看 到 关卡 中 的 水 面 ， 当 然 ， 在 水 面 上 是 无 法 行走 的 ， 同 
样 也 不 能 在 这 里 面 游 泳 和 潜水 。 如 采 真 的 走 到 了 水 面 上 ， 束 会 挥 进 
去 ， 好像 这 些 水 根本 就 不 存在 一 样 。 现 在 的 水 只 是 一 个 闭 饰 ， 仪 仅 起 
了 一 个 使 场景 看 起 来 更 真实 的 作用 。 


图 1.53 ”以 FPS 模 式 对 有 水 的 环境 进行 测试 


现在 场景 中 的 水 是 虚无 绿 缉 的 ， 看 得 见 却 摸 不 着 ， 但 玩家 可 以 轻 
易 地 从 这 些 水 中 罕 过 ， 就 好 像 它们 是 不 存在 的 一 样 。Unity 现 在 并 不 会 
将 这 些 水 当 作 固 态 或 者 半 固 态 的 物体 来 对 竺 。 通 过 给 物体 添加 上 一 个 
盒子 磁 接 体 (Box Collider ) 组 件 ， 就 可 以 使 其 具有 固体 的 性 质 ， 关 于 
碰撞 体 (Collider) 和 物理 属性 (Physics) 的 内 容 ， 将 会 在 第 3 章 中 进行 
更 详细 的 讲解 。 现 在 ， 简 单 快速 地 给 场景 中 的 水 对 象 添加 上 一 个 固体 
的 属性 ， 只 需要 在 层次 (Hierarchy) 面板 上 将 水 对 象 选 中 ， 然 后 再 在 
应 用 程序 菜单 上 依次 选中 “Component | Physics | Box Collider”"， 如 图 
1.54 所 示 。 向 一 个 选中 的 对 象 上 添加 一 个 组 件 会 改变 这 个 对 象 本 身 的 表 
现 。 即 便 如 此 ， 也 千 万 不 要 有 添加 越 多 组 件 ， 对 象 越 完美 的 错误 观 


尽 。 其 实 应 该 在 保证 功能 的 前 提 下 ， 为 一 个 对 象 添 加 尽量 少 的 附件 ， 
这 种 党 略 可 以 使 工作 流 变 得 简单 、 整 洁 ， 并 具有 更 好 的 性 能 优化 。 


File Edit Assets GameObject ee MobileInput Window Help 


pe 51 | Add.. Ctrl+ Shift+A | Cam 


法 Hierarchy | = Mesh ” a 
Create ~| (QrAll Effects » Gizmos ~ 
rpr 1 3 physics » Rigidbody 
P FPSController Physics 2D » Character Controller 
¥ Env yo 
StepsPrototype04x02x02 Navigation k Box Collider 
FloorPrototype64x01x64 Audio 上 


Directional Light Sphere Collider 


PlatformpPrototype02x01x03 Rendering Capsule Collider 
Platformprototype02x01x0: Layout » Mesh Collider 
PlatformpPrototype02x01x03 Miscellaneous » ' 
PlatformPrototype02x01x0. Wheel Collider 
Floorprototype64x01x64 (1 Event 4 
HousePrototypel6x16x24 Network 上 
HousePrototypel6x16x24 { yl > Cloth 


CubePrototype02x02x02 (1 
CubePrototype02x02x02 ( 
CubePrototype02x02x02 (8 
CubePrototype02x02x02 (7 
CubePrototype02x02x02 (€ 
CubePrototype02x02x02 (5 
CubePrototype02x02x02 (4 
CubePrototype02x02x02 (3 
CubePrototype02x02x02 (2 
CubePrototype02x02x02 (1 
CubePrototype02x02x02 

StepsPrototype04x02x02 {: 
StepsPrototype04x02x02 

JoinMidPrototype04x06x01 ™ 


Scripts » Hinge Joint 


Fixed Joint 
Spring Joint 


Character Joint 


Configurable Joint 


Constant Force 


图 1.54 ”向 水 资源 对 象 添 加 一 个 盒子 碰撞 体 (Box Collider) 


当 疝 水 资源 中 添加 了 一 个 盒子 页 撞 体 (Box Collider) 之 后 ， 就 会 
在 网 格 周围 出 现 一 个 绿色 的 党 状 网 格 。 这 个 绿色 的 党 状 网 格 大 概 表示 
了 水 资源 对 象 的 体积 和 形状 ， 也 就 是 说 Unity 认 为 这 个 区 域 就 是 一 个 固 
体 ， 如 图 1.55 所 示 。 


图 1.55 ”盒子 碰撞 体 (Box Collider) 的 近似 体积 


现在 当 控制 游戏 中 的 角色 走 到 水 面 上 去 时 ， 束 会 发 现 角色 会 在 水 
面 上 移动 ， 而 不 会 掉 下 去 。 当 然 ， 更 真实 的 效果 应 该 是 这 个 角色 能 在 
水 中 游泳 ， 虽 然 现 在 的 “水 上 漂 ” 有 点 假 ， 总 比 掉 下 去 要 好 多 了 “。 想 让 
角色 能 在 水 中 像 真 的 一 样 游泳 ， 需 要 更 多 的 工作 ， 这 里 暂 不 涉及 。 如 
果 需 要 将 盒子 磁 撞 体 的 功能 从 水 中 去 掉 ， 返 回 到 初始 的 虚无 状态 ， 则 
首先 选中 水 对 象 ， 然 后 单 击 它 的 “Box Collider” 组 件 右上 方 的 齿轮 图 
标 ， 然 后 选中 下 面 菜 单 中 的 “Remove Component” 选 项 ， 如 图 1.56 所 
示 。 
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图 1.56 移 除 一 个 组 件 


1.10 ”添加 一 个 用 来 采集 的 金币 


至 此 ， 该 游戏 已 经 有 了 很 多 功能 ， 例 如 一 个 完整 的 环境 、 一 个 第 
一 人 称 视角 控制 器 、 一 片 大 海 。 不 过 ， 本 章 设 计 的 是 一 个 金币 采集 游 
戏 ， 但 是 现在 这 个 游戏 场景 中 还 没有 任何 可 以 采集 的 金币 。 为 了 实现 
这 些 功能 ， 需 要 编写 一 些 C# 肢 本， 这些 脚本 要 到 下 一 章 才 会 看 到 。 然 
而 可 以 创建 一 些 金币 对 象 ， 如 将 一 个 圆柱 体 (Cylinder) 对 象 变形 成 一 
个 金币 。 下 面 完 来 创建 一 个 圆柱 体 对 象 ， 操 作 方 法 是 从 应 用 程序 表单 
处 依次 选择 “GameObject | 3D Object | Cylinder”， 如 图 1.57 所 示 。 
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图 1.57 创建 一 个 
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最 初 ， 这 个 圆柱 体 (Cylinder) 对 象 看 起 来 一 点 也 不 像 是 一 个 金 
币 。 不 过 它 的 外 形 是 很 容易 改变 的 ， 只 需要 按 着 Z 轴 将 圆柱 体 
Cylinder) 变 薄 即 可 。 切 换 到 “Scale” 工 具 (R) ， 然 后 向 内 减 小 圆柱 


体 (Cylinder) 的 长 度 ， 如 图 1.58 所 示 。 


图 1.58 ”将 圆柱 体 (Cylinder) 对 象 变 成 一 个 金币 形状 


在 改变 了 金币 的 大 小 和 形状 之 后 ， 它 目 训 的 碰撞 体 的 大 小 与 金币 
的 体积 就 完全 不 一 样 了 。 碰 撞 体 的 体积 要 比 金币 大 很 多 ， 如 图 1.58 所 
示 。 默 认 情 况 下 ， 圆 柱 体 《Cylinder) 自 带 的 是 一 个 胶 填 型 (Capsule) 
碰撞 体 ， 而 不 是 之 前 见 过 的 盒 状 碰撞 体 。 可 以 在 金币 被 选中 之 后 ， 从 
检查 (Inspector) 面板 处 来 改变 “Radius” 属 性 的 值 ， 这 将 改变 胶 早 碰撞 
体 (Capsule Collider) 的 大 小 ， 如 图 1.59 所 示 。 将 这 个 值 调 小 ， 使 得 胶 
时 磁 撞 体 的 大 小 与 金币 更 加 接近 。 或 者 ， 选 择 将 胶 时 磁 接 体 (Capsule 
Collider) 完全 删除 ， 然 后 再 添加 一 个 盒子 磁 撞 体 (Box Collider ) 来 代 
蔡 。 这 两 种 方法 都 是 可 行 的 ， 可 以 根据 实际 情况 进行 选择 。 在 下 一 划 
的 代码 中 将 会 使 用 到 碰撞 体 ， 它 将 用 来 检测 玩家 与 金币 之 间 的 接触 。 
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图 1.59 ”调整 金币 的 胶 宫 碰撞 体 (Capsule Collider) 尺寸 


至 此 ， 已 经 将 金币 的 形状 和 结构 设计 好 了 。 接 下 来 的 一 章 还 要 对 
金币 很 多 方面 进行 改进 。 例 如 ， 需 要 给 金币 添加 一 个 有 金属 光泽 的 外 
观 ， 还 要 使 这 个 金币 可 以 被 采集 。 本 章 仅仅 使 用 了 Unity 自 带 的 基本 工 
具 ， 就 产生 了 一 个 形状 看 起 来 很 像 金 币 的 对 象 。 


1.11 小 结 


现在 已 经 为 金币 采集 游戏 的 开发 打下 了 展 好 的 基础 ， 关 于 这 个 游 
戏 的 功能 部 分 将 会 在 下 一 章 中 完成 和 实现 。 现 在 ， 读 者 已 经 掌握 了 如 
何 从 零 开始 创建 一 个 Unity 项 目 ， 并 使 用 网 格 、 贴 图 和 场景 来 充实 这 个 
项 目 。 另 外 ， 读 者 也 已 经 了 解 了 如 何 为 游戏 创建 一 个 场景 ， 以 及 如 何 
使 用 各 种 资源 来 完善 游戏 的 功能 。 这 些 资源 包括 水 、 第 一 人 称 视角 控 


制 器 和 原型 资源 库 等 。 在 下 一 章 中 ， 将 为 金币 添加 可 采集 的 特性 ， 并 
为 游戏 添加 一 系列 的 逻辑 ， 使 得 游戏 有 和 输 或 者 万 的 结局 。 


第 2 章 ”金币 采集 游戏 I) 


这 一 半 将 会 在 第 1 革 建 立 好 的 游戏 基础 上 继续 进行 。 在 这 个 金币 采 
集 游 戏 中 ， 玩 家 可 以 第 一 人 称 视角 模式 在 整个 游戏 环境 中 进行 漫游 ， 
在 游戏 规定 时 间 到 达 之 前 ， 寻 找 并 采集 到 所 有 的 金币 。 如 琳 在 游戏 规 
定时 间 结 束 前 ， 玩 家 束 已 经 完成 了 所 有 金币 的 采集 工作 ， 则 视 为 游戏 
胜利 。 反 之 ， 如 果 到 游戏 规定 时 间 结 束 时 ， 玩 家 并 没有 完成 所 有 人 金币 
的 采集 工作 ， 则 视 为 游戏 失败 。 到 目前 为 止 ， 已 经 在 这 个 项 目 中 添加 
了 一 个 完整 的 环境 ， 环 境 中 包括 地 面 、 道 具 、 水 、 一 个 第 一 人 称 视角 
的 控制 硼 ， 及 一 个 看 起 来 已 经 具有 金币 形状 但 还 不 能 被 采集 的 金币 对 
象 。 


本 章 继续 完善 这 个 游戏 ， 最 后 将 实现 金币 可 以 被 玩家 采集 ， 系 统 
中 还 有 一 个 可 以 检测 游戏 进行 时 间 的 计时 器 。 从 本 质 上 来 说 ， 这 一 章 
中 的 主要 工作 是 为 游戏 添加 逻辑 和 规则 。 为 了 实现 这 一 目标 ， 需 要 使 
用 C# 编 写 一 些 代码 ， 所 以 本 章 的 学 习 需 要 对 编程 有 一 些 基础 。 这 本 书 
主要 是 Unity 的 功能 介绍 以 及 如 何 使 用 Unity 游 戏 开发 引擎 ， 但 是 程序 的 
编写 并 不 在 本 书 的 施 围 内 ， 因 此 ， 假 设 本 书 的 读 首 已 经 有 了 编写 代码 
的 能 力 。 总 体 而 言 ， 本 章 将 涉及 的 主题 如 下 : 


。 材质 (Material) 的 制作 
。 预 设 体 (Prefab) 

。 使 用 C# 进 行 游戏 编程 
。 脚本 文件 的 编写 


。 使 用 粒子 (Particle) 系统 
。 游戏 的 构建 和 编译 


2.1 创建 一 个 金币 的 材质 


在 上 一 章 结束 时 ， 通 过 将 一 个 初始 的 圆柱 形 《Cylinder) 对 象 进 行 
不 均匀 的 缩放 ， 从 而 产生 了 一 个 基本 的 金币 对 象 。 依 次 单 击 应 用 程序 
荣 单 上 的 “GameObject | 3D Object | Cylinder 可 以 创建 该 对 象 ， 结 果 如 
图 2.1 所 示 。 从 概念 上 来 说 ， 金 币 对 象 是 游戏 逻辑 中 的 一 个 基本 单位 ， 
玩家 在 游戏 时 间 耗 尽 之 前 要 尽力 地 去 采集 这 些 金币 。 这 意味 着 这 些 金 
币 并 不 能 仅仅 是 被 看 到 束 行 了 ， 其 主要 目的 是 实现 游戏 的 功能 ， 玩 家 
是 否 收集 到 了 人 金币 将 意味 不 同 的 游戏 结果 。 因 此 ， 现 在 的 金币 对 象 还 
缺少 两 个 重要 的 方面 。 首 先 ， 这 个 金币 看 起 来 很 阴暗， 而 且 颜 色 还 是 
灰色 的 ， 它 完全 无 法 吸引 玩家 的 注意 力 。 再 者 ， 这 个 金币 对 象 无 法 被 
玩家 采集 。 不 过 ， 玩 家 可 以 穿 过 金币 ， 束 好 像 什 么 都 没有 发 生 一 样 。 
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图 2.1 到 目前 为 止 的 金币 对 象 


[9 


本 章 和 下 一 章 中 讲 到 的 金币 采集 游戏 的 完整 项 目 程序 可 以 在 本 书 配 套 
文件 的 Chapter02/Collection Game 文 件 夹 中 找到 。 


这 一 节 将 集中 讲述 如 何 使 用 材质 (Material) 改善 金币 的 外 观 。 一 
个 材质 其 实 就 是 一 个 算法 (或 者 说 指令 集 ) ， 它 指定 了 金币 的 外 观 所 
至 现 的 样式 。 一 个 材质 并 不 仅仅 指 物体 在 颜色 方面 看 起 来 怎样 ， 它 同 
样 定 义 了 物体 表面 是 光 靖 的 还 是 粗糙 的 ， 光 照射 到 物体 上 之 后 是 发 生 
镜 反射 还 是 漫 反 射 。 这 一 点 必须 要 摘 清 楚 才 能 明白 为 什么 贴图 和 材质 


古 两 种 不 同 的 东西 。 贴 图 是 指 一 个 加 载 到 计算 机 存储 右 中 的 图 像 文 
件 ， 可 以 通过 它 的 UV 贴图 将 一 个 三 维 物体 覆盖 上 。 相 反 的 ， 材 质 定义 


了 一 个 或 者 多 个 贴图 古 如 何 


士 全 
结合 


在 一 起 ， 并 应 用 到 了 一 个 对 象 外 观 的 


塑造 上 的 。 如 果 需 要 在 项 目 中 创建 一 个 新 的 材质 资源 ， 就 可 以 在 项 目 
(Project) 面板 的 空白 位 置 单 击 鼠 标 右键 ， 然 后 在 弹出 的 上 下 文 荣 单 
中 ， 选 择 “Create | Material”， 如 图 2.2 所 示 。 或 者 在 应 用 程序 荣 单 处 依次 


选中 *Assets | Create | Material”。 
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图 2.2 ”创建 一 个 材质 


国 | 加 a 
| Gizmos | (GAT 


scenes 


Standard Asse... 


scripts 


有 时 一 个 材质 也 可 以 被 称 作 <*Shader”。 如 果 需 要 ， 就 可 以 使 用 着 色 器 语 
言 (Shader Language) 来 创建 一 个 自 定义 的 材质 。 当 然 也 可 以 使 用 Unity 中 
自 带 的 一 些 插件 ， 例 如 “Shader Forge” 等 


当成 功 地 创建 了 一 个 新 的 材质 之 后 0 六 材质 起 一 
个 名 字 。 此 处 将 这 个 材质 命名 为 “mat_GoldCoin”。 这 个 名 字 的 前 半 部 分 
为 “mat”， 这 样 能 让 大 家 一 ere 质 资 源 。 现 在 只 需要 
在 文本 编辑 区 域 输入 新 的 名 字 ， 即 可 完成 对 这 个 材质 的 重 命名 。 以 后 
也 可 随时 在 这 个 材质 上 双击 鼠标 ， 来 完成 对 名 字 的 修改 ， 如 图 2.3 所 
示 。 
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图 2.3 ”为 一 个 材质 重 命名 


接 下 来 ， 如 果 还 没有 选中 这 个 材质 资源 ， 那 么 就 在 项 目 (Project) 
面板 上 选中 它 ， 这 时 其 所 有 属性 都 会 在 对 象 检 查 (Inspector) 面板 处 显 
示 出 来 。 这 里 的 属性 数量 很 多 。 注 意 ， 可 以 在 这 个 对 象 的 Inspector 面 板 
底部 看 到 这 个 材质 基于 当前 设 定 的 预览 图 ， 当 在 检查 (Inspector) 面板 
处 修改 了 材质 设 定 ， 下 面 的 预 金 图 也 会 及 时 地 根据 调整 进行 更 狐 ， 如 
图 2.4 所 示 。 
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图 2.4” 从 对 象 检 查 (Inspector) 面板 处 对 材质 的 属性 进行 修改 


下 面 为 金币 创造 一 个 金光 内 内 的 材质 。 首 先 需 要 指定 着 色 器 
(Shader) 的 类 型 ， 这 是 因为 这 个 类 型 决定 了 其 他 可 用 的 参数 。 着 色 器 
(Shader) 的 类 型 决定 了 系统 将 采用 哪 种 算法 来 计算 对 象 的 阴影 。 有 很 
多 种 类 型 供 选 择 ， 但 是 最 经 常 使 用 的 类 型 就 是 “Standard” 或 者 “Standard 
(Specular setup) ”。 对 于 游戏 中 使 用 的 金币 ， 可 以 将 着 色 器 
(Shader) 的 类 型 设 定 为 “Standard”， 如 图 2.5 所 示 。 
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图 2.5 ” 设 定 材质 的 着 色 器 (Shader) 类 型 


此 时 ， 在 预 吕 (Preview) 面板 中 显示 的 是 阴暗 的 灰色 ， 这 与 所 需 
要 的 相差 太 多 了 “。 现 在 需要 的 是 一 个 金色 ， 首 移 指定 反射 (Albedo) 
的 属性 。 单 击 反 射 《Albedo) 右 侧 的 色 板 ， 然 后 会 弹出 一 个 颜色 选择 
器 ， 在 其 中 选 出 所 需要 的 金色 。 这 时 ， 反 射 (Albedo) 右 侧 的 色 板 也 
会 实时 根据 材质 的 变化 更 新 ， 如 图 2.6 所 示 。 
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图 2.6 ”将 反射 (Albedo) 的 值 指 定金 色 


现在 ， 金 币 的 材质 比 以 前 好 多 了 ， 但 是 需要 的 游戏 对 象 是 金币 ， 
也 束 是 说 ， 它 们 看 起 来 应 该 是 金光 内 内 的 。 为 了 将 这 个 效果 添加 到 材 
质 库 中 ， 可 单 击 并 滑动 对 象 检 查 (Inspector) 面板 处 “Metallic”* 属 性 右 


侧 的 请 动 条 ， 将 值 设 定 为 1。 这 个 值 设 为 1 表明 会 将 材质 设 定 为 一 个 金 
属 表 面 ， 而 不 是 一 个 像 布 或 者 头发 之 类 的 漫 反 射 面 。 同 样 ， 此 时 的 预 
览 会 如 同 图 2.7 所 示 的 一 样 ， 及 时 地 根据 设 定 的 更 改进 行 更 新 。 
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图 2.7 创建 一 个 金属 材质 


现在 已 经 创建 好 了 一 个 新 的 金属 材质 ， 可 以 在 预览 窗口 中 看 到 它 
还 真 的 效果 了 “。 如 果 需 要 ， 还 可 以 在 预览 窗口 中 更 改 材质 预 托 时 的 形 
状 。 移 认 的 情况 下 ， 材 质 是 以 一 个 球形 展示 出 来 的 ， 不 过 也 可 以 以 其 
他 的 基本 形状 来 预览 ， 例 如 正方 体 、 圆 柱 体 、 圆 环 等 。 这 样 有 助 于 在 
不 同 的 条 件 下 对 材质 进行 预 哎 。 可 以 通过 单 击 预 抠 面板 上 方 的 “几何 图 
形 ” 按 钮 来 更 改 对 象 的 形状 ( 见 图 2.8) 。 
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图 2.8 对 一 个 对 象 上 的 材质 进行 预览 


当 为 金币 准备 好 了 材质 之 后 ， 就 可 以 通过 拖 动 的 方式 将 这 个 材质 
直接 应 用 到 场景 中 的 网 格 上 。 先 将 做 好 的 金币 材质 应 用 到 金币 上 ， 从 
项 目 (Project) 面板 选中 刚 做 好 的 材质 ， 然 后 拖 动 到 场景 中 的 金币 对 象 
上 。 当 将 材质 拖 动 到 金币 上 释放 鼠标 时 ， 人 金币 就 呈现 出 金属 效果 了 。 
这 个 过 程 如 图 2.9 所 示 。 
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图 2.9 ”为 金币 设置 材质 


我 们 已 经 成 功 地 为 金币 添加 材质 了 ， 也 可 以 通过 在 场景 选中 金币 
对 和 象 来 查看 它 所 使 用 的 材质 了 。 同 样 ， 也 可 以 从 检查 (Inspector) 面板 
窗口 来 查看 “Mesh Renderer” 组 件 。 当 使 用 摄像 机 时 ，“Mesh 
Renderer” 组 件 可 以 保证 一 个 网 格 对 象 是 可 见 的 。 组 件 “Mesh 
Renderer” 包 含 一 个 材质 (Materials) 区 域 ， 该 区 域 中 列 出 了 分 配给 这 
对 象 的 全 部 材质 。 在 材质 (Materials) 区 域 选中 材质 的 名 字 之 后 ， 
Unity 就 会 自动 地 从 项 目 (Project) 面板 上 选中 材质 ， 这 样 就 可 以 快速 
简单 地 对 材质 进行 定位 ， 如 图 2.10 所 示 ， 组 件 “Mesh Renderer 列 出 了 分 
配给 一 个 对 象 的 所 有 材质 。 
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图 2.10 组件 *Mesh Renderer” 列 出 了 分 配给 一 个 对 象 的 所 有 材质 


一 个 网 格 对 象 有 时 会 拥有 多 个 材质 ， 对 象 的 每 一 个 面 都 分 配 不 同 的 材 
质 。 不 过 为 了 获得 最 佳 的 游戏 性 能 ， 最 好 在 满足 需求 的 基础 上 使 用 尽 可 能 
少 的 材质 。 如 果 可 能 ， 尽 量 让 多 个 游戏 对 象 都 使 用 同一 个 材质 ， 这 样 做 可 
以 很 明显 地 提高 游戏 的 性 能 。 如 果 想 要 获得 关于 游戏 泻 染 性 能 优化 方面 的 
更 多 内 容 ， 可 访问 http:/docs. Unity3d.com/Manual/OptimizingGraphics 
Performance. html 的 在 线 文档 。 


已 经 完成 可 以 用 来 收集 的 金币 的 材质 了 ， 它 看 起 来 很 漂亮 ， 不 
过 ， 并 没有 彻底 地 完成 金币 部 分 。 当 玩家 接触 到 金币 时 ， 它 并 不 会 消 
失 ， 而 且 也 没有 机 制 来 记录 玩家 a 到底 采集 到 了 多 少 金 币 。 接 下 来 束 需 
要 开始 编写 程序 了 。 


2.2 Unity 中 的 C# 脚 本 


为 游戏 定义 逻辑 、 规 则 和 行为 的 时 候 ， 往 往 需要 使 用 到 脚本 。 如 
果 想 将 那些 静态 的 、 无 生命 的 场景 和 对 象 转换 成 为 可 以 进行 交互 的 环 
境 和 对 象 ， 那 么 开发 人 员 就 需要 编写 代码 。 这 些 代码 定义 了 这 些 物 体 
在 遇 到 了 指定 情况 之 后 ， 应 该 做 出 什么 样 的 反应 。 人 金币 采集 游戏 也 需 
要 编写 代码 才能 实现 所 有 的 功能 。 这 个 游戏 需要 实现 3 个 主要 的 ” 功 


台 书 
Be: 


。 能 够 感知 玩家 是 否 收 集 到 金币 ; 
。 在 游戏 进行 中 ， 能 够 及 时 了 解 到 玩家 收集 的 金币 数量 ; 


。 能 确定 游戏 时 间 是 否 已 经 结束 。 


在 Unity 中 并 没有 包含 一 个 能 实现 上 述 功 能 的 模块 。 所 以 必须 自己 
来 编写 一 些 代 码 来 实现 这 些 功能 。Unity 中 文 持 两 种 语言 ， 即 
UnityScript 语 言 《有 时 候 称 之 为 JavaScript 语 言 ) 和 C# 语 言 。 这 两 种 语 
言 功 能 都 很 强大 ， 但 是 本 书 中 主要 采用 的 是 C# 语 言 。 这 是 因为 从 发 展 
的 趋势 来 看 ，JavaScript 的 使 用 率 将 会 逐渐 下 降 。 现 在 开始 对 这 个 主要 
功能 进行 编程 。 首 先 在 项 目 (Project) 面板 的 空白 区 域 单 击 鼠 标 右键 ， 
然后 在 弹出 的 上 下 文 菜单 中 依次 选择 “Create | C# Script”， 就 可 以 创建 
一 个 新 的 脚本 文件 。 另 外 ， 也 可 以 从 应 用 程序 菜单 处 依次 选择 “Assets | 
Create | C# Script* 来 创建 一 个 新 的 脚本 文件 ， 如 图 2.11 所 示 。 
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图 2.11 创建 一 个 新 的 C# 脚 本 


当 创建 了 脚本 之 后 ， 需 要 为 脚本 起 一 个 描述 性 的 名 字 。 本 书 起 的 
名 字 为 “Coin.cs”。 在 Unity 中 ， 每 一 个 脚本 文件 都 对 应 一 个 与 其 同名 的 
类 。 因 此 , “Coin.cs” 文 件 对 应 的 束 是 “Coin” 类 。 这 个 “Coin” 类 将 封 儿 一 
个 金币 的 所 有 行为 ， 并 最 终 会 附加 a 到 场景 中 的 金币 上 ， 如 图 2.12 所 示 。 
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图 2.12 为 脚本 文件 命名 


在 对 象 检查 (Inspector) 面板 中 双击 Coin.cs， 就 可 以 使 用 
MonoDevelop 打 开 这 个 文件 。MonoDevelop 是 一 款 Unity 目 融 的 第 三 方 
IDE 应 用 ， 它 可 以 实现 对 游戏 中 的 代码 进行 编写 和 修改 。 当 一 个 文件 在 
MonoDevelop 中 打开 之 后 ， 它 的 内 容 就 会 如 代码 示例 2.1 所 示 的 在 
MonoDevelop 中 显示 出 来 。 


代码 示例 2.1: 
using UnityEngine; 
using System.Collections; 
public class Coin : MonoBehaviour 


// Use this for initialization 


void Start () 全 


// Update is called once per frame 
void Update () 全 


\ 名 
> rb 


可 以 使 用 自己 的 账号 从 http://www.packtpub.com .处 下 载 本 书 的 代码 示 
例 。 无 论 你 在 哪里 购买 的 本 书 ， 都 可 以 访问 http://www.packtpub.com/support 
并 进行 注册 ， 书 中 的 资源 也 可 以 通过 电子 邮件 的 形式 发 送 给 你 。 


可 以 按照 如 下 步 又 来 下 载 这 些 文件 : 


. 使 用 电子 邮箱 地 址 在 页 本 
接 登 录 即 可 ; 


上 上 注册， 如果 已 经 注册 过 了 ， 那 么 直 


I 


找到 并 使 用 忌 标 


击 位 于 页 面 顶 端的 “SUPPORT”; 


。 单 击 “Code Downloads & Errata”; 


在 搜索 search 框 中 输入 要 下 载 资源 的 书 的 名 字 ; 
。 选择 要 下 载 资源 的 书 ; 


在 下 拉 菜 单 中 选中 购买 本 书 的 地 点 ; 


池 


忆 


击 “Code Download”。 


将 这 些 文件 下 载 了 之 后 ， 要 确定 解压 缩 软件 已 经 更 新 到 了 最 新 的 版 
本 : 


WinRAR / 7-Zip for Windows; 
Zipeg / iZip / UnRarX for Mac; 
7-Zip / PeaZip for Linux 。 
默认 情况 下 ， 所 有 新 创建 的 类 都 派生 自 “MonoBehavior” 类 ， 这 个 
类 中 定义 了 一 些 对 所 有 组 件 都 通用 的 函数 。“Coin” 类 具有 两 个 自动 生成 
的 函数 ， 也 了 束 是 Start0 和 Update0。 这 些 函 数 都 是 由 Unity 目 动 调 用 的 事 


件 。 当 游戏 对 象 《关联 了 这 个 游戏 脚本 ) 在 场景 中 创建 时 ， 就 会 调用 
Start() 函 数 。UpdateO 画 数 会 在 每 一 帧 被 附加 了 游戏 脚本 的 对 象 中 调用 
一 次 。Start0) 函 数 主 要 用 来 实现 代码 的 初始 化 ，Update() 画 数 主 要 用 来 
实现 那些 随 着 事件 推移 的 行为 ， 例 如 运动 和 变化 。 现 在 ， 将 新 创建 的 
脚本 文件 与 场景 中 的 金币 对 象 进行 管理 ， 可 以 从 项 目 (Project) 面板 处 
将 “Coin.cs” 文 件 拖 蝶 到 金币 对 象 上 。 当 完成 以 后 ， 一 个 新 的 金币 组 件 
就 被 添加 到 了 游戏 对 象 上 。 这 意味 着 这 个 脚本 已 经 关联 到 了 游戏 对 象 
上 ， 如 图 2.13 所 示 ， 一 个 关联 了 脚本 的 游戏 对 象 。 
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图 2.13 一 个 关联 了 脚本 的 游戏 对 象 


当 一 个 脚本 与 一 个 游戏 对 象 关联 到 一 起 之 后 ， 这 个 脚本 束 作 为 这 
个 游戏 对 象 的 一 个 组 件 而 存在 。 一 个 脚本 文件 可 以 添加 到 多 个 游戏 对 
象 上 ， 甚 至 可 以 被 多 次 添加 a 到 同一 个 游戏 对 象 上 。 每 个 组 件 都 代表 着 


一 个 单独 而 且 不 同 的 类 的 实例 化 。 当 一 个 脚本 以 这 种 方式 添加 进来 之 
后 ，Unity 会 目 动 地 调用 它 的 函数 ， 例 如 Start0 和 Update(0)。 可 以 在 
StartO 函 数 中 加 入 一 个 Debug.Log 语 句 来 确认 脚本 是 人 否 能 正名 工作 ， 这 
个 语句 在 场景 中 的 游戏 对 象 被 创建 时 在 命令 行 窗口 输出 一 个 调试 信 
忆 。 查 看 如 下 所 示 的 代码 示例 2.2。 


代码 示例 2.2: 


using UnityEngine 
using System,Collections ; 


public class Coin : MonoBehaviour 


// start( ) 是 初始 化 函数 
void Start () { 
Debug.Log ("Object Created"); 


// Update 在 每 一 帧 调用 一 次 
void Update () { 


} 


如 采 按 下 工具 栏 上 的 “Play” 键 ， 或 者 按 下 键盘 上 的 “Ctrl + P” 组 合 
键 ， 来 运行 这 个 向 游戏 对 象 上 添加 了 前 面 的 那个 脚本 的 游戏 ， 就 会 在 
控制 台 窗 口中 看 到 一 条 内 容 为 “Object Created” 的 信息 ， 每 当 这 个 类 进 
行 实例 化 的 时 候 ， 都 会 输出 一 次 〈 见 图 2.14) 。 
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图 2.14 ”在 控制 台 窗 口 处 输出 消息 


现在 已 经 为 Coin 类 创建 了 最 基本 的 脚本 ， 并 且 已 经 将 这 个 脚本 成 
功 附 加 到 了 金币 对 象 上 。 接 下 来 ， 继 续 编 写 一 些 函 数 ， 这 些 函 数 将 会 
记 采 采集 过 的 金币 信息 。 


2.3 ”对 金币 进行 计数 


如 果 整 个 场景 里 只 有 一 个 金币 ， 那 么 这 个 金币 采集 游戏 就 有 些 名 
不 符 实 了 。 本 游戏 的 核心 设计 思路 就 是 在 一 个 关卡 中 应 该 包含 很 多 个 
金币 ， 玩 家 应 该 在 系统 计时 结束 前 收集 完 这 些 金币 。 现 在 ， 如 果 想 要 
知道 玩家 是 否 将 所 有 的 金币 都 收集 齐 了 ， 首 移 得 先知 道 这 个 场景 中 总 
共有 多 少 个 金币 。 毕 竟 如 果 不 知 道 金 币 的 总 量 ， 也 就 无 法 知道 是 否 已 
经 将 所 有 的 金币 收集 全 了 。 所 以 ， 第 一 个 任务 束 古 通过 Coin 类 来 轻松 
地 知道 任意 时 刻 金币 的 总 数 。 下 面 给 出 实现 这 一 功能 的 Coin 类 ， 具 体 
的 如 代码 示例 2.3 所 示 。 


代码 示例 2.3: 


using UnityEngine 
using System,.Collections 
// 


public class Coin : MonoBehaviour 


// 追 踪 scene 


public static int CoinCount = 0; 


// start( ) 是 市 


void Start () 


// 创 建 游戏 对 象 ， 增 加 金 
++COin.CoinCount; 


// 当 游戏 对 象 被 销毁 时 调用 OnDestroy 函 数 
void OnDestroy() 


{ 


// 减 少 金 币 数 量 
--Coin.CoinCount; 


// 检 查 剩余 金币 数量 
if(Coin.CoinCount 


// 玩 家 获得 胜 


下 面 束 代码 示例 2.3 进 行 以 下 几 扣 总 结 。 


Coin 类 中 有 一 个 静态 的 成 员 变 量 一 一 CoinCount。 这 个 变量 是 静态 
的 ， 可 以 被 这 个 类 的 所 有 实例 所 共享 。 该 变量 中 记录 了 场景 中 金 
币 的 总 数 ， 类 中 的 每 个 实例 都 可 以 访问 该 变量 。 

每 当场 景 中 的 一 个 金币 游戏 对 象 被 创建 时 ， 就 会 目 动 调 用 Start0 画 
数 。 在 场景 启动 时 调用 Start 夯 数 束 可 以 设 定 游戏 初始 的 金币 。 每 


当初 始 化 一 个 实例 ， 这 个 函数 就 会 将 其 中 的 变量 CoinCount 的 值 加 
1， 从 而 完成 对 所 有 金币 的 计数 。 
。 每 当 一 个 游戏 对 象 被 销 毁 时 ， 束 会 目 动 调 用 OnDestroy0O 函 数 。 
当 一 个 金币 被 销毁 之 后 ， 这 个 函数 融会 将 其 中 的 变量 CoinCount 的 
值 减 1， 从 而 将 金币 总 量 减少 1 个 。 


代码 示例 2.3 中 包含 了 一 个 变量 CoinCount， 利 用 这 个 变量 可 以 知道 
金币 的 总 量 。 查 询 这 个 值 就 可 以 轻松 地 获得 当前 金币 的 总 量 。 现 在 已 
经 完成 整个 金币 采集 功能 工作 的 第 一 步 了 。 


2.4 金币 采集 


前 面 已 经 设计 了 一 个 金币 计数 变量 ， 通 过 这 个 变量 束 可 以 随时 地 
获知 当前 场景 中 金币 的 数量 。 不 过 ， 现 在 游戏 仍然 没有 实现 金币 采集 
功能 。 下 面 束 来 完善 这 个 功能 。 当 玩家 接触 到 金币 后 ， 也 束 是 说 ， 当 
玩家 穿 过 金币 或 者 碰撞 到 金币 的 时 候 ， 就 可 以 看 作 这 个 金币 被 成 功 采 
集 了 。 


如 果 想 要 确定 玩家 是 否 与 金币 发 生 接 触 ， 就 需 估算 出 玩家 和 人 金币 
的 体积 ， 这 样 才能 检测 出 两 个 物体 在 空间 中 是 否 出 现 重合 。 这 是 Unity 
通过 碰撞 体 (Collider) 来 实现 的 。 磁 接 体 (Collider) 是 一 种 附加 在 网 
格 上 的 特殊 物理 对 象 ， 当 两 个 游戏 对 象 在 空间 上 有 重 释 时 ， 碰 撞 体 就 
会 检测 到 。FPSController 对 象 (第 一 人 称 视角 控制 器 ) 上 已 经 自 带 了 磁 
撞 体 对 象 ， 它 使 得 控制 絮 更 像 是 一 个 人 的 喘 体 。 在 场景 中 选中 
FPSController 对 象 (第 一 人 称 视角 控制 器 ， 然 后 就 可 以 看 到 围绕 在 主 


摄像 头 周 围 的 绿色 线 框 ， 它 是 胶 宫 形状 的 。 如 图 2.15 所 示 , “Character 
Controller* 具 有 一 个 和 玩家 身体 形状 相仿 的 人 页 挤 体 。 
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图 2.15“Character Controller” 具 有 一 个 和 玩家 身体 形状 相仿 的 碰撞 体 


FPSController 中 包含 了 一 个 “Character Controller* 组 件 ， 这 个 组 件 
包含 “Radius”Height” 和 “Center” 等 选项 ， 规 定 了 场景 中 角色 的 物理 属 
性 。 如 图 2.16 所 示 ，FPSController 中 已 经 包含 一 个 “Character 
Controller*"， 在 此 游戏 中 ， 这 些 选 项 的 值 都 不 需要 修改 ， 保 留 默认 值 即 
可 o 
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图 2.16 ”FPSController 中 的 “Character Controller” 


金币 游戏 对 象 中 只 包含 了 一 个 胶 宫 碰撞 体 〈Capsule Collider) 组 
件 ， 这 是 当初 在 创建 圆柱 体 对 象 时 系统 自动 添加 上 的 ， 它 与 场景 中 的 
金币 的 大 小 差不多 ， 在 它 的 “Character Controller” 组 件 中 没有 添加 任何 
的 属性 和 动作 ， 这 是 很 正常 的 ， 因 为 与 FPSController 这 种 会 动 的 运动 物 
体 不 同 ， 金 币 是 一 个 不 会 动 的 静态 物体 。 如 图 2.17 所 示 ， 包 含 了 胶皮 碰 
撞 体 《Capsule Collider) 组 件 的 圆柱 体 对 象 (Cylinder) 。 
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图 2.17 ”包含 了 胶 赛 碰撞 体 (Capsule Collider) 组 件 的 圆柱 体 对 象 


对 于 现在 这 个 游戏 ， 仍 然 为 金币 游戏 对 象 选择 使 用 胶 赛 伴 擅 体 
(Capsule Collider) 组 件 ， 如 果 和 希望 改 用 一 个 不 同 的 碰撞 体 ， 比 如 一 个 
盒子 或 者 球形 ， 来 代替 这 个 默认 组 件 ， 就 需要 首 移 将 金币 上 任何 已 有 
的 碰撞 体 组 件 移 除 。 具 体操 作为 ， 单 击 位 于 游戏 检查 (Inspector) 面板 
中 组 件 右 上 角 的 苍 轮 图 标 ， 然 后 从 上 下 文 沫 单 中 选中 “Remove 
Component”， 如 图 2.18 所 示 。 
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图 2.18 ”从 一 个 游戏 对 象 上 将 指定 组 件 移 除 


接 下 来 ， 选 中 一 个 游戏 对 象 ， 然 后 通过 应 用 程序 荣 单 依次 选 
中 “Component | Physics”， 然 后 在 弹出 的 沫 单 中 选中 一 个 合适 形状 ， 如 
图 2.19 所 示 。 


图 2.19 ”为 选中 的 游戏 对 象 添加 一 个 组 件 


不 论 使 用 哪 种 类 型 的 碰撞 器 ， 这 里 都 还 有 一 点 小 问题 。 那 就 是 当 
在 进行 游戏 的 时 候 ， 如 有 果 想 要 穿 过 金币 ， 就 会 发 现 无 法 成 功 ， 反 而 会 
被 金币 挡 在 那里 。 这 是 因为 现在 的 金币 是 一 个 固态 的 物理 对 象 ， 所 以 
FPSController 对 象 是 无 法 罕 金 币 而 过 的 。 但 是 本 游戏 可 不 是 这 么 设计 
的 ， 金 币 不 应 该 是 一 个 游戏 中 的 “拦路 石 >， 而 是 一 种 可 以 被 采集 的 对 


象 ， 这 就 是 说 当 玩 家 从 金币 中 穿 过 时 ， 就 可 以 采集 到 人 金币， 同时 金币 
也 会 在 场景 中 消失 。 操 作 方 法 为 :选中 金币 对 象 ， 然 后 在 它 的 游戏 对 
象 检 查 (Inspector) 面板 中 的 胶 宫 碰撞 体 (Capsule Collider) 组 件 中 选 
中 “Is Trigger” 复 选 框 。 这 个 “Is Trigger" 选 项 适用 于 所 有 的 碰撞 体 类 型 ， 
主要 用 来 检测 与 其 他 磁 撞 体 是 否 发 生 磁 撞 ， 并 且 在 发 生 磁 撞 时 允许 它 
们 通过 ， 如 图 2.20 所 示 。 


图 2.20 ”选中 “Is Trigger" 复 选 框 允许 对 象 容 过 其 他 的 碰撞 体 


此 时 ， 在 玩 游戏 时 ，FPSController 就 可 以 轻松 地 罕 过 场景 中 的 所 有 
金币 。 然 而 ， 玩 家 接触 到 金币 之 后 ， 金 币 并 不 会 消失 ， 同 样 也 不 会 被 
玩家 采集 到 。 要 完善 这 些 功能 ， 需 要 向 “Coin.cs” 文 件 中 添加 更 多 的 代 
码 。 首 先 添加 一 个 OnTriggerEnter() 函 数 ， 当 游戏 对 象 ， 例 如 游戏 玩 
家 ， 进 入 了 一 个 碰撞 体 时 ， 就 会 目 动 地 调用 。 现 在 ， 添 加 一 名 
Debug.Log 语 句 ， 当 玩家 进入 到 一 个 伴 撞 体 时 ， 残 会 输出 一 条 调试 消 
上 ， 这 只 是 为 了 进行 测试 ， 代 码 示 例 2.4 如 下 所 示 。 


代码 示例 2.4: 


using UnityEngine; 

using System.Collections; 
//------ 
public class Coin : MonoBehaviour 


// start () 是 初始 化 函数 
void Start () { 
// 创 建 游戏 对 象 ， 增 加 金币 的 数量 


++COin.CoinCount; 


void OnTriggerEnter (Collider Col) 


Debug.Log ("Entered Collider"); 


// 当 游戏 对 象 被 销毁 时 调用 OnDestroy 画 数 
void OnDestroy() 


// 诚 少 金 币 的 数量 


--Coin.CoinCount; 


// 检 查 剩余 的 金币 
if(Coin.CoinCount <= 0) 


// 玩 家 胜利 


关于 OnTriggerEnter() 了 汞 数 的 更 多 详细 信息 ， 可 以 访问 Unity 的 在 线 文 
档 ， 访 问 地 址 为 http://docs.Unity 3d.com/ 
ScriptReference/MonoBehaviour.OnTriggerEnter.html 


首先 单 击 工具 栏 上 的 “Play” 按 键 来 测试 样 例 2.4 中 的 代码 。 当 穿 过 
一 个 金币 时 ， 丈 会 触发 这 个 函数 并 展示 一 个 信息 。 不 过 ， 这 里 还 是 存 
在 一 个 问题 ， 到 发 是 什么 触发 了 这 个 函数 呢 ? 很 明显 一 定 有 什么 东西 
罕 过 了 人 金币， 但 是 到 奔 是 什么 昵 ?是 玩家 ， 敌 人 又 或 者 是 一 个 掉 落 的 
砖头 ， 还 是 其 他 的 什么 东西 ? 为 了 区 分 开 这 些 内 容 ， 需 要 使 
用 “Tag”。“Tag” 可 以 为 场景 中 的 指定 物体 打上 特殊 的 标记 或 者 标签 ， 这 
样 束 可 以 在 代码 中 轻松 将 玩家 和 其 他 对 象 区 分 开 。 要 知道 在 本 游戏 设 


计 中 ， 只 有 玩家 才 可 以 收集 。 所 以 ， 需 要 为 玩家 对 象 添 加 一 个 名 
为 "Player 的 “Tag”。 要 做 到 这 一 点 ， 需 要 首先 在 场景 中 选中 这 个 对 象 ， 
然后 在 对 象 检 查 (Inspector) 面板 中 选中 Tag 下 拉 列 表 框 ， 在 Tag 的 下 拉 
列表 中 选中 “Player”。 这 样 就 将 FPSController 标 记 为 Player 对 象 ， 如 图 
2.21 所 示 。 


图 2.21 ”为 FPSController 添 加 一 个 "Player 标签 


FPSController 已 经 被 标记 为 了 Player。 授 下 来 就 按照 代码 示例 2.5 所 
示 重 新 定义 Coin.cs 类 。 现 在 这 个 类 已 经 可 以 完成 金币 的 采集 工作 ， 当 
玩家 接触 到 金币 后 ， 人 金币 束 会 消失 ， 同 时 将 金币 的 数量 减 1。 


代码 示例 2.5: 


using UnityEngine; 

using System.Collections; 

//----- 
public class Coin : MonoBehaviour 


{ 


// start() 是 初始 化 函数 
void Start () { 
// 创 建 游戏 对 象 ， 增加 金币 的 数量 


++COin.CoinCount; 


Ee 


void OnTriggerEnter(Collider Col) 
{ 
// 如 果 玩 家 采集 到 了 金币 ， 束 销毁 这 个 对 象 
if(Col.CompareTag("Player")) 
Destroy(gameObject ) ; 


ja 游戏 对 象 被 销毁 时 调用 0nDestroy 男 数 


void OnDestroy() 


// 减 少 金 币 的 数量 


--Coin.CoinCount; 


// 检 查 剩余 的 金币 
if(Coin.CoinCount <= 0) 


// 玩 家 胜利 


下 面 对 代码 示例 2.5 进 行 如 下 总 结 。 


。 每 当 FPSController 接 触 到 了 人 金币 人 磁 撞 体 的 时 候 ，Unity 束 会 目 动 地 
调用 一 次 OnTriggerEnter() 范 数 。 

。 当 调 用 OnTriggerEnter() 琅 数 时 ， 参 数 Col 中 存储 在 这 次 接触 中 进入 

磁 撞 体 的 物体 信 筷 。 

函数 CompareIag0 的 作用 是 用 来 判断 到 拭 与 这 个 碰撞 体 发 生 伴 撞 的 

是 不 是 Player。 

使 用 Destroy 函 数 来 销毁 一 个 金币 对 象 。 当 这 个 函数 被 调用 时 ， 还 

会 触发 OnDestroy0) 函 数 ， 这 个 事件 会 使 得 金币 总 数 减 1。 


至 此 ， 已 经 创建 好 了 第 一 个 可 以 工作 的 金币 了 。 现 在 游戏 中 的 玩 
家 整 可 以 走 近 并 采集 这 个 金币 ， 然 后 这 个 金币 束 会 密 从 场景 中 移 除 。 
不 过 ， 这 个 场景 中 不 应 该 只 包含 一 个 金币 ， 而 是 很 多 个 金币 。 可 以 通 
过 对 这 个 已 经 做 好 的 金币 进行 复制 来 解决 这 个 问题 ， 当 然 要 将 复制 好 
的 金币 放置 到 其 他 不 同 的 地 方 。 其 实 还 有 更 好 的 解决 办 法 ， 接 下 来 将 


进行 介绍 。 


2.5 ”金币 与 预 设 体 


现在 已 经 摘 定 了 金币 的 基本 功能 ， 但 是 整个 场景 中 还 需要 更 多 的 
金币 。 上 一 节 提 出 了 一 个 价 香 的 解决 方案 ,但 是 问题 是 如 末 这 么 做 
了 ， 当 需要 对 金币 的 属性 进行 改变 时 ， 那 么 将 不 得 不 逐个 对 所 有 人 金币 
进行 修改 。 为 了 避免 这 种 烷 琐 的 重复 性 工作 ， 可 以 使 用 Unity 中 的 预 设 
体 (Prefabs) 。 预 设 体 功能 可 以 将 一 个 场景 中 的 对 象 转换 为 一 个 项 目 
(Project) 面板 上 的 资源 。 预 设 体 通 常 是 场景 实例 化 中 最 经 常 需 要 的 资 
源 。 这 样 做 的 优势 吏 在 于 ， 当 对 资源 进行 更 改 的 时 候 ， 可 以 将 修改 目 
动 地 应 用 在 一 个 场景 甚至 多 个 场景 中 所 有 的 实例 上 。 


这 样 将 会 使 得 在 使 用 目 定 义 的 资源 进行 工作 时 变 得 更 简单 ， 所 以 
现在 先 来 将 金币 设置 为 预 设 体 。 甫 先 选中 场景 中 的 金币 对 象 ， 然 后 将 
它 拖 鼻 到 项 目 (Project) 面板 中 。 当 完成 了 这 个 步 又 之 后 ， 一 个 新 的 预 
设 体 束 做 好 了 。 场 景 中 的 对 象 束 会 升级 成 为 一 个 预 设 体 的 实例 。 但 是 
这 也 意味 着 ,一旦 这 个 资源 从 项 目 (Project) 面板 上 删除 ， 所 有 该 资源 
对 应 的 实例 也 束 会 变 得 无 效 ， 如 图 2.22 所 示 。 


图 2.22 ”创建 一 个 金币 的 预 设 体 


现在 预 设 体 已 经 成 功 创建 了 ， 可 以 从 项 目 (Project) 面板 中 向 场景 
中 拖 忠 预 设 体 来 创建 更 多 的 金币 实例 了 。 每 一 个 金币 的 实例 都 和 初始 
的 预 设 体 资 源 相 关联 ， 当 对 预 设 体 资 源 做 出 改动 时 ， 这 些 改 变 会 立刻 
在 所 有 的 实例 上 生效 。 按 照 这 个 思路 ， 同 游戏 中 添加 足够 的 金币 对 
象 。 图 2.23 所 示 为 设计 的 金币 分 布 。 


图 2.23 ”向 关卡 中 添加 金币 的 预 设 体 


这 里 又 产生 了 一 个 新 的 问题 ， 即 如 何 才 能 将 一 个 预 设 体 的 实例 变 
回 一 个 独立 的 游戏 对 象 ， 而 不 再 关联 到 预 设 体 资源 。 这 是 非常 有 用 
的 ， 例 如 有 些 时 候 ， 可 能 需要 利用 预 设 体 来 实例 出 一 些 对 象 ， 但 是 又 
不 希望 这 些 对 象 和 预 设 体 关 联 在 一 起 。 这 一 点 也 很 容易 实现 ， 首 先 在 
场景 中 选中 一 个 预 设 体 的 实例 ， 然 后 在 应 用 程序 菜单 中 选 
中 “GameObject | Break Prefab Instance”， 如 图 2.24 所 示 。 


图 2.24 “Break Prefab Instance” 功 能 


当 向 场景 中 添加 了 一 个 预 设 体 的 实例 并 对 其 进行 了 改动 之 后 ， 如 果 想 
将 这 个 改动 应 用 到 预 设 体 资源 中 ， 就 可 以 选中 对 象 ， 然 后 在 应 用 程序 荣 单 
中 选中 “Game Object | Apply Changes to Prefab”。 


2.6 定时 絮 和 倒计时 


现在 已 经 拥有 一 个 具备 场景 和 金币 的 关卡 了 。 和 凭借 新 添加 进来 的 
Coin.cs 脚 本 ， 现 在 的 金币 也 可 以 被 正 营 计数 和 采集 了 “。 不 过 对 于 玩家 
来 说 ， 现 在 的 关卡 中 仍然 没有 挑战 性 ， 因 为 他 们 既 顾 不 了 ， 也 输 不 
了 “。 在 这 个 游戏 中 ， 玩 家 没有 需要 达成 的 目标 。 因 此 时 间 限 制 也 就 成 


为 了 游戏 中 的 一 个 重要 条 件 : 它 定义 了 玩家 胜利 和 失败 的 天 键 。 也 就 
是 说 ， 在 游戏 时 间 结 束 前 ， 玩 家 采集 到 了 所 有 的 金币 ， ee 
家 胜利 ， 玩 家 没有 采集 到 所 有 的 金币 ， 则 玩家 失败 。 所 以 需要 为 这 
关卡 创建 一 个 倒计时 的 计数 器 。 首 先 选 择 菜 sai 
Create Empty” 创 建 一 个 新 的 空 游戏 对 象 ， 并 为 其 起 名 为 “Level Timer”， 
如 图 2.25 所 示 。 
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图 2.25 ”为 计时 (Timer) 对 象 重 命名 


记 住 ， 游 戏 开始 时 ， 玩 家 是 看 不 到 任何 空 游戏 对 象 的 ， 因 为 这 些 对 象 
身上 没有 任何 的 网 格 演 染 组 件 。 但 是 这 些 对 象 在 用 来 创建 一 些 不 直接 对 应 


到 物理 的 和 可 见 实体 上 的 功能 和 行为 时 ， 束 显得 特别 有 用 了 ， 例 如 定时 
器 、 管 理 器 和 游戏 逻辑 控制 器 之 类 。 


接 下 来 ， 创 建 一 个 名 为 “Timer.cs” 的 新 脚本 文件 ， 人 然后 将 这 个 脚本 

添加 到 场景 中 的 LevelTimer 对 象 上 。 完 成 这 个 操作 以 后 ， 在 这 个 场景 
中 ， 定 时 句 就 开始 起 作用 了 。 不 过 需要 确定 的 是 ， 这 个 定时 脚本 仪 仅 
被 添加 到 了 场景 中 的 一 个 物体 上 ， 而 不 是 多 个 物体 上 。 否 则 ， 在 同一 
场景 中 可 能 束 会 出 现 多 个 相互 矛盾 的 定时 器 。 可 以 使 用 层次 

(Hierarchy) 面板 来 查找 整个 场景 中 特定 类 型 的 组 件 。 首 先 在 层次 

(Hierarchy) 查找 框 中 输入 “t:Timer”， 然 后 按 下 键盘 上 的 回 车 键 开 始 查 
找 。 这 样 将 会 查找 到 场景 中 所 有 高 有 定时 屁 类 型 组 件 的 对 象 ， 并 将 在 
层次 (Hierarchy) 面板 中 显示 查找 的 结果 。 男 外 ， 在 这 个 层次 

(Hierarchy) 面板 中 只 会 显示 匹配 的 结果 。 在 查找 时 输入 的 “表示 这 
次 查找 的 条 件 是 类 型 ， 如 图 2.26 所 示 。 


图 2.26 ”查找 具有 特定 类 型 组 件 的 对 象 


如 采 在 查找 过 程 中 集 止 这 次 查找 ， 并 返回 层次 (Hierarchy) 面板 
的 初始 状态 ， 则 可 以 通过 单 击 查 找 对 话 框 右 侧 的 “x” 号 图 标 按钮 来 实 
现 。 不 过 这 个 按钮 很 难 发 现 ， 如 图 2.27 所 示 。 


图 2.27 取消 查找 


如 果 希 望 Timer 脚 本 生效 ， 那 么 必须 在 里 面 编写 相 应 的 代码 。 下 面 
的 代码 示例 2.6 给 出 了 Timer.cs 中 的 完整 代码 。 如 来 读 着 之 前 从 末 在 
Unity 中 进行 过 系统 的 编码 ， 那 么 这 上 段 代码 将 会 古 非 肖 有 学 习 价 值 的 。 
这 段 代 码 给 出 了 很 多 十 分 重要 的 特点 ， 代 码 中 的 注释 给 出 了 详细 的 说 
明 。 


代码 示例 2.6: 


using UnityEngine 
using System,Collections ; 


public class Timer : MonoBehaviour 


{ 


// 完 成 关卡 的 时 间 (单位 为 秒 
public float MaxTime = 60f; 


[SerializeField] 

private float CountDown = 0; 
//------- 
// start( ) 是 初始 化 函数 

void Start () 

{ 


CountDown = MaxTime; 


// 每 一 帧 都 会 调用 update 
void Update () 
{ 


// 时 间 减 少 
CountDown -= Time.deltaTime; 


// 当 时 间 耗 尽 之 后 重启 关卡 t 


if(CountDown <= 0) 


// 重 置 金币 的 数量 
Coin.CoinCount=0; 
Application.LoadLevel (Application.1loadedLevel); 


现在 对 上 面 的 代码 进行 如 下 总 结 。 


在 Unity 中 ， 将 类 变量 声明 为 公共 变量 (例如 public float 

MaxTime) 之 后 ， 会 作为 一 个 可 以 编辑 的 字段 显示 在 Object 
Inspector 处 。 虽 然 这 并 不 文 持 所 有 的 数据 类 型 ， 但 是 却 是 相当 有 用 
的 一 个 功能 。 这 意味 着 开发 人 员 可 以 直接 从 Inspector 处 监视 公共 变 
量 的 值 ， 或 者 设置 公共 变量 的 值 ， 而 不 是 每 次 都 要 对 代码 进行 修 
改 和 编译 。 默 认 情 况 下 ， 在 Inspector 处 私有 变量 是 看 不 到 的 。 不 
过 ， 如 果 需 要 ， 可 以 使 用 SerializeField 属 性 强制 使 它们 可 见 。 如 果 
私有 变量 前 面 加 上 了 这 个 属性 ， 例 如 CountDown 变 量 ， 就 会 在 不 
改变 变量 的 作用 范围 前 提 下 ， 像 一 个 公共 变量 一 样 显示 在 对 象 
Inspector 中 。 

所 有 由 MonoBehaviour 派 生出 来 的 类 都 文 持 Update0O) 函 数 ，Scene 中 
所 有 Active 的 游戏 对 象 在 每 一 帧 中 都 会 目 动 调用 这 个 函数 。 人 入 而 言 
之 ，Update0 函 数 会 在 每 秒 执行 很 多 次 。 游 戏 的 FPS 是 一 个 每 秒 钟 
执行 次 数 的 指标 。 而 实际 这 个 数字 可 能 在 每 秒 钟 都 会 发 生变 化 ， 
Update 函 数 在 随 着 时 间 的 变化 去 改变 对 象 时 相当 有 用 。 例 如 在 使 
用 CountDown 类 时 ， 妃 踩 时 间 的 变化 是 相当 有 用 的 。 如 果 想 了 解 
更 多 的 关于 Update 男 数 功 能 ， 可 以 访问 
http://docs.Unity3d.com/ScriptReference/ MonoBehaviour. 
Update.html 这 个 网 址 上 的 Unity 在 线 文 档 。 


除了 在 每 一 帧 都 会 被 调用 的 Update0 画 数 ，Unity 中 还 支持 两 个 相关 的 
函数 ， 即 FixedUpdate0 和 LateUpdate0。FixedUpdateO 主 要 用 来 实现 物理 编 
码 ， 稍 后 将 看 到 ， 这 个 函数 在 每 一 帧 都 会 被 调用 相同 的 次 数 。LateUpdate0) 
函数 会 被 每 个 活动 (Active) 的 对 象 在 每 一 帧 调用 一 次 ， 但 是 LateUpdate() 
函数 的 调用 总 是 发 生 在 Update0 事 件 之 后 。 因 此 ， 它 总 是 发 生 在 UpdateO 膨 
期 之 后 ， 使 它 成 为 一 个 后 期 Update。 在 本 书 的 后 面 将 介绍 这 个 后 期 UpdateO 
存在 的 特殊 用 途 。 如 果 想 了 解 更 多 的 关于 FixedUpdate0 函 数 功能 ， 可 以 访 
http://docs.Unity3d. com/ScriptReference/MonoBehaviour.Fixed Update.html. 
在 线 文档 。 同 样 ， 如 果 想 了 解 更 多 的 关于 LateUpdate 函 数 功能 ， 可 以 访问 
http://docs.Unity3d.com/ScriptReference/ MonoBehaviour.LateUpdate.html. 在 线 
文档 。 


当 进 行 编程 时 ，Time.deltaTime 是 一 个 被 Unity 不 断 更 新 的 静态 变 
量 。 它 用 来 描述 自从 上 一 帧 结束 之 后 到 现在 的 时 间 量 (以 秒 为 单 
位 ) 。 例 如 游戏 的 帧 速率 是 2FPS (这 是 一 个 非常 低 的 值 )， 
deltaTime 的 值 束 定 0.5。 这 和 是 因 为 在 每 一 秒 钟 将 会 有 两 帧 ， 因 此 每 
一 帕 束 是 半 秒 。deltaTime 是 非 第 有 用 的 ， 因 为 随 着 时间 的 推移 ， 
这 个 值 会 体现 出 目 从 游戏 开始 到 现在 经 过 了 多 少时 间 。deltaTime 
作为 一 个 浮 点 型 变量 ， 主 要 用 在 Update 芳 数 中 ， 用 来 从 总 时 间 中 
减 去 已 经 经 过 的 时 间 。 如 采 想 了 解 更 多 关于 deltaTime 的 信息 ， 可 
以 访问 http://docs.Unity3d.com/ScriptReference/Time-delta Time.html 
上 的 在 线 文档 。 

静态 函数 Application.LoadLevel 可 以 在 代码 的 任何 地 方 被 调用 ， 用 
来 改变 在 运行 时 的 场景 。 这 个 函数 在 将 游戏 从 一 个 关卡 切换 到 男 
一 个 关卡 时 是 相当 有 效 的 ， 它 将 会 使 Unity 终 止 当前 活动 的 场景 ， 
销毁 其 中 的 所 有 内 容 ， 然 后 加 载 一 个 新 的 场景 。 另 外 ， 这 个 函数 
也 可 以 通过 再 次 加 载 当前 活动 的 关卡 来 重新 局 动 这 个 场景 。 
Application.LoadLevel 十 分 适合 于 那些 明确 定义 了 关卡 的 游戏 ， 这 


些 游 戏 的 开始 与 结局 都 有 明确 的 分 界线 。 不 过 它 并 不 适合 于 那 种 
大 型 的 开放 性 的 游戏 ， 这 种 游戏 的 世界 看 起 来 都 是 无 限 伸 展 的 ， 
看 起 来 没有 任何 的 断裂 。 关 于 Application.LoadLevel 的 更 多 信息 可 
以 在 
http://docs.Unity3d.com/ScriptReference/Application.LoadLevel.html 
上 的 Unity 在 线 文档 中 找到 。 


完成 Timer 脚 本 的 创建 工作 之 后 ， 在 场景 中 选中 LevelTimer 对 象 。 
从 对 象 的 检查 (Inspector) 面板 中 就 可 以 看 到 玩家 在 当前 关卡 完成 任务 
所 允许 的 最 大 时 间 限 制 (以 秒 为 单位 ， 如 图 2.28 所 示 。 这 里 将 时 间 设 
置 为 60 秒 。 这 意味 着 玩家 需要 在 天 卡 开 始 之 后 的 60 秒 之 内 完成 所 有 金 
币 的 采集 工作 。 如 采 定 时 絮 中 的 时 间 耗 尽 ， 那 么 这 个 天 卡 将 会 重启 。 


图 2.28 设 定 当前 关卡 的 时 间 限 制 


现在 有 了 一 个 具备 倒计时 功能 的 完整 和 关卡， 可 以 完成 金币 的 采 
集 ， 而 且 定 时 大 也 可 以 耗 尽 时 间 。 总 的 来 疯 ， 现 在 的 游戏 已 经 初 具 规 
模 了 ， 不 过 这 里 还 有 一 个 更 深入 的 问题 ， 后 面 内 容 将 进行 讲解 。 


2.7 ”庆典 和 焰火 


至 此 ， 人 金币 采集 游戏 几乎 要 完成 了 。 人 金币 可 以 被 采集 了 ， 计 时 紫 
也 开始 工作 了 ， 但 是 胜利 的 条 件 却 没有 得 到 受 善 的 处 理 。 当 玩家 在 计 
时 器 中 的 时 间 耗 尽 之 前 采集 到 所 有 的 金币 ， 游 戏 中 并 没有 任何 胜利 的 
提示 。 相 反倒 计时 仍然 会 继续 ， 束 好 像 胜 利 的 条 件 完全 没有 达到 一 


样 。 下 面 来 解决 这 个 问题 ， 首 和 完 ， 当 游戏 痢 在 游戏 中 获得 胜利 之 后 ， 
应 该 删除 计时 器 对 象 ， 以 防止 倒计时 继续 进行 ， 并 给 出 一 些 视觉 上 的 
效果 来 提示 玩家 该 天 卡 已 经 完成 。 在 这 种 情况 下 ， 可 以 添加 一 些 焰 火 

(Fireworks) 。 从 Unity 5 的 例子 系统 包 (Particle System Packages) 即 
可 添加 焰火 ， 控 作 方 法 为 : 依次 选中 “Standard Assets | ParticleSystems | 
Prefabs folder"， 然 后 将 焰火 粒子 系统 (Fireworks Particle System) 拖 忠 
到 场景 中 ， 可 以 继续 添加 2 到 3 个 焰火 粒子 系统 ， 如 图 2.29 所 示 。 


图 2.29 ”添加 两 个 焰火 预 设 体 


默认 情况 下 ， 所 有 的 焰火 粒子 系统 都 会 在 关卡 一 开始 时 执行 。 可 
以 通过 在 工具 栏 上 单 击 “Play” 按 钮 来 测试 这 个 游戏 。 不 过 这 并 不 是 所 项 
望 的 效 采 ， 我 们 所 设计 的 效果 应 该 是 当 游 戏 者 达成 胜利 条 件 以 后 ， 才 
执行 这 个 焰火 的 特效 。 在 场景 中 选中 焰火 粒子 系统 对 象 ， 然 后 在 对 象 
的 Inspector 面板 上 取消 组 件 “Particle System” 上 单 选 框 “Play On 
Awake” 的 选中 状态 ， 取 消 “Play On Awake” 的 功能 ， 如 图 2.30 所 示 。 


图 2.30 ”取消 “Play On Awake” 功 能 


取消 “Play On Awake” 之 后 ， 粒 子 系统 束 不 会 在 关卡 开 始 的 时 候 目 
动 执 行 了 。 这 是 正确 的 ， 但 古 这 些 粒子 系统 在 整个 游戏 中 都 不 会 执行 
了 ， 应 该 在 合适 的 时 候 局 动 这 些 粒 子 系统 ， 通 过 代码 的 编写 就 可 以 实 
现 这 一 点 。 在 进行 编码 之 前 ， 首 先 将 全 部 的 焰火 对 象 都 赋予 一 个 合适 
的 标签 。 这 样 做 的 原因 是 ， 在 代码 中 需要 在 场景 中 查找 全 部 的 焰火 对 


象 ， 然 后 触发 对 应 的 事件 。 为 了 将 焰火 对 象 和 其 他 对 和 象 区 分 开 ， 可 以 
使 用 Tag 属 性 。 所 以 ， 首 先 创建 一 个 新 的 焰火 Tag， 然 后 将 它们 分 配给 
场景 中 的 焰火 对 象 。 在 这 一 章 开 始 的 时 候 就 为 了 检测 是 否 与 硬币 发 生 
页 接 为 游戏 中 的 角色 添加 过 Tag 属 性 ， 如 图 2.31 所 示 。 


图 2.31 ”为 焰火 对 象 添加 Tag 


现在 所 有 的 焰火 对 象 都 已 经 被 添加 了 Tag 了 ， 接 下 来 可 以 重新 定义 
Coin.cs 脚 本 类 来 处 理 场景 中 的 胜利 条 件 ， 如 下 面 的 代码 示例 2.7 所 示 。 


代码 示例 2.7: 


using UnityEngine; 
using System.Collections; 


public class Coin : MonoBehaviour 


// 初始 化 函数 
void Awake () 


{ 
// 创 建 对 象 并 增加 金币 的 数量 


++COin.CoinCount; 


void OnTriggerEnter(Collider Col) 


// 当 玩家 采集 到 金币 之 后 要 销毁 这 个 金币 对 象 
if(Col.CompareTag("Player")) 
Destroy(gameObject ); 


void OnDestroy() 


--Coin.CoinCount; 


// 检 查 剩余 金币 的 数量 
if(Coin.CoinCount <= 0) 
{ 
// 玩 家 收集 完全 部 金币 ， 游 戏 胜利 
/销毁 计时 器 对 象 ， 启 动 庆祝 焰火 
GameObject Timer = GameObject .Find("LevelTimer"); 
Destroy (Timer ); 


GameObject[] FireworkSystems = 

GameObject .FindGameObjectswWithTag("Fireworks"); 
foreach(GameObject GO in FireworkSystems) 
G0.GetComponent().Play(); 


下 面 对 代 码 示例 2.7 进 行 总 结 。 


。 OnDestroy0 落 数 是 十 分 重要 的 ， 当 一 个 金币 被 采集 之 后 束 会 调用 
这 个 函数 ， 它 有 一 个 用 来 判断 是 否 全 部 金币 都 被 收集 (获胜 条 
件 ) 的 证 语句 。 

。 当 获 胜 条 件 达 成 之 后 ， 系 统 融会 调用 函数 GameObject.Find 来 寻找 
所 有 名 为 LevelTimer 的 活动 对 象 。 如 果 找 到 了 符合 条 件 的 对 象 ， 这 
个 对 象 就 会 被 删除 。 这 通常 发 生 在 玩家 已 经 在 当前 关卡 取得 胜利 
的 情况 下 ， 需 要 删除 计时 器 以 防止 它 继续 倒计时 。 如 果 场 景 中 包 
含 了 多 个 符合 条 件 的 对 象 ， 那 么 该 男 数 只 会 返回 第 一 个 对 象 。 所 
以 在 同一 个 场景 中 只 能 有 一 个 计时 絮 。 


需要 注意 的 是 ， 要 尽 可 能 避免 使 用 GameObject. Find() 这 个 函数 ， 它 的 
执行 效率 很 低 。 相 对 而 言 ，FindGameObjects WithTag() 函 数 是 一 个 更 好 的 选 


择 。 在 这 里 介绍 Game Object.Find 的 目的 主要 是 为 了 让 读者 知道 这 个 函数 的 
存在 ， 在 有 些 时候 需 要 使 用 这 个 函数 来 查找 一 些 没 有 使 用 特定 Tag 的 对 象 。 


。 除了 删除 LevelTimer 对 象 ，OnDestroy() 芳 数 还 会 查找 场景 中 所 有 的 
焰火 对 象 ， 并 局 动 这 些 对 象 。OnDestroy0O 男 数 中 调用 了 
GameObject.FindGameObjectsWithTag0) 函 数 来 查找 所 有 具有 人 匹配 
Tag 的 对 象 。GameObject. te de ne ed 
有 具有 “Firework” 标 签 的 对 象 ， 并 通过 调用 Play 范 数 启 动 烟火 系统 
中 的 每 一 个 对 象 。 


如 前 所 述 ，Unity 中 的 每 一 个 对 象 都 是 一 些 相 关 组 件 的 集合 。 例 如 ， 一 
个 标准 立方 体 (使 用 菜单 GameObject | 3D Object | Cube 所 创建 的 ) ， 就 是 由 
Transform 组 件 、Mesh Filter 组 件 、Mesh Renderer 组 件 以 及 Box Collider 组 件 
所 组 成 的 。 这些 组 件 共同 决定 了 立方 体 的 性 质 。 


在 脚本 中 使 用 函数 GetComponentO 可 以 获得 一 个 目标 组 件 的 引用 ， 这 样 
就 可 以 直接 访问 目标 组 件 的 公共 属性 。 前 面 代码 中 的 OnDestroy0 画 数 就 使 
用 GetComponent() 芳 数 获得 了 “Particle System”" 组 件 的 引用 ， 这 个 画 数 是 一 
个 十 分 重要 而 且 有 用 的 函数 ， 关 于 GetComponent() 范 数 的 更 多 详细 信息 ， 可 
以 访问 http://docs.Unity3d.com/ Script Reference/GameObject. 
GetComponent.html 上 的 Unity 在 线 文 档 。 


2.8 ”游戏 测试 


至 此 ， 已 经 完成 第 一 个 Unity 游 戏 了 ! 现在 是 时 候 来 运行 一 下 这 个 
游戏 了 。Unity 中 游戏 的 测试 过 程 首 先是 单 击 工具 柱 上 的 “Play” 按 钮 ， 


然后 以 游戏 者 的 视觉 角度 来 进行 游戏 ， 以 此 来 查看 该 游戏 能 否 正 浓 工 
作 。 除 了 进行 游戏 以 外 ， 还 可 以 使 用 调试 模式 ， 在 整个 游戏 进行 过 程 
中 时 刻 观 察 着 对 象 Inspector 面 板 处 所 有 公共 和 私有 变量 值 的 变化 ， 以 此 
来 保证 在 游戏 过 程 中 所 有 变量 的 值 都 不 会 超出 正常 范围 。 激 活 调试 模 
式 的 方法 是 ， 单 击 对 象 检 查 (Inspector) 面板 右上 角 的 菜单 图 标 ， 并 从 
出 现 的 上 下 文 莱 单 中 选中 “Debug” 选 项 ， 如 图 2.32 所 示 。 


图 2.32 ”从 检查 (Inspector) 面板 处 激活 调试 模式 


激活 调试 模式 以 后 ， 检 查 (Inspector) 面板 的 变量 和 组 件 的 外 观 可 
能 发 生 改 变 ， 通 常情 况 下 ， 可 以 一 个 更 详细 和 更 准确 的 方式 来 查看 这 
些 变量 ， 另 外 ， 还 可 以 看 到 所 有 的 私有 变量 。 图 2.33 所 示 的 就 是 在 调试 
模式 下 看 到 的 变换 (Transform) 组 件 。 


图 2.33 ”在 调试 (Debug) 模式 下 查看 到 的 变换 (Transform) 组 件 


在 游戏 运行 时 ， 男 一 个 十 分 有 用 的 工具 是 Stats 面 板 ， 可 以 通过 在 
工具 栏 上 单 击 Stats 按 钮 来 将 游戏 (Game) 选项 卡 切 换 到 统计 (Stats) 
选项 卡 ， 如 图 2.34 所 示 。 


图 2.34 ”从 游戏 (Game) 选项 卡 切 换 到 统计 (Stats) 选项 卡 


游戏 (Game) 选项 卡 只 有 在 Play 模 式 下 才 可 以 使 用 ， 在 这 种 模式 
下 ， 写 会 详细 地 显示 游戏 中 的 所 有 关键 性 能 数据 统计 ， 例 如 帧 速率 


(FPS) 和 内 存 使 用 情况 。 这 些 数据 可 以 诊断 任何 可 能 会 影响 到 游戏 的 
问题 。FPS 表 示 每 秒 中 帧 (时 间 单 元 或 者 周期 的 数量 ， 当 然 这 里 并 没 
有 办 法 说 什么 值 生 好 的 FPS 值 ， 什 么 值 是 过 的 FPS 值 ， 或 者 菏 个 值 旦 最 
为 合适 的 FPS 值 。 但 是 通常 认为 较 高 的 FPS 值 要 好 于 较 低 的 FPS 值 ， 这 
征 因 为 较 高 的 FPS 值 意味 着 游戏 在 一 秒 完 成 了 更 多 的 周期 。 如 果 FPS 值 
小 于 20 甚 至 15， 那 么 很 有 可 能 是 游戏 出 现 了 延迟 ， 因 此 要 人 花费 更 多 的 
时 间 来 完成 一 个 周期 。 很 多 游戏 内 部 和 外 部 的 变量 都 会 影响 到 FPS。 内 
部 因素 包括 场景 中 光源 的 数量 、 网 格 对 象 的 顶点 密度 、 指 令 的 数目 、 
代码 的 复杂 度 。 外 部 因素 包括 计算 机 硬件 配置 、 当 前 正在 运行 的 程序 
和 进程 的 数量 及 人 硬盘 空间 的 大 小 等 。 


简 而 言 之 ， 如 果 FPS 值 比较 低 ， 那 么 就 意味 着 在 游戏 中 存在 一 些 需 
要 注意 的 问题 。 这 个 问题 的 解决 需要 考虑 到 很 多 方面 ， 例 如 网 格 是 不 
征 过 于 复杂 ， 它 们 上 面 是否 有 过 多 的 顶点 ， 贴 图 是 不 是 太 大 了 ， 游 戏 
中 是 不 是 加 入 了 太 多 的 音效 等 。 图 2.35 所 示 为 一 个 正常 运行 的 金币 采集 
游戏 示例 图 ， 这 个 完整 的 游戏 可 以 在 本 书 的 配套 文件 中 
的 “Chapter02/End” 文 件 夹 中 找到 。 


图 2.35 ”对 金币 采集 游戏 进行 测试 


2.9 构建 


现在 是 时 候 来 构建 (Build) 游戏 了 ， 构建 (Build) 是 指 将 游戏 进 
行 编译 和 打包 ， 使 得 游戏 成 为 一 个 独立 的 ， 可 以 目 执 行 的 形式 ， 玩 家 
在 没有 Unity 编 辑 此 的 情形 下 束 可 以 运行 这 个 游戏 。 通 向 情况 下 ， 在 开 


发 游戏 时 ， 就 应 该 考虑 到 这 个 游戏 的 运行 环境 (例如 Windows、iOS、 
Android 及 其 他 ) ， 要 知道 这 是 在 设计 阶段 就 应 该 决定 的 ， 而 不 是 在 开 
发 结束 时 才 想 到 的 问题 。 虽 然 我 们 经 常 听 说 Unity 是 一 种 “一 次 开发 ， 随 
处 运行 ”的 工具 ， 但 其 实 这 个 口号 可 能 会 带 来 负面 的 效果 ， 尽 管 它 宣称 
在 游戏 做 好 了 之 后 ， 就 可 以 像 在 桌面 系统 上 一 样 轻松 地 在 任何 平台 上 
运行 这 个 游戏 。 


不 幸 的 是 ， 问 题 并 非 如 此 简单 ， 能 够 在 桌面 系统 运行 良好 的 游 
戏 ， 不 一 定 能 在 手机 上 完美 运行 。 反 之 亦 然 ， 主 要 是 由 于 这 些 系 统 硬 
件 之 间 和 行业 标准 之 间 存 在 着 巨大 差异 。 考 虑 到 这 些 差异 ， 我 们 把 主 
要 精力 放 在 Windows 和 Mac 等 桌面 平台 上 ， 和 暂时 不 考虑 手机 和 游戏 机 等 
平台 。 如 果 想 创建 一 个 在 桌面 平台 上 运行 的 游戏 ， 可 以 在 菜单 栏 上 依 
次 选择 “File | Build Settings”， 如 图 2.36 所 示 。 


图 2.36 ”选择 “Build Settings” 


之 后 , “Build Settings” 对 话 框 束 会 显示 出 来 ， 这 个 界面 中 包含 了 3 
个 主要 的 区 域 , “Scenes In Build” 区 域 中 列 出 了 在 进行 游戏 构建 时 会 包 
括 的 所 有 场景 ， 注 意 是 所 有 的 场景 ， 并 不 考虑 这 个 场景 是 否 真 的 可 以 
被 玩家 访问 。 总 之 ， 如 果 在 游戏 中 需要 一 个 场景 ， 那 么 这 个 场景 必须 
出 现在 列表 中 ， 最 开始 的 上 时候， 这 个 列表 是 空 的 ， 如 图 2.37 所 示 。 


图 2.37 “Build Settings” 对 话 框 


可 以 从 项 目 (Project) 面板 上 将 场景 资源 拖 电 到 “Scenes In 
Build” 列 表 中 ， 这 样 束 可 以 轻松 地 将 场景 添加 进来 。 对 于 金币 来 集 游 
戏 ， 需 要 将 “Level_01 scene” 添 加 到 列表 中 。 当 场景 添加 进来 以 后 ， 
Unity 中 就 会 目 动 为 其 分 配 一 个 编号 ， 这 个 编号 的 值 取决 于 它 在 列表 中 
的 顺序 。0 代 表 最 高 的 场景 ，1 代 表 紧 随 其 后 的 那个 场景 ， 以 此 类 推 。 
最 高 的 场景 就 是 开始 的 场景 ， 也 就 是 说 ， 当 游戏 在 生成 之 后 运行 时 ， 
会 从 编号 为 0 的 scene 开 始 。 因 此 ，scene0 通 常 也 就 是 游戏 的 序 篇 或 者 介 
绍 场景 ， 如 图 2.38 所 示 ， 在 “Build Settings” 对 话 框 中 添加 了 一 个 关卡 。 


图 2.38” 问 “Build Settings” 中 添加 一 个 关卡 


接 下 来 ， 在 “Build Settings” 对 话 框 的 左 侧 的 “Platform” 列 表 框 中 选 
择 游戏 运行 的 目标 平台 。 对 于 加 面 系统 来 说 ， 应 该 选择 “PC, Mac & 
Linux Standalone”， 这 也 是 默认 的 选项 ， 然 后 在 右 侧 的 “Target 
Platform” 下 拉 列 表 框 中 选择 Windows、Linux， 或 者 Mac OS X 中 的 一 
项 ， 这 要 取决 于 所 使 用 的 系统 ， 如 图 2.39 所 示 。 


图 2.39 ”选中 一 个 目标 平台 


如 宁 之 前 在 多 个 平台 上 对 游戏 进行 过 测试 ， 或 者 在 其 他 的 平台 例 
如 Android 和 iOS 上 进行 过 测试 ， 就 可 以 使 用 左下 角 的 “Switch 
Platform” 按 钮 。 当 在 Platform 中 选择 了 一 个 选项 之 后 ， 这 个 按钮 束 有 可 
能 被 激活 了 “。 如 有 果 这 个 按钮 被 激活 了 ， 那 么 可 以 单 击 “Switch 


Platform>” 按 钮 来 同 Unity 确 认 ， 如 图 2.40 所 示 ，Unity 会 花费 一 点 时 间 来 
将 资源 配制 成 可 以 在 选中 平台 上 运行 的 程序 。 


图 2.40 ”切换 平台 


在 首次 进行 构建 之 前 ， 想 要 查看 一 些 与 玩家 相关 的 重要 构建 参 
数 ， 例 如 游戏 分 辨 京 、 游 戏 质 量 设置 、 可 执行 文件 图 标 、 相 关 信 息 以 
及 其 他 设置 ， 可 以 在 “Build” 对 话 框 中 选中 “Player Settings” 对 游戏 玩家 
设置 进行 调整 。 现 在 已 经 在 对 象 检 查 (Inspector) 面板 中 显示 “Player 
Settings” 了 。 同 样 ， 也 可 以 在 且 单 柱 上 选中 “Edit | Project Settings | 
Player” 来 完成 这 个 操作 ， 如 图 2.41 所 示 。 


图 2.41 访问 “Player Settings” 选 项 


在 “Player Settings” 选 项 中 ， 可 以 设置 “Company Name” 和 “Product 
Name” 这 两 个 参数 ， 它 们 将 会 成 为 内 置 在 这 个 可 执行 文件 中 的 信息 。 同 
样 如 果 需 要 ， 还 可 以 为 这 个 游戏 指定 一 个 图 标 ， 为 鼠标 光标 指定 一 个 
图 像 。 对 于 这 个 采集 游戏 ， 后 面 的 两 项 设置 将 不 进行 设 定 ， 如 图 2.42 所 
示 。 


图 2.42 ”为 游戏 设置 厂商 名 字 和 产品 名 字 


“Resolution and Presentation” 选 项 卡 也 是 十 分 重要 的 ， 因 为 在 这 里 
可 以 设置 游戏 屏幕 的 大 小 以 及 在 游戏 启动 的 时 候 是 否 同 时 出 现 分 辨 率 


(Resolution) 对 话 框 。 在 这 个 选项 卡 中 ， 可 以 看 到 “Default Is Full 
Screen 选项 已 经 处 于 被 选中 状态 ， 这 和 意 味 着 游戏 将 会 以 一 个 全 屏幕 的 
形式 运行 ， 而 不 是 在 一 个 较 小 的 可 移动 的 窗口 中 运行 。 此 外 ， 

将 “DisPlay Resolution Dialog” 下 拉 列 表 框 设置 为 “Enabled”， 如 图 2.43 所 
示 。 设 置 完 成 后 ， 在 游戏 开始 时 就 会 出 现 一 个 选项 屏幕 ， 人 允许 用 户 对 

目标 分 辨 紊 和 屏幕 大 小 以 及 一 些 自 定义 控制 进行 选择 。 如 果 构 建 最 终 
版 本 ， 则 需要 禁用 这 个 选项 ， 按 照 自 定义 的 屏幕 选项 设置 进行 游戏 。 
不 过 ， 对 于 构建 测 斌 版本， 分辨 率 对 话 框 是 一 个 十 分 有 用 的 功能 ， 它 
可 以 实现 在 各 种 不 同 大 小 的 屏 人 幕 中 测试 游戏 。 


图 2.43 ”启用 “Resolution” 对 话 框 


现在 已 经 为 第 一 个 游戏 的 编译 构建 做 好 了 准备 。 接 下 来 ， 单 

击 “Build Settings” 对 话 框 中 的 “Build” 按 钮 ， 或 者 从 应 用 程序 菜单 上 依次 
选择 “File | Build & Run”。 之 后 Unity 会 弹出 一 个 保存 对 话 框 ， 在 这 个 保 
存 对 话 框 中 需要 指定 生成 文件 在 硬盘 上 的 存储 位 置 ， 选 择 一 个 位 置 ， 
然后 单 击 “Save”， 构 建 的 过 程 就 完成 了 。 有 时 这 个 过 程 会 产生 错误 ， 错 
误 信息 以 红色 的 字体 显示 在 控制 台 窗 口 。 这 是 有 可 能 会 发 生 的 ， 例 
如 ， 试 图 将 文件 保存 到 一 个 只 读 硬 盘 区 域 ， 或 者 空间 不 足 ， 双 或 者 没 
有 在 该 计算 机 上 的 管理 权限 等 。 不 过 ， 如 果 游 戏 在 编辑 器 中 能 正常 运 
行 ， 一 般 在 构建 过 程 中 也 都 会 成 功 ， 如 图 2.44 所 示 。 


图 2.44 ”构建 并 运行 这 个 游戏 


当 构 建 过 程 结束 时 ，Unity 会 在 指定 位 置 创建 一 个 新 的 文件 。 如 果 
是 Windows 操 作 系统 ， 产 生 的 就 是 图 2.45 所 示 的 一 个 可 执行 文件 和 一 个 
文件 夹 。 注 意 ， 这 两 者 都 是 必要 的 ， 而 且 两 者 是 相互 依存 的 。 如 采 硕 
望 其 他 人 在 不 安装 Unity 的 情况 下 就 可 以 进行 这 个 游戏 ， 束 需要 将 可 执 
行文 件 和 相关 的 文件 夹 都 发 给 用 户 。 


图 2.45 ”Unity 构 建 产生 的 文件 


在 游戏 运行 中 ,，“Resolution” 对 话 框 将 会 显示 ， 这 里 假设 已 经 
在 “Player Settings” 中 将 “DisPlay Resolution Dialog” 选 项 设置 
为 “Enabled”( 见 图 2.46) 。 用 户 可 以 选择 游戏 分 辨 率 、 游 戏 质量 、 输 
出 显示 器 以 及 对 玩家 控制 进行 配置 。 


图 2.46 ”从 Resolution 对 话 框 做 好 游戏 的 准备 


当 单 击 “Play” 按 钮 时 ， 游 戏 融 会 在 默认 的 全 屏 模式 下 开始 运行 了 。 
游戏 现在 已 经 完成 了 ， 而 且 构建 成 功 了 。 现 在 可 以 将 这 个 游戏 发 给 目 
己 的 朋友 和 家 人 们 进行 测试 了 ! 效果 如 图 2.47 所 示 。 


图 2.47 ”在 全 屏 模 式 下 运行 金币 采集 游戏 


当 不 想 再 玩 这 个 游戏 时 如 何 才能 退出 呢 ? 现在 这 个 游戏 中 并 没有 
Quit 按 钮 或 者 主 菜 单 。 在 Windows 操 作 系 统 中 ， 需 要 按 下 键盘 上 的 “Alt 


+F4” 组 合 键 。 如 果 是 在 Mac 系 统 中 ， 可 以 按 下 “Cmd + Q” 组 合 键 。 如 果 
是 Ubuntu， 按 下 “Ctrl + Q” 组 合 键 。 


2.10 “小结 


到 现在 为 止 ， 已 经 完成 了 第 一 个 Unity 工 程 一 一 金币 采集 游戏 。 读 
者 已 经 见识 了 Unity 中 大 量 的 特性 和 功能 ， 包 括 关 卡 的 编辑 与 设计 、 预 
设 体 、 粒 子 系统 、 网 格 、 组 件 、 脚 本 文件 以 及 构建 设置 。 当 然 这 些 特 
性 和 功能 还 需要 进一步 进行 扩展 和 深入 ， 现 在 已 经 将 这 些 内 容 融 合 到 
了 金币 采集 游戏 中 。 接 下 来 ， 需 要 继续 一 个 完全 不 同 的 游戏 ， 在 这 个 
游戏 中 会 再 次 使 用 到 这 些 功能 和 特性 ， 并 且 将 介绍 一 些 全 新 的 功能 。 
简 而 言 之 ， 下 一 革 ， 我 们 将 会 从 一 个 Unity 的 初学 者 过 渡 成 为 一 个 Unity 
中 等 程度 的 使 用 者 。 


第 3 章 ”太空 射击 游戏 (1) 


本 章 将 会 进入 到 一 个 新 的 学 习 领 域 ， 要 开发 的 第 二 个 游戏 是 一 个 
使 用 双 轴 (Twin-stick) 模式 的 太空 射击 游戏 。 双 轴 (Twin-stick) 模式 
的 游戏 是 指 游戏 玩家 通过 两 个 维度 或 者 轴 的 输入 来 控制 运动 范围 ， 一 
个 轴 负 责 运动 ， 另 一 个 轴 负 责 角 度 。《 僵 尸 邻 居 》 《Zombies Ate My 
Neighbors) 和 《几何 战争 》 (Geometry Wars) 都 是 典型 的 双 轴 (Twin- 
stick) 模式 的 游戏 。 游 戏 的 功能 主要 是 依靠 C# 语 言 进行 编码 来 实现 
的 。 这 么 做 的 目的 是 为 了 展示 如 何 通过 脚本 来 实现 一 个 游戏 ， 即 使 在 
不 使 用 编辑 器 和 关卡 构建 工具 的 情况 下 。 当 然 仍然 会 在 一 定 情 况 下 使 
用 这 些 工具 ， 但 是 不 会 很 多 ， 这 是 有 意 为 之 的 。 现 在 假设 读者 已 经 完 
成 了 前 面 两 章 中 创建 的 游戏 项 目 ， 同 时 也 具有 优秀 的 C# 编 程 基础 ， 虽 
然 C# 并 不 是 学 习 Unity 3D 必 备 的 知识 。 现 在 开始 着 手 双 轴 (Twin- 
stick) 模式 的 太空 射击 游戏 。 本 章 将 会 包括 以 下 重要 主题 : 


。 创 建 操 作 与 预 设 体 

。 双 轴 控 制 以 及 轴 问 运动 

。 玩家 角色 控制 如 与 射击 机 制 
基本 的 敌人 运动 与 人 工 状 能 (AD 


牢记 下 面 的 这 个 例子 以 及 相关 的 工作 ， 抽 象 地 讲 ， 这 里 面 涉 及 的 工具 
和 概念 在 很 多 应 用 程序 中 都 是 通用 的 。 可 能 读者 想 要 创建 的 并 不 是 双 轴 的 


+} 击 游戏 ， 不 过 没关系 ， 实 际 上 本 书 也 不 可 能 将 所 有 想 要 做 的 游戏 类 型 都 


绍 一 沉 。 重 要 的 是 ， 通 过 书 中 的 范例 ， 向 读者 传达 游戏 开发 的 思路 和 工 


具 的 使 用 ， 这 些 内 容 都 可 以 再 次 应 用 在 游戏 中 。 理 解 这 一 切 才 是 学 习 Unity 
发 工具 最 为 重要 的 。 


3.1 对 完整 的 项 目 进行 展 户 


在 开始 开发 双 轴 (Twin-stick) 模式 的 太空 射击 游戏 之 前 ， 先 来 看 
看 完成 之 后 的 项 目 是 什么 样子 以 及 它 征 如 何 工作 的 ， 如 图 3.1 所 示 。 要 
开发 的 这 秋游 戏 只 包 人 一 个 场景 ， 在 这 个 场景 中 ， 玩 家 可 以 控制 一 个 
宇宙 飞船 来 射击 迎面 而 来 的 敌人， 通过 键盘 上 的 方 癌 键 或 
者 “W”S”A”“D” 键 来 控制 宇宙 飞船 在 关卡 中 移动 ， 而 且 宇 宙 飞 船 的 方 
问 始 终 跟随 着 鼠标 。 单 击 鼠 标 左 键 来 控制 宇宙 飞船 开火 。 
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图 3.1 完成 的 双 轴 (Twin-stick) 模式 的 太空 射击 游戏 


本 章 和 下 一 章 中 将 对 这 个 项 目 进行 讨论 ， 该 项 目的 完整 文件 
TwinStickShooter 可 以 在 本 书 配套 文件 的 “Chapter03/ TwinStickShooter” 文 件 
夹 中 找到 。 


这 个 项 目 中 使 用 的 所 有 资源 (包括 音效 和 贴图 ) 都 是 从 
OpenGameArt.org 网 站 上 人 免费 下 载 的 ， 可 以 在 这 个 网 站 上 找到 很 多 的 游戏 资 
源 ， 可 以 通过 公共 领域 、 普 通 许可 或 其 他 许可 来 免费 使 用 这 些 资源 。 


3.2 ”开始 太空 射击 游戏 


首先 ， 创 建 一 个 不 包含 任何 包 和 资源 的 空白 Unity 3D 项 目 。 创 建 一 
个 者 项 目的 细节 可 以 参考 第 1 章 。 这 一 次 的 项 目 要 从 头 开 始 ， 当 项 目 成 
功 创建 之 后 ， 创 建 一 些 基本 的 文件 夹 来 组 织 项 目 中 要 使 用 的 资源 ， 这 
一 点 在 管理 文件 时 是 相当 重要 的 。 为 贴图 、 场 景 、 材 质 、 声 音 、 预 设 
体 以 及 脚本 创建 对 应 的 文件 夹 ， 如 图 3.2 所 示 。 
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图 3.2 ”创建 文件 夹 来 实现 资源 的 组 织 


游戏 中 还 需要 一 些 图 形 和 音频 资源 。 可 以 在 本 书 配套 文件 
的 “Chapter03/Assets” 文 件 夹 中 ， 或 者 从 OpenGameArt.org 网 站 中 找到 这 
些 资源 。 现 在 从 玩家 的 宇宙 飞船 、 敌 人 的 宇宙 飞船 和 星空 背景 的 贴图 
开始 导入 。 首 和 完 从 Windows 的 资源 管理 右 或 者 Mac 的 finder 中 将 贴图 拖 
虑 到 Unity 中 的 项 目 (Project) 面板 里 的 Textures 文 件 夹 中 。Unity 束 会 自 
动 地 完成 贴图 的 导入 和 配置 工作 ， 如 图 3.3 所 示 。 
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图 3.3 ”导入 玩家 宇宙 飞船 、 敌 人 宇宙 飞船 、 


这 些 提供 的 资源 可 以 使 用 ， 也 可 以 不 使 用 。 如 采 读 者 愿意 
创建 自 定 义 的 资源 ， 只 需要 将 这 些 目 定义 的 资源 拖 放 到 对 应 的 资源 文件 夹 


中 ， 然 后 按照 下 面 的 教程 继续 操作 。 


默认 情况 下 ，Unity 中 导入 图 像 文 件 作 为 3D 对 象 的 贴图 ， 这 些 图 像 
的 像素 大 小 都 是 2 的 倍数 (例如 4、8、16、32、64、128、256 等 ) 。 如 
果 导 入 图 像 的 像素 大 小 并 不 是 以 上 数值 中 的 一 个 ，Unity 就 会 对 这 些 图 
像 进 行 放大 或 者 缩小 到 最 近似 的 有 效 大 小 值 。 这 并 不 是 一 个 最 适当 的 
做 法 。 对 于 一 个 2D 的 自 上 而 下 的 空间 射击 游戏 来 说 ， 导 入 的 图 片 需 要 
以 其 没有 任何 修改 的 最 初 大 小 出 现 。 可 以 在 对 象 检 查 (Inspector) 面板 
中 将 所 有 导入 的 贴图 选中 ， 然 后 将 它们 的 “Texture Type” 属 性 
由 “Texture” 改 变 为 “Sprite (2D and UD”。 当 完成 改变 之 后 ， 单 
击 “Apply” 按 钮 来 更 新 设 定 ， 贴 图 将 会 保留 其 导入 时 的 大 小 ， 如 图 3.4 所 
示 。 
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图 3.4 ”为 导入 的 图 像 修改 “Texure type” 属 性 


在 将 “Texture Type” 的 值 设 置 为 “Sprite (2D and UT)” 之 后 ， 如 
果 “Generate Mip Maps” 复 选 框 处 于 选中 状态 ， 就 要 将 其 取消 。 这 样 束 可 
以 避免 Unity 目 动 地 根据 摄像 机 的 距离 将 贴图 的 画面 质量 降低 。 关 于 2D 
Texture 和 Mip Map 的 更 多 信息 可 以 在 Unity 的 在 线 文档 
http://docs.Unity3d.com/Manual/class-TextureImporter.html. 中 找到 ， 如 图 
C5 
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图 3.5 ”取消 “MipMapping” 功 能 


现在 可 以 将 贴图 以 图 片 精灵 (Sprite) 对 象 的 形式 拖 虑 到 场景 中 。 
不 能 将 它们 从 项 目 (Project) 面板 拖 忠 到 视图 中 ， 但 是 可 以 将 它们 从 项 
目 (Project) 面板 拖 忠 到 层次 (Hierarchy) 面板 上 。 当 完成 这 个 操作 之 
后 ， 贴 图 就 会 自动 地 以 图 片 精 灵 对 象 的 形式 添加 到 场景 中 。 在 创建 宇 
宙 飞 船 对 象 时 要 经 常 使 用 这 个 功能 ， 如 图 3.6 所 示 。 
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图 3.6 ”向 场景 中 添加 图 片 精灵 对 象 


接 下 来 ， 导 入 游戏 中 需要 的 音乐 和 首 效 ， 这 些 内 容 可 以 在 本 书 的 
配套 文件 中 的 “Chapter03/Assets/Audio” 文 件 夹 中 找到 。 这 些 资源 是 从 
OpenGameArt.org 下 载 的 。 可 以 简单 地 将 这 些 文件 从 Windows 的 资源 管 
理 器 或 者 Mac 的 Finder 中 拖 忠 到 项 目 (Project) 面板 上 。 当 完成 这 项 操 
Fh a 自动 地 完成 了 资源 的 导入 和 配置 。 现 在 可 以 对 导入 
的 声音 进行 一 个 测试 ， 测 试 的 方法 是 : 单 击 对 象 Inspector 面 板 中 的 工具 
ne 钮 ， 如 图 3.7 所 示 。 
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图 3.7 ”从 对 象 检 查 (Inspector) 面板 处 对 声音 进行 测试 


A 图 一 样 ，Unity 导 入 声音 文件 时 也 使 用 了 一 些 稚 认 的 参 
数 分 适合 那些 时 长 很 短 的 音效 ， 例 如 脚步 声 、 枪 声 和 爆 
炸 声 。 但 是 如 果 导 入 的 是 时 长 较 长 的 声 首 ， 例 如 乐曲 ， 这 些 参数 就 可 


能 出 现 问题 ， 造 成 加 载 时 间 过 长 。 为 了 修复 这 个 问题 ， 可 以 在 项 目 
(Project) 面板 选中 音 轨 ， 然 后 在 对 象 检查 (Inspector) 面板 中 ， 取 
消 “Preload Audio Data” 复 选 框 的 选中 状态 ， 最 后 在 “Load Type” 下 拉 列 
表 框 中 选中 “Streaming” 选 项 ， 如 图 3.8 所 示 。 这 样 束 可 以 确保 音 轨 是 流 

式 传输 的 ， 而 不 需要 在 关卡 启动 时 束 完 全 加 载 到 内 存 中 。 
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图 3.8 ”将 音 轨 设 置 为 流 式 (Streaming) 


3.3 ”创建 玩家 对 象 


现在 已 经 为 双 轴 模式 射击 游戏 导入 了 所 须要 的 资源 ， 也 做 好 了 
创建 一 个 玩家 宇宙 飞船 对 象 的 准备 。 玩 家 宇宙 飞船 对 象 束 是 指 受 玩家 


控制 而 移动 的 游戏 对 象 。 现 在 创建 一 个 对 象 可 以 说 是 毫 无 难度 了 ， 比 
如 简单 地 将 相关 的 玩家 图 片 精灵 从 项 目 ee 面板 拖 动 到 场景 中 就 
可 以 完成 这 个 工作 ， 但 其 实事 情 并 非 如 此 。 ee 
制 的 对 象 功 能 十 分 复杂 ， 后 面 内 容 将 pe 。 基 于 这 些 复 洒 有 的 功 
能 ， 在 创建 epee 首先 ， 在 染 单 栏 上 
依次 单 击 “GameObject | Create Empty” 在 场景 中 创建 一 个 空 的 游戏 对 

象 ， 然 后 将 这 个 对 象 命名 为 “Player”"， 如 图 3.9 所 示 。 
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图 3.9 创建 一 个 玩家 对 象 


新 创建 的 游戏 对 象 可 能 并 不 位 于 整个 游戏 世界 的 最 中 心 (0, 0， 
0) ， 男 外 它 的 “Rotation” 属 性 的 值 也 可 能 不 是 (0, 0,0) 。 为 了 确保 新 
的 游戏 对 象 保持 原状 ， 可 以 在 对 象 检查 (Inspector) 面板 中 
将 “Transform”* 组 件 的 所 有 属性 都 设置 为 0。 还 有 一 种 更 为 快捷 的 方式 就 
是 ， 单 击 “Transform” 组 件 右 侧 资 轮 状 图 标 ， 然 后 克 中 上 下 文 菜 单 中 
的 “Reset”， 如 图 3.10 所 示 。 
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图 3.10 ” 重 置 “Transform” 组 件 


接 下 来 ， 将 项 目 (Project) 面板 上 的 “drop ship” 图 片 精灵 (位 于 
Textures 文 件 夹 中 ) 拖 动 到 层次 (Hierarchy) 面板 ， 使 它 成 为 空 玩家 对 
象 的 子 对 象 。 然 后 ， 将 “drop ship” 图 片 精灵 对 象 沿 着 X 轴 和 Y 轴 各 自 旋 
转 90 度 ( 见 图 3.11) 。 这 使 得 “drop ship” 图 片 精灵 对 象 保持 了 和 父 对 象 
相同 的 方向 ， 同 样 也 停靠 在 地 面 上 。 游 戏 中 的 摄像 机 采用 了 自 上 而 下 
的 视角 。 
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图 3.11 调整 玩家 的 宇宙 飞船 


现在 可 以 选中 玩家 (Player) 对 象 ， 并 查看 蓝 色 箭头 的 方向 ， 以 此 
来 确认 “ship” 图 片 精灵 对 象 已 经 和 父 对 象 是 否 摆 放 一 致 。 现 在 “ship” 图 
片 精 灵 对 象 的 方向 应 该 和 蓝 色 箭头 的 方向 是 相同 的 。 如 果 不 同 ， 可 以 
继续 将 “ship” 图 片 精灵 对 和 象 旋转 90 度 直到 它们 对 齐 为 止 。 在 之 后 编写 宇 
宕 飞船 航行 的 控制 代码 时 ， 这 一 点 十 分 重要 ， 如 图 3.12 所 示 。 
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图 3.12 ”把 蓝 色 的 小 箭头 称 为 “前 向 向 量 ” 


接 下 来 ， 玩 家 (Player) 应 该 具备 现实 世界 的 物理 属性 ， 也 就 是 说 
玩家 (Player) 应 该 是 固态 的 ， 而 且 会 受到 外 力 的 影响 。 当 玩家 
(Player) 和 其 他 固体 接触 时 ， 就 会 发 生 碰撞 ; 被 敌人 的 武器 击 中 时 ， 
会 造成 损坏 。 为 了 实现 这 些 功 能 ， 将 两 个 额外 的 组 件 添加 到 玩家 
(Player) 上 ， 这 两 个 组 件 就 是 刚体 (Rigidbody) 和 碰撞 体 。 首先 选择 
玩家 (Player) ” (注意 不 是 图 片 精灵 对 象 ) ， 然 后 在 应 用 程序 菜单 上 依 
次 选中 “Component | Physics |Rigidbody”， 然 后 在 应 用 程序 菜单 上 依次 
选中 “Component | Physics | Capsule Collider”"， 完 成 这 两 次 操作 之 后 ， 束 
为 玩家 (Player) 添加 了 刚体 和 碰撞 体 组 件 ， 如 图 3.13 所 示 。 
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图 3.13 ”向 玩家 (Player) 添加 刚体 和 而 
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碰撞 体 组 件 是 用 来 模拟 对 象 的 体积 的 ， 刚 体 组 件 利用 碰撞 体 来 确 
定 如 何 实际 应 用 物理 作用 力 。 首 先 稍微 对 胶 赛 伴 撞 体 (Capsule 


Collider) 作出 一 点 修正 ， 因 为 默认 的 设置 可 
匹配 。 修 改 “Direction”Radius” 和 “Height” 的 值 ， 


家 图 片 精灵 相 匹 配 ， 而 且 与 玩家 对 象 的 体积 相同 ， 如 图 3.14 
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图 3.14 ”对 宇宙 飞船 的 胶 圳 碰撞 体 进 行 调 整 


默认 情况 下 ， 添 加 了 刚体 组 件 的 对 象 如 同 现实 中 的 物体 一 样 ， 会 
受到 重力 的 影响 落 到 地 面 上 。 但 是 这 并 不 适合 游戏 中 会 飞 的 宇宙 飞 
船 。 因 此 ， 要 对 刚体 (Rigidbody) 组 件 进行 修改 。 首 先 要 取消 “Use 
Gravity” 单 选 框 的 选中 状态 ， 这 样 对 象 就 不 会 再 掉 落 在 地 面 上 了 。 田 
外 ， 在 “Freeze Position” 复 选 框 中 选中 “Y”， 然 后 在 “Freeze Rotation” 复 
选 框 中 选中 “Z”， 这 样 就 可 以 使 宇宙 飞船 按照 这 款 二 维 的 自 上 而 下 游戏 
模式 运行 了 ， 如 图 3.15 所 示 。 
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图 3.15 ”为 玩家 宇宙 飞船 设置 刚体 (Rigidbody) 组 件 


现在 成 功 地 设置 了 玩家 宇宙 飞船 。 当 然 ， 它 暂时 还 不 能 在 这 个 游 
戏 中 移动 ， 是 因为 还 没有 为 对 象 添 加 任何 的 代码 ， 接 下 来 将 做 这 个 工 
作 ， 也 惑 是 玩家 宇宙 飞船 可 以 响应 用 户 的 输入 。 


3.4 Player 输 入 


现在 已 经 在 场景 中 创建 了 玩家 (Player) 对 象 ， 而 且 也 为 这 个 对 象 
设置 了 刚体 (Rigidbody) 和 碰撞 体 (Collider) 组 件 。 但 是 ， 游 戏 对 象 
并 不 会 对 玩家 的 任何 输入 进行 响应 。 在 一 个 双 轴 的 游戏 中 ， 玩 家 通过 
两 个 轴 的 输入 就 可 以 完成 游戏 的 控制 ， 这 通常 意味 着 键盘 上 
的 “WwW”“A”“S”D2?4 个 键 分 别 控制 玩家 的 上 、 下 、 左 、 右 。 此 外 ， 鼠 标 


的 移动 控制 玩家 面向 瞄准 的 方向 ， 鼠 标 左 键 来 控制 武器 。 这 些 是 游戏 
的 控制 方案 。 实 现 这 个 方案 的 操作 步骤 是 : 在 项 目 (Project) 面板 上 单 
击 鼠 标 右键 创建 一 个 名 为 PlayerControllercs 的 C# 脚 本 ， 如 图 3.16 所 示 。 
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建 一 个 玩家 控制 的 C# 脚 本 文件 
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图 3.16 他 


在 PlayerControllercs 脚 本 文件 中 包含 如 下 代码 (如 代码 示例 3.1 所 


代码 示例 3.1: 


using UnityEngine 
using System,Collections ; 


private Rigidbody ThisBody = null; 


private Transform ThisTransform = null; 


public bool MouseLook = true 

public string HorzAxis = "Horizontal"; 

public string VertAxis = "Vertical"; 

public string FireAxis = "Firel1"; 
public float MaxSpeed = 5f; 


// 初始 化 画 数 
void Awake () 


ThisBody = GetComponent(); 
ThisTransform = GetComponent(); 


// 在 每 一 帧 都 会 调用 Update ( ) 函数 
void FixedUpdate () 
{ 


// 对 运动 进行 更 讲 
float Horz = Input.GetAxis (HorzAxis); 
float Vert = Input.GetAxis(VertAxis); 
Vector3 MoveDirection = new Vector3(Horz, 0.0f, Vert); 
ThisBody .AddForce(MoveDirection.normalized * MaxSpeed); 


一 个 上 


// 对 速度 进行 限制 

ThisBody.velocity = new Vector3 
(Mathf.clamp(ThisBody.velocity.x, -MaxSpeed, MaxSpeed), 
Mathf.Clamp(ThisBody.velocity.y, -MaxSpeed, MaxSpeed), 
Mathf.Cclamp(ThisBody.velocity.z, -MaxSpeed, MaxSpeed)); 


// 是 否 跟随 鼠标 
If(MouseLook ) 
{ 

// 改 变 角度 -视角 跟随 鼠标 


Vector3 MousePosWorld = Camera.main.ScreenTowWorldPoint (new 
Vector3(Input.mousePosition.x, 
Input .mousePosition.y, 0.0f)); 
MousePosWorld = new Vector3(MousePosWorld.x, 0.0f, 
MousePosWorld.z); 

// 跟 随 光 标的 方向 

Vector3 LookDirection = MousePosWorld - 
ThisTransform.position; 


//FixedUpdate 画 数 中 实现 旋转 
ThisTransform.1localRotation = Quaternion.LookRotation 
(LookDirection.normalized,Vector3.up); 


下 面 对 代 码 示例 3.1 进 行 几 点 总 结 。 


PlayerController 类 需要 依附 在 场景 中 的 玩家 (Player) 对 象 上 。 
为 这 个 脚本 要 接受 玩家 的 输入 ， 并 控制 宇宙 飞船 的 移动 。 
当 关 卡 开 始 后 ， 创 建 对 象 的 时 候 会 调用 Awake() 范 数 ， 这 个 画 数 会 
查找 “Transform” 和 “Rigidbody” (也 就 是 刚体 组 件 ) 两 个 组 
件 , “Transform” 组 件 用 来 控制 玩家 转动 ,“Rigidbody” 组 件 用 来 控 
制 玩家 的 运行 。“Transform” 组 件 可 以 通过 “Position” 属 性 来 控制 玩 
家 的 移动 ， 但 是 这 里 并 没有 考虑 到 础 撞 之 类 的 情况 。 相 比 之 
下 , “Rigidbody” 组 件 可 以 防止 玩家 从 其 他 的 固体 对 象 中 穿 过 。 
函数 FixedUpdate() 会 在 每 次 物理 系统 发 生变 化 时 调用 ， 这 个 函数 会 
在 每 秒 都 执行 固定 的 次 数 。FixedUpdate0 与 UpdateO 函 数 不 同 ， 
Update() 落 数 是 每 帧 调用 一 次 ， 但 是 因为 帧 速率 古 不 断 变 化 的 ， 
此 每 秒 钟 执行 的 Update0 函 数 的 次 数 是 不 固定 的 。 如 有 果 通 过 物理 系 
统 来 控制 一 个 对 象 ， 比 如 使 用 刚体 (Rigidbody) ， 就 需要 使 用 
FixedUpdateO) 函 数 ， 而 不 是 Update(0) 函 数 。 这 是 Unity 中 的 惯例 ， 最 
好 牢 牢 地 记 住 这 一 点 。 
在 FixedUpdate 国 数 执行 时 会 调用 Input.GetAxis0) 范 数 ， 它 可 以 从 键 
盘 或 者 游戏 手 权 上 读 取 轴 癌 的 输入 数据 。Input.GetAxis() 落 数 会 读 
取水 平 (左右 ) 、 重 直 (上 下 ) 两 个 方向 的 数据 。 输 入 数据 的 值 
区 间 为 -1 到 1， 方 同 左 键 被 按 下 时 ， 水 平 轴 的 返回 值 为 -1。 方 同 厂 
键 被 按 下 时 ， 水 平 轴 的 返回 值 为 1。 当 返回 值 为 0 时 意味 着 这 两 个 
键 都 没有 被 按 下 ， 或 者 两 个 键 都 被 按 下 了 “。 垂直 轴 的 原理 相同 ， 
意味 着 1， 下 意味 着 -1。 如 有 果 没 有 键 按 下 ， 残 是 0。 可 以 在 Unity 


的 在 线 文档 http:/docs.Unity3d.comy 


ScriptReference/Input.GetAxis.html 中 找到 GetAxisO 函 数 的 更 多 信 
已。 

RigidbodyAddForce0 函 数 用 来 给 Player 对 象 施加 一 个 力 ， 将 它 向 一 
个 方向 移动 。“AddForce” 也 定义 了 一 个 速度 ， 就 是 对 象 沿 着 特定 
方 同 运动 的 快慢 。“MoveDirection”* 癌 量 中 定义 了 方 同 ， 这 个 问 量 
是 由 垂直 和 水 平 两 个 轴 共 同 决 定 的。 这 个 方向 上 以 最 大 的 速度 运 
行 ， 就 可 以 保证 游戏 对 象 走 得 最 快 。 可 以 在 Unity 的 在 线 文 档 
http://docs.Unity3d.com/Script Reference/Rigidbody.AddForce.html 中 
找到 AddForceO 函 数 的 更 多 信息 。 

函数 摄像 机 ScreenToWorldPoint 是 用 来 将 光标 在 游戏 屏幕 上 的 坐标 
转换 为 在 游戏 世界 的 坐标 ， 这 个 光标 的 位 置 也 就 是 游戏 中 玩家 对 
象 面 向 的 位 置 。 这 段 代码 将 会 使 玩家 一 直面 向 着 鼠标 光标 。 如 果 
想 要 代码 正确 地 工作 ， 还 需要 进一步 地 调整 。 关 于 
ScreenToWorldPoint 函 数 的 更 多 详细 信息 ， 可 以 访问 Unity 位 于 
http://docs.Unity3d.com/ 
ScriptReference/Camera.ScreenToWorldPoint.html 的 在 线 文 档 。 


3.5 ”配置 游戏 中 的 摄像 机 


前 面 的 代码 已 经 实现 了 对 玩家 (Player) 的 控制 ， 但 是 这 段 代码 还 
不 完美 。 其 中 一 个 问题 束 是 玩家 (Player) 还 不 能 一 直面 向 着 和 鼠标 光 
标 ， 虽然 代码 中 设计 了 这 样 的 功能 。 产 生 这 个 问题 的 原因 在 于 摄像 
机 ， 玖 认 情 况 下 的 摄像 机 并 不 是 按照 目 顶 而 下 的 2D 游 戏 方案 来 设计 
的 。 现 在 需要 调整 摄像 机 的 设置 。 首 先 选择 位 于 场景 Scene) 视图 中 


右上 方 的 导航 块 (ViewCube) ， 然 后 单 击 其 中 的 向 上 的 箭头 ， 操 作 完 
成 之 后 ， 玩 家 在 游戏 中 的 视角 束 切 换 成 了 由 顶 而 下 的 视角 ， 如 图 3.17 所 
示 “。 


站 Scene | Animator + 三 
Shaded "||2D|| 深 | 只 | 1*|| Gizmos | (orAll 


Persp 


图 3.17 使 用 导航 块 (ViewCube) 可 以 切换 游戏 者 的 视角 


现在 已 经 实现 了 一 个 自 顶 而 下 的 观察 视角 ， 这 是 因为 导航 块 
(ViewCube) 已 经 将 顶部 设置 为 了 当前 的 观察 位 置 ， 如 图 3.18 所 示 。 


坟 Scene 内 nator 国光 
| Shaded "| 湾 | -| | Gizmos | fcrAll 


图 3.18” 自 顶 向 下 的 观察 视角 


至 此 就 有 了 一 个 符合 游戏 设计 方案 的 摄像 机 ， 这 个 摄像 机 的 视角 
是 自 上 而 下 的 。 首 先 选中 场景 中 的 摄像 机 或 者 从 层次 (Hierarchy) 面 
板 中 来 选 ， 然 后 在 应 用 程序 菜单 中 依次 选中 “GameObject | Align With 
View”， 如 图 3.19 所 示 。 


File Edit Assets | GameObject |， Component Window Help 


和 Hierarchy 于 Create Empty Child Alt+ Shift+N re 
SM ee >» DIGimosv|/erAl Vll|ie:s 
Main Camera 2D Object 
Directional Light Light 
Ww Player 
bluecargoship Audio 
Ul 


Particle System 

Camera 

Center On Children 
Make Parent 

Clear Parent 

Apply Changes To Prefab 
Break Prefab Instance 


Set as first sibling Ctrl+= 


Set as last sibling Ctrl+- 
Move To View Ctrl+Alt+F 
Align With View Ctrl+ Shift+F 
Align View to Selected 
外 Projec Ml ToggleActiveState Alt+ Shift+A 
Create ~ 、 - 
Yi7Favorites Assets » Scripts 
CN a 全 = ee 


图 3.19 ”将 摄像 机 的 视角 与 场景 (Scene) 视图 的 视角 调整 一 致 


经 过 视角 的 调整 ， 游 戏 看 起 来 已 经 好 多 了 ， 但 是 这 里 仍然 存在 一 
个 问题 : 当 游 戏 在 进行 过 程 中 时 ， 宇 宙 飞 船 并 没有 按照 预期 始终 面向 
着 光标 。 这 是 因为 当前 的 摄像 机 仍然 是 一 个 透视 (Perspective) 类 型 
的 ， 从 而 导致 了 屏幕 坐标 和 世界 坐标 之 间 进 行 转换 时 产生 了 和 意 想 不 到 
的 结果 。 为 了 修正 这 个 错误 ， 需 要 将 摄像 机 的 类 型 转化 为 正 交 

(Orthographic) 类 型 ， 这 个 类 型 的 摄像 机 是 一 个 专门 的 2D 类 型 的 摄像 
机 ， 因 此 没有 那 种 透视 的 纵深 感 。 首 先 在 场景 中 选中 摄像 机 ， 然 后 在 
检查 (Inspector) 面板 中 ， 将 Projection 的 值 由 透视 (Perspective) 设 定 
为 正 交 (Orthographic) ， 如 图 3.20 所 示 。 


€ Game = 三 | 日 Inspector 芋 Lighting 到 7 三 
16:9 7 Maximize i 以 Main Camera [Static v 
Tag | MainCamera * Layer Default 
“入 Transform i 加 大 
Position XI-0.18016¢€ Y :12.64989 ,2 -0.12962¢ 
Rotation X 90 YD Z 0 
Scale 其 让 1 3 Zil 
vi IM Camera 回 关 ， 
Clear Flags | Skybox 多 | 
Background . 
Culling Mask | Everything $ | 
projection [TCR 
Size Perspective | 
Clipping Planes = 
Orthographic 六 一 一 一 
Viewport Rect X0 he] 
Wi Hit1 
Depth -1 
Rendering Path | Use Player Settings 
Target Texture None (Render Texture) © 
Occlusion Culling I 
2 HDR 口 
号 | Tt TL [MGUI Layer 回 六 
了 看 以 Flare Layer 回 | 关 , 


7 VAudio Listener 辐 和 


图 3.20 ”将 摄像 机 的 类 型 改 为 正 交 (Orthographic) 


所 有 正 交 类 型 的 摄像 机 在 对 象 检查 (Inspector) 面板 中 都 有 一 个 
Size 属 性 ， 这 个 属性 是 透视 (Perspective) 摄像 机 所 不 具有 的 ， 它 决定 
了 游戏 世界 中 的 单元 对 应 着 游戏 屏幕 像素 的 数量 。 游 戏 世 界 的 单元 与 
游戏 屏幕 像素 最 好 是 一 一 对 应 的 关系 ， 这 样 贴图 就 会 以 正常 的 尺寸 显 
示 ， 同 时 光标 也 能 按照 预期 的 效果 运动 。 游 戏 设计 的 分 辨 率 应 该 是 全 
高 清 (Full HD) 的 ， 也 就 是 1920x1080， 屏 幕 高 宽 比 为 16:9。 对 于 这 个 
分 辨 率 ， 正 交 类 型 摄像 机 的 Size 属 性 值 应 该 为 5.4， 如 图 3.21 所 示 。 选 择 
这 个 值 的 原因 超出 了 本 书 的 讨论 范围 ， 但 是 这 里 可 以 给 出 一 个 公式 ， 


即 屏幕 的 高 (单位 为 像素 ) /2/100。 因 此 ， 这 里 就 是 1080 /2/100= 
5.4° 


:三 | @ Inspector 于 Lighting 到 ~ 三 
Maximize on | 区 Main Camera Lstatic v 
Tag MainCamera + | Layer Default + 
入 Transform 园 做 ， 
Position Xi-0,180168Yi12,.64989 |Z -0.12962¢ 
Rotation X90 lO Zi0 
Scale XIi1 | 十 Z|1 
”gh IM Camera 园 交 , 
Clear Flags | Skybox $ | 
Background sd 7 
Culling Mask | Everything WN 
mouwthonraphic 多 
Clipping Planes Near 0,3 
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Wil Hl 
Depth -1 
Rendering Path | Use Player Settings 4 
Target Texture None (Render Texture) © 
Occlusion Culling 
HDR 网 


A 


图 3.21 将 摄像 机 的 Size 属 性 设 定 为 5.4 以 保证 1:1 的 转换 率 


最 后 ， 人 确认 游戏 (Game) 选项 卡 的 视图 已 经 按照 16:9 的 比例 来 展 
示 游 戏 ， 如 果 当 前 比例 不 正确 ， 可 以 在 游戏 (Game) 选项 卡 进行 调 
整 ， 单 击 游戏 (Game) 选项 卡 上 方 左 侧 的 角 ， 然 后 在 弹出 的 下 拉 列 表 
框 中 选中 16:9， 如 图 3.22 所 示 。 


| € Game 
16:9 
Free Aspect 
5:4 
如 过 
二 :这 
16;10 


Standalone (1024x768) 


WP8 (800x480) 

WebGL (960x600) 
1280x720 

AndroidPhone (854x480) 
1920x1200 

Nexus7 (1280x800) 
Nexusl0 (1680x1050) 
Nexusl0 (1440x900) 
1024x600 

© 


现在 来 测试 这 个 游戏 的 


图 3.22 ”将 游戏 按照 16:9 的 比率 进行 演 


re 


运作 ， 


-三 | ©@ Inspector 于 Lighting 到 + 三 
7 Maximize on Play Mute audio St 时 区 Main Camera Dstatic 
Tag MainCamera + | Layer | Default + 
入 Transform 回头 
Position Xi-0,180168Y 12.64989 2Z -0,12962¢ 
Rotation Xi 90 YI0 2Z 0 
Scale Kil Yi zil 
7 MV Camera 加 回 关 , 
Clear Flags | Skybox 四 
Background IE > 
Culling Mask | Everything 本 
Projection | Orthographic 
Size 5,4 
Clipping Planes Near 0.3 
Far 1000 
Viewport Rect XI0 Yo 
Wi Hi1 
Depth -1 
Rendering Path | Use Player Settings | 
Target Texture None (Render Texture) © 
Occlusion Culling 
HDR 口 


示 


此 时 已 经 拥有 了 一 个 可 以 通过 按 


下 “W”*A”“S”D” 来 控制 运动 ， 通 过 移动 光标 来 控制 转向 的 手 害 飞船 对 


象 ， 如 图 3.23 所 示 ， 


做 。 


这 个 游戏 已 经 初 具 锥 形 了 ， 不 过 仍然 有 很 多 工作 要 


图 3.23 ”调整 船体 来 面向 光标 


现 阶段 的 宇宙 飞船 看 起 来 有 些 过 于 庞大 了 “。 不 过 这 一 点 很 容易 修 
改 ， 只 需要 调整 玩家 (Player) 的 “Scale” 属 性 。 这 里 将 “Scale” 属 性 里 面 
的 X、Y、2Z 的 值 都 设置 为 0.5， 如 图 3.24 所 示 。 不 过 不 管 如 何 修改 宇宙 飞 
船 的 尺寸 ， 这 里 都 存在 着 一 个 问题 ， 当 玩家 控制 着 飞船 时 ， 飞 船 可 以 


自由 地 飞 到 屏幕 的 边界 之 外 。 这 束 意 味 着 在 玩 游 戏 时 ， 飞 船 很 有 可 能 
飞 出 边界 ， 然 后 在 游戏 中 消失 ， 而 且 再 也 不 出 现 。 实 际 上 我 们 希望 的 
是 相机 一 直 保 持 静 止 的 同时 ，Player 对 象 的 移动 一 直 在 摄像 机 的 视野 
中 ， 而 且 它 永远 都 不 会 超出 这 个 视野 。 


天 Ss Animat | € cam 二 | @ Inspector | 下 Lighting = 
| | shaded 四 - m 16:9 m lay M dio st 吨 回 TPlayer 口 static v 
Tag | Player 4] Layer | Defaut +| 
VT Transform 次 
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rag 5 
Angular Drag 0.05 
Use Gravity 
Is Kinematic 口 
Interpolate [ | 
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Is Trigger 口 
Material None (Physic Material) 


图 3.24 重新 定义 玩家 (Player) 的 大 小 


这 里 有 很 多 种 方法 可 以 实现 游戏 对 象 活动 范围 的 锁定 ， 使 用 最 多 
的 是 通过 编码 来 实现 。 其 中 一 种 方法 就 是 将 玩家 (Player) 的 位 置 值 限 
定 在 一 个 特定 的 范围 内 ， 在 最 大 值 和 最 小 值 之 间 。 下 面 的 代码 示例 3.2 
是 一 个 名 为 “BoundsLock” 的 C# 类 ， 这 个 脚本 应 该 依附 在 玩家 (Player) 
上 上: 


代码 示例 3.2: 


using UnityEngine; 
using System.Collections; 
// 


public class BoundsLock : MonoBehaviour 


private Transform ThisTransform = nulil; 


pu 
pu 


// 
MAe) 


// 
MAe) 


{ 


blic Vector2 HorzRange = Vector2.zero; 
blic Vector2 VertRange = Vector2.zero; 


初始 化 函数 
id Awake () 


ThisTransform = GetComponent(); 


在 每 一 帧 都 会 调用 Update 
id LateUpdate () 


// 限 制 它 的 位 置 

ThisTransform.position = new Vector3(Mathf.Clamp 
(ThisTransform.position.x, HorzRange.x, HorzRange.y), 

ThisTransform.position.y, 

Mathf.Cclamp(ThisTransform.position.z, VertRange.x, 
VertRange.y)); 


下 面 对 代 码 示例 3.2 进 行 总 结 。 


sl 所 有 的 FixedUpdate() 和 Update() 函 数 调用 之 后 执行 
的 ， 这 个 函数 允许 一 个 对 象 在 被 泻 染 到 屏幕 之 前 修改 它 的 位 置 。 

天 于 LateUpdate 芳 数 的 更 多 信息 可 以 访问 
http://docs.Unity3d.com/ScriptReference/MonoBehaviour.LateUpdate.h 


tml° 

函数 Mathf.Clamp0 确 你 一 个 值 的 范围 位 于 给 定 区 间 之 间 ， 这 个 区 
间 由 给 定 的 最 大 值 和 最 小 值 确定 。 

在 使 用 BoundsLock 脚 本 之 前 ， 需 要 将 它 拖 动 到 Player 对 象 上 ， 然 后 
指定 最 大 值 和 最 小 值 的 确切 数值 ， 如 图 3.25 所 示 。 这 些 值 是 由 游戏 
世界 的 坐标 决定 的 ， 可 以 将 游戏 物体 移动 到 摄像 机 所 能 观察 的 边 

绿 ， 然 后 根据 当前 物体 的 Transform 组 件 来 确定 这 两 个 值 。 


工 上 加 capsule Collider 辐 加 
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Add Component 


rt J | AddComponent | 4 


| Bake paused in play mode | 


图 3.25” 对 “Bounds Lock” 进 行 设 定 


单 击 工具 栏 上 的 “Play” 按 钮 对 游戏 进行 测试 。 现 在 玩家 宇宙 飞船 始 
终 都 在 视野 中 飞行 ， 而 不 会 超出 屏幕 的 边界 。 


3.7 ”生命 值 


玩家 宇宙 飞船 和 敌人 都 需要 生命 值 。 生 命 值 古 一 个 用 来 判断 场景 
中 角色 是 否 存 在 的 标准 ， 通 汝 这 个 值 的 区 间 为 0~100。0 意 味 着 死亡 ， 
而 100 意 味 着 最 健康 的 状态 。 虽 然 生命 值 对 于 每 一 个 实例 都 是 独立 的 
(玩家 宇宙 飞船 有 有 自己 的 生命 值 ， 而 每 个 敌人 都 有 上 自己 独立 的 生命 
值 ，， 但 是 所 有 实例 的 生命 值 都 有 很 多 共同 之 处 ， 因 此 可 以 专门 来 编 
写 一 个 生命 值 的 类 ， 然 后 将 所 有 需要 生命 值 的 对 象 都 附加 一 个 这 样 的 


类 。 代 码 示例 3.3 束 古 这 样 的 一 个 类 ， 它 应 该 附加 到 玩家 和 所 有 的 本 人 
或 者 其 他 需要 生命 值 的 对 象 上 。 


代码 示例 3.3: 


using UnityEngine; 
using System.Collections; 


public class Health : MonoBehaviour 


{ 
public GameObject DeathParticlesPrefab = null; 


private Transform ThisTransform = nulil; 
public bool ShouldDestroyOnDeath = true; 
//--- 

void Start() 


ThisTransform = GetComponent(); 


public float HealthPoints 


{ 
get 


{ 
return _HealthPoints; 


} 


set 
_HealthPoints = value; 
if(_HealthPoints <= 0) 


SendMessage("Die", 
SendMessageOptions.DontRequireReceiver ); 


If(DeathParticlesPrefab != null) 
Instantiate(Deathparticlesprefab, 
ThisTransform.position, ThisTransform.rotation); 


if(ShouldDestroyOnDeath) 
Destroy(gameObject ); 


[SerializeField] 
private float _HealthPoints = 100f; 


下 面 对 代 码 示 例 3.3 进 行 总 结 。 


Health 类 中 通过 “ HealthPoints” 私 有 变量 来 控制 对 象 的 生命 值 ， 这 
个 变量 可 以 通过 “HealthPoints” 属 性 来 访问 ， 该 属性 具有 一 个 Get 访 
问 妖 和 一 个 Set 访 问 癸 。Get 访 问 絮 用 来 读 取 “HealthPoints” 的 值 ， 
Set 访 问 器 用 来 设置 “HealthPoints” 的 值 。 

“_HealthPoints” 变 量 被 声明 为 “SerializeField” (序列 化 字段 ) ， 这 
样 束 可 以 在 Inspector 面 板 中 看 到 这 个 值 。 在 运行 和 调试 代码 上 时， 可 
以 随时 地 观察 到 玩家 的 当前 生命 值 。 

Health 类 是 一 个 典型 的 事件 驱动 编程 例子 ， 是 因为 这 个 类 会 在 
Update() 函 数 中 不 断 地 去 检查 对 象 生命 值 的 状态 。 当 对 象 生命 值 下 
降 到 0 时 ， 束 意味 着 对 象 死 亡 。 对 死亡 的 检查 是 在 C# 属 性 中 的 Set 
方法 中 进行 的 ， 这 样 做 的 原因 在 于 Set 方 法 中 是 唯一 的 health 值 不 会 
发 生变 化 的 地 方 。 这 束 意 味 着 Unity 可 以 在 每 一 帧 都 太 省 大 量 的 工 
作 。 

Health 类 中 使 用 了 SendMessage() 芳 数 ， 这 个 函数 允许 通过 名 字 来 调 
用 依附 在 对 象 上 的 任何 组 件 所 提供 的 公共 函数 。 在 这 个 游戏 中 ， 
调用 的 函数 束 是 一 个 名 为 “Die” 的 函数 《如果 对 象 的 组 件 上 提供 了 
这 个 函数 ) 。 如 果 对 象 的 组 件 上 不 存在 名 字 匹 配 的 函数 ， 那 么 就 
不 会 执行 任何 函数 。 这 是 一 种 轻松 快捷 地 调用 对 象 上 目 定 义 行 为 
的 方法 。 这 种 方法 是 与 类 型 无 天 的 。 但 是 ，SendMessage0 函 数 的 
缺点 也 很 明显 ， 它 的 内 部 会 调用 一 个 名 为 Reflection0 的 过 程 ， 这 个 
过 程 十 分 耗费 资源 ， 而 且 执行 缓慢 。 基 于 这 个 原因 ， 除 了 触发 死 


亡 事 件 或 者 类 似 事件 之 外 ， 很 少 调用 SendMessage0 函 数 ， 因 为 这 
些 事件 都 不 是 频 华 发 生 的 。 更 多 关于 SendMessage() 函 数 的 信息 可 
以 在 Unity 的 在 线 文 档 http://docs.Unity3d.com/Script 
Reference/GameObject.Send Message.html 处 找到 。 

当 生 命 值 降 到 0 以 下 时 ， 会 触发 死亡 条 件 ， 脚 本 会 触发 一 个 代表 死 
亡 的 粒子 系统 ， 这 时 会 出 现 一 个 对 象 死 亡 的 效果 。 


当 Health 脚 本 附加 到 玩家 宇宙 飞船 上 之 后 ， 它 在 检查 (Inspector) 
面板 以 一 个 组 件 的 形式 出 现 。 这 个 组 件 包 含 一 个 名 为 “Death Particles 
Prefab” 的 属性 ， 该 属性 是 可 选 的 〈 可 以 是 空 的 ) ， 当 对 象 死 亡 的 时 
候 ， 播 放 一 个 粒子 系统 的 效果 。 有 了 这 个 属性 之 后 ， 在 设置 对 象 死 亡 
时 的 爆炸 或 者 鲜血 四 溅 的 效果 时 束 容 易 了 很 多 ， 如 图 3.26 所 示 。 


Gl MPlayer Controller (Script) 回 六 
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GM Health (Script) 辐 加 
Script Health © 
Death Palticles Prefz None (Game Object) KR © 
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Health Points 100 


图 3.26 ”附加 的 生命 值 (Health) 组 件 


3.8 ”死亡 和 粒子 系统 


在 这 个 双 轴 游戏 中 ， 玩 家 和 敌人 都 是 宇宙 飞船 。 当 它们 受到 伤害 

上 时， 就 会 爆炸 成 为 一 个 火球 ， 只 有 这 种 效果 才 足 够 真实 。 为 了 实现 这 
种 爆炸 效果 ， 可 以 使 用 粒子 系统 。 粒 子 系统 指 的 是 一 种 特殊 的 对 象 ， 
它 有 两 个 主要 部 分 组 成 ， 管 道 (或 者 发 射 器 ) 和 粒子 。 发 射 器 

(Emitter) 是 指 在 游戏 世界 里 产生 或 者 生成 新 粒子 的 部 分 ， 粒 子 

(Particles) 指 的 是 产生 之 后 沿 着 特有 的 轨迹 运行 的 小 物体 或 者 小 碎 
片 , 总 之， 粒子 系统 是 在 游戏 中 制造 韧 、 雪 、 筋 、 闪 光 、 爆 炸 等 效果 
的 最 佳 选 择 。 可 以 使 用 菜单 选项 中 的 “GameObject | Particle System” 来 
从 头 开始 创造 目 己 的 粒子 系统 ， 或 者 使 用 一 些 系 统 Unity 中 预 置 的 粒子 
系统 。 在 这 个 游戏 中 ， 要 使 用 一 些 预 置 的 粒子 系统 (Particle 
System) 。 首 先 ， 在 应 用 程序 菜单 中 选中 “Assets | Import Package | 
ParticleSystems”， 如 图 3.27 所 示 。 
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图 3.27 ”向 项 目 中 导入 一 个 粒子 系统 (Particle System) 


当 Import 对 话 框 出 现 之 后 ， 保 持 所 有 原 有 的 设置 不 变 ， 然 后 单 
击 “*Import”" 按 钮 ， 导 入 包括 所 有 粒子 系统 在 内 的 完整 资源 包 。 现 在 在 项 
目 (Project) 面板 里 的 “Standard Assets | ParticleSystems | Prefabs” 文 件 
夹 中 就 增加 了 一 个 “ParticleSystems” 文 件 来， 如 图 3.28 所 示 。 可 以 通过 
将 所 有 的 预 设 体 拖 上 忠 到 场景 中 来 测试 这 些 粒 子 系统 的 效果 。 注 意 ， 
有 在 场景 中 碗 中 一 个 粒子 系统 ， 才 可 以 看 到 它 的 预览 效果 。 
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图 3.28 ”向 项 目 (Project) 面板 里 导入 粒子 系统 (Particle System) 


如 图 3.28 所 示 ， 默 认 的 资源 包 中 包含 了 一 个 爆炸 (Explosion) 系 
统 ， 这 绝对 是 一 个 好 消息 。 为 了 测试 这 个 爆炸 系统 ， 可 以 将 爆炸 
系统 拖 归 到 场景 中 ， 按 下 工具 栏 上 的 “Play” 键 。 现 在 
经 完成 了 大 部 分 工作 ， 不 过 还 差 一 点 。 现 在 已 经 看 到 了 一 个 十 分 合 
ee 然后 可 以 将 这 个 系统 拖 上 忠 到 对 象 检 查 (Inspector) 面板 
中 的 Health 组 件 的 “Death Particles Prefab” 属 性 中 。 这 个 粒子 系统 的 工作 


流程 就 是 ， 当 有 玩家 或 者 敌人 死亡 时 ， 将 会 触发 爆炸 系统 ， 创 造 出 一 
个 爆炸 效果 。 但 是 这 个 粒子 系统 永远 都 不 会 被 销毁 。 这 征 一 个 缺陷 ， 
因为 每 当场 景 中 的 一 个 敌人 有 死亡， 就 会 产生 一 个 新 的 粒子 系统 。 而 当 
大 量 的 敌人 死亡 后 ， 现 场 将 充满 了 废弃 的 粒子 系统 ， 这 样 对 系统 的 性 
能 和 存储 来 说 部 是 不 利 的 。 设 想 一 下 满 场 景 都 是 无 用 的 粒子 系统 ， 将 
会 给 系统 带 来 多 大 的 负担 。 因 此 必须 修正 这 个 爆炸 系统 ， 创 造 一 个 新 
的 适合 游戏 的 预 设 体 。 为 了 实现 这 个 功能 ， 需 要 先 将 当前 的 爆炸 系统 
拖 虑 到 场景 中 ， 并 将 其 定位 到 游戏 世界 的 原点 ， 如 图 3.29 所 示 。 
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图 3.29 ”将 要 修改 的 爆炸 系统 拖 虚 到 场景 


接 下 来 ， 必 须 重新 对 粒子 系统 (Particle System) 进行 定义 ， 这 样 
粒子 系统 (Particle System) 在 实例 化 过 后 很 快 就 会 被 销毁 。 经 过 这 样 
的 安排 ， 每 一 个 产生 的 爆炸 效果 最 终 都 会 销毁 。 为 了 使 一 个 对 象 能 够 


在 一 定时 间 后 自我 销毁 ， 需 要 创建 一 个 新 的 C# 脚 本 ， 把 这 个 脚本 命名 
为 TimeDestroycs， 代 码 示 例 3.4 中 给 出 了 详细 的 内 容 。 


代码 示例 3.4: 


using UnityEngine; 
using System.Collections; 


public class TimedDestroy : MonoBehaviour 
public float DestroyTime = 2f; 


// 初 始 化 函数 
void Start () 


Invoke("Die", DestroyTime); 


void Die () 


Destroy(gameObject ) ; 


下 面 对 代 码 示例 3.4 进 行 几 点 总 结 。 


。 TimedDestroy 类 会 在 经 过 一 定 的 时 间 间 隔 (DestroyTime) 后 销毁 
它 所 附加 的 对 象 。 

。 Invoke0) 函 数 会 在 Start 事 件 中 调用 ， 它 会 在 特定 的 时 间 间 隔 结束 后 
执行 一 次 指定 名 称 的 函数 ， 注 意 仅仅 执行 一 次 ， 时 间 以 秒 为 单 
位 。 

。 跟 SendMessage0) 函 数 一 样 ，Invoke0 函 数 也 需要 依赖 于 Reflection 。 
基于 这 个 原因 ， 为 了 你 证 系统 的 性 能 ， 应 该 谍 慎 使 用 该 贸 数 。 


。 在 经 过 了 指定 时 间 的 间隔 之 后 ，Die0 函 数 将 会 被 Invoke(0) 函 数 所 调 
用 ， 以 此 来 销毁 游戏 对 象 〈 例 如 一 个 粒子 系统 ) 。 


现在 将 TimedDestroy 脚 本 拖 动 到 场景 中 爆炸 粒子 系统 上 ， 然 后 按 下 
工具 栏 上 的 “Play” 键 完成 对 代码 的 测试 ， 经 过 一 定 的 时 间 间 隅 之 后 ， 对 
象 就 会 被 销毁 ， 在 对 象 检 查 (Inspector) 面板 中 可 以 修改 这 个 时 间 间 隔 
的 值 ， 如 图 3.30 所 示 。 
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图 3.30” 问 一 个 爆炸 粒子 系统 添加 TimedDestroy 脚 本 


TimedDestroy 脚 本 应 该 在 时 间 到 期 时 移 除 爆炸 粒子 系统 。 现 在 需 创 
建 一 个 新 的 、 完 全 独立 的 预 设 体 ， 为 了 实现 这 一 点 ， 首 先 在 层次 
(Hierarchy) 面板 上 将 爆炸 系统 重 命名 为 ExplosionDestroy， 然 后 将 这 


个 系统 从 层次 (Hierarchy) 面板 上 拖 电 到 项 目 (Project) 面板 上 的 
Prefabs 文 件 夹 中 。Unity 会 自动 地 创建 一 个 新 的 预 设 体 ， 来 表示 修改 以 
后 的 粒子 系统 ， 如 图 3.31 所 示 。 
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图 3.31 创建 一 个 爆炸 预 设 体 


现在 ， 将 新 创建 的 预 设 体 拖 动 到 玩家 (Player) 的 对 象 检查 
(Inspector) 面板 中 Health 组 件 的 “Death Particle System” 位 置 。 这 样 做 


确保 了 当 玩 家 (Player) 对 象 死亡 的 时 候 ， 爆 炸 预 设 体 将 被 实例 化 ， 如 
图 3.32 所 示 。 
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图 3.32 ”对 Health 脚 本 进行 配置 


现在 开始 运行 这 个 游戏 ， 会 发 现 无 法 启动 玩家 的 死亡 事件 ， 因 此 
无 法 测试 粒子 系统 是 否 能 正常 产生 。 在 这 个 场景 中 不 存在 任何 能 对 玩 
家 造成 伤害 的 敌人 ， 同 样 也 无 法 从 检查 (Inspector) 面板 将 玩家 的 
Health 值 手动 设置 为 0。 可 以 在 Health 脚 本 中 添加 一 些 用 来 测试 死亡 的 功 
能 ， 当 空格 键 按 下 时 ， 就 会 触发 死亡 事件 。 代 码 示 例 3.5 中 给 出 了 修改 
之 后 的 Health 脚 本 。 


代码 示例 3.5: 


using UnityEngine 
using System,Collections ; 
// 


pu 
{ 


blic class Health : MonoBehaviour 


public GameObject DeathParticlesPrefab = null; 
private Transform ThisTransform = null; 

public bool ShouldDestroyOnDeath = true; 

//--- 

void Start() 


ThisTransform = GetComponent ( ); 


} 
//---- 
public float HealthPoints 
{ 
get 
{ 
return _HealLthPoints ， 
} 
set 
_HealthPoints = value; 
if(_HealthPoints <= 0) 
SendMessage("Die", 
SendMessageOptions.DontRequireReceiver ); 
If(DeathParticlesPrefab != null) 
Instantiate(Deathparticlesprefab, 
ThisTransform.position, ThisTransform.rotation); 
if(ShouldDestroyOnDeath)Destroy(gameObject); 
} 
} 
} 
//--- 


void Update() 
{ 
if(Input.GetKkeyDown (KeyCode.Space)) 
HealthPoints = 0; 


[SerializeField] 
private float _HealthPoints = 100f; 


再 运行 一 下 游戏 ， 注 意 ， 此 时 游戏 中 的 Health 脚 本 已 经 被 修改 过 
了 ， 可 以 随时 在 键盘 上 按 下 空格 键 来 触发 玩家 的 死亡 事件 。 当 按 下 了 
空格 键 以 后 ， 玩 家 (Player) 对 象 就 会 被 销毁 ， 然 后 粒子 系统 束 会 
生 ， 当 指定 时 间 耗 尽 之 后 ， 粒 子 系统 也 会 销毁 。 现 在 已 经 有 了 一 个 十 
分 好 玩 的 可 控制 对 象 了 ， 这 个 对 象 也 有 了 生命 值 和 死亡 的 功能 ， 如 图 
3.33 所 示 ， 一 切 看 起 来 都 不 错 。 
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图 3.33 ”触发 爆炸 粒子 系统 


3.9 敌人 


接 下 来 的 步 又 就 是 要 为 玩家 创建 可 以 用 来 射击 和 挫 贤 的 目标 了 ， 
但 是 这 些 目 标 同 时 也 可 能 会 挫 贤 玩家 ， 也 就 是 说 这 些 目 标 就 是 游戏 中 
的 敌人 。 这 些 敌 人 具有 太 衬 船 的 外 形 ， 散 布 在 整个 场景 中 ， 而 且 每 隔 
一 定 的 时 间 间 隔 束 会 产生 一 些 新 的 夏 人 。 这 些 敌 人 会 在 场景 中 跟随 着 
玩家 (Player) 对 象 ， 而 且 逐 渐 逼 近 。 从 本 质 上 说 ， 每 个 敌人 都 应 该 是 


多 种 复杂 行为 协同 工作 的 产物 ， 因 此 ， 这 些 复杂 行为 都 应 该 由 各 目 独 
立 的 脚本 实现 ， 下 面 对 它 们 逐个 进行 介绍 


Health: 所 有 的 敌人 都 文 持 生命 值 的 功能 ， 每 一 个 敌人 在 场景 出 现 
时 都 具有 一 定 的 生命 值 ， 当 它们 的 生命 值 下 降 到 0 以 下 时 ， 就 会 被 
销毁 ， 之 前 已 经 为 这 个 功能 创建 了 一 个 Health 脚 本 。 

Movement: 每 一 个 敌人 都 会 处 在 不 断 的 运动 中 ， 按 照 运 动 的 轨迹 
向 前 直行 。 也 就 是 说 ， 每 一 个 敌人 都 会 持续 地 沿 着 它 的 方向 前 

进 o 

Turning: 每 一 个 敌人 都 会 转动 ， 从 而 保持 一 直面 对 着 Player 对 象 ， 
即使 Player 对 象 一 直 在 运动 。 将 Turning 和 Movement 功 能 相 结 合 ， 
就 可 以 保证 政和 人 永远 都 朝 着 Player 对 象 运动 。 

Scoring: 每 当 一 个 敌人 销毁 的 时 候 ， 束 会 给 予 玩家 一 定 的 奖励 ， 
也 就 是 说 ， 敌 人 的 死亡 会 增加 玩家 的 得 分 。 

Damage: 每 一 个 敌人 都 会 通过 磁 接 对 Player 对 象 造成 伤害 ， 所 有 
的 敌人 不 能 射击 ， 但 是 当 它 们 靠近 Player 对 象 时 ， 就 对 其 造成 伤 
害 o 


现在 已 经 明确 了 敌人 应 该 具有 的 功能 ， 接 下 来 就 在 场景 中 创建 一 


个 敌人 。 首 先 制作 一 个 具体 的 敌人 ， 然 后 利用 这 个 敌人 再 创建 一 个 预 

设 体 ， 利 用 这 个 预 设 体 就 可 以 实例 化 出 来 很 多 敌人 。 首 先 选 中 场景 中 

的 玩家 (Player) 角色 ， 然 后 按 下 “Ctrl+D” 组 合 键 ， 或 者 从 应 用 程序 菜 

单 上 依次 选中 “Edit | Duplicate”， 这 样 就 可 以 创建 出 第 二 个 玩家 
(Player) 对 象 ， 如 图 3.34 所 示 。 
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图 3.34 ”对 Player 对 象 进行 复制 


将 这 个 对 象 命名 为 “Enemy”， 并 确保 对 象 的 Tag 属 性 值 不 
是 “Player"， 在 整个 场景 中 只 能 有 一 个 对 象 的 Tag 和 名 字 是 “Player” ， 当 然 
这 个 对 象 瓯 是 真正 的 “Player” 对 象 。 另 外 ， 需 要 和 暂时 停止 所 有 Player 对 
象 的 功能 ， 以 便 能 将 所 有 的 注意 力 都 放 在 敌人 (Enemy) 对 象 上 ， 如 图 
3 所 示 
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图 3.35 将 敌人 (Enemy) 对 象 上 的 Tag 属 性 去 除 Player 


首先 选中 复制 出 来 的 敌人 (Enemy) 对 象 的 Sprite 子 对 象 ， 在 对 象 
检查 (Inspector) 面板 中 选中 “Sprite Renderer” 组 件 ， 为 其 选中 一 个 新 
的 图 片 精灵 对 象 。 为 敌人 (Enemy) 角色 选择 一 个 墨 颜色 的 飞船 ， 这 个 
图 片 精灵 就 会 在 视图 中 对 对 象 进行 更 新 ， 如 图 3.36 所 示 。 
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图 3.36 ”为 “Sprite Renderer” 组 件 选 择 一 个 图 片 精灵 对 象 


在 将 图 片 精灵 转换 成 一 个 敌人 (Enemy) 角色 之 后 ， 需 要 修 
改 “Rotation" 值 ， 来 保证 图 片 精灵 与 父 对 象 对 齐 ， 尤 其 是 要 注意 图 片 精 
灵 的 朝 问 要 与 父 级 的 前 同 癌 量 相同 ， 如 图 3.37 所 示 。 
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图 3.37 修改 敌人 (Enemy) 图 片 精 灵 的 Rotation 属性 


选中 敌人 (Enemy) 的 父 级 对 象 ， 然 后 移 
除 “Rigidbody”“PlayerController” 以 及 “BoundsLock” 等 组 件 ， 记 
住 ，“Health* 组 件 要 保留 下 来 ， 如 图 3.38 所 示 ， 因 为 在 游戏 设计 中 ， 敌 
人 也 需要 一 个 生命 值 。 另 外 ， 要 对 胶 寺 碰撞 体 组 件 的 体积 进行 调整 ， 
以 便 大 小 更 好 地 适合 敌人 (Enemy) 对 象 。 
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图 3.38 ”调节 “Enemy” 图 片 精灵 的 Rotation 值 


接 下 来 ， 开 始 为 畴 人 (Enemy) 对 象 编码 ， 重 点 是 敌人 (Enemy) 
对 象 的 运动 。 敌 人 (Enemy) 对 和 象 应 该 以 一 个 指定 的 速度 不 断 地 向 前 运 
动 。 为 了 实现 这 个 功能 ， 需 创建 一 个 名 为 “mover.cs” 的 脚本 文件 。 这 个 
脚本 文件 将 会 被 附加 到 敌人 (Enemy) 对 象 上 。 下 面 的 代码 示例 3.6 给 
出 了 这 个 功能 的 实现 代码 。 


代码 示例 3.6: 


using UnityEngine 
using System,Collections 


public class Mover : MonoBehaviour 


{ 


private Transform ThisTransform = nulil; 
public float MaxSpeed = 10f; 


// 初始 化 部 分 
void Awake () 


ThisTransform = GetCcomponent<Transform>(); 


// 每 帧 调用 一 次 Update 函 数 
void Update () 


ThisTransform.position += ThisTransform.forward * MaxSpeed * 
Time.deltaTime; 


对 代码 示例 3.6 做 以 下 总 结 。 


Mover 脚 本 中 实现 了 对 象 按照 一 个 特定 的 速度 (每 秒 运动 
MaxSpeed) 朝 着 它 的 前 向 向 量 的 方向 运动 ， 为 了 实现 这 个 功能 ， 
需要 使 用 Transform 组 件 。 

。 Update 函 数 负责 更 新 对 象 的 位 置 。 简 而 言 之 ， 它 使 用 前 向 向 量 
Forward 与 对 象 速度 的 乘积 再 加 上 当前 的 位 置 就 可 以 得 出 对 象 的 下 
一 个 位 置 。Time.deltaTime 值 是 用 来 产生 一 个 与 游戏 帧 速率 无 关 的 
效果 ， 这 样 运动 的 单位 就 是 每 秒 ， 而 不 是 每 帧 。 关 于 deltaTime 更 
详细 的 信息 可 以 访问 Unity 的 在 线 文 档 http://docs.Unity3d.com/Script 
Reference/Time-deltaTime.html 来 获得 。 


经 党 对 代码 进行 测试 是 一 个 很 好 的 习惯 。 单 击 工具 栏 上 的 “Play” 键 
运行 代码 ， 游 戏 中 的 敌人 (Enemy) 可 能 运动 太 慢 或 者 太 快 。 如 果 出 现 
了 这 种 情况 ， 就 停止 测试 返回 到 游戏 设计 中 来 。 选 中 场景 中 的 敌人 


(Enemy) ， 从 对 象 检 查 (Inspector) 面板 处 的 Mover 组 件 中 修改 Max 
Speed 的 值 ， 如 图 3.39 所 示 。 
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图 3.39 ”修改 敌人 (Enemy) 对 象 的 速度 


除了 沿 着 直线 运动 之 外 , “Enemy” 对 象 还 应 该 一 直 都 朝 着 玩家 
(Player) 对 象 运动 ， 为 了 实现 这 个 功能 ， 需 要 编写 另外 一 个 和 “Player 
Controller" 脚 本 功能 相 类 似 的 脚本 文件 。 当 玩家 (Player) 对 象 转动 面 
向 光标 的 时 候 ， 敌 人 (Enemy) 对 象 也 应 该 转动 方向 去 面向 玩家 
(Player) 对 象 ， 该 功能 通过 代码 实现 ， 将 这 部 分 代码 保存 为 一 个 名 


为 “ObjFace.cs” 的 新 脚本 文件 。 这 个 脚本 将 会 被 附加 到 敌人 (Enemy) 
对 象 上 ， 如 代码 示例 3.7 所 示 。 


代码 示例 3.7: 


using UnityEngine; 
using System.Collections; 


public class ObjFace : MonoBehaviour 


{ 


public Transform ObjToFollow = null; 
public bool FollowPlayer = false,; 
private Transform ThisTransform = nulil; 


// 初始 化 画 数 
void Awake () 


// 获 得 当前 组 件 的 Transform 属 性 
ThisTransform = GetComponent(); 


// 应 该 面 对 Player 对 象 
if(!FollowPlayer)return; 


// 获 得 Player 对 象 的 Transform 属 性 
GameObject Playerobj = 

GameObject .FindGameObjectwithTag("Player"); 
if(PlayerOobj != null) 

ObjToFollow = PlayerO0bj.GetComponent( ); 


上 


// Update 画 数 应 该 在 每 一 帧 调用 一 次 
void Update () 


// 跟 随 目标 对 象 
if(ObjToFollow==null)return; 


// 获 取 跟 随 对 象 的 方向 
Vector3 DirToobject = ObjToFollow.position - 
ThisTransform.position， 


if(DirToObject != Vector3.zero ) 
ThisTransform.localRotation = Quaternion.LookRotation 
(DirToObject.normalized,Vector3.up); 


对 代码 示例 3.7 进 行 如 下 分 析 和 总 结 。 


ObjFace 芳 数 应 该 经 芝 转 动 一 个 对 象 ， 这 样 这 个 对 象 的 前 进 向 量 才 
能 一 直 指 向 场景 中 的 目标 。 

在 Awake 事 件 中 ， 调 用 了 FindGameObjectWithTag 函 数 通 过 Tag 名 来 
进行 检索 对 象 ， 在 整个 场景 中 只 有 一 个 对 象 的 Tag 名 为 “Player”， 

这 个 对 象 应 该 就 是 玩家 (Player) 宇宙 飞船 对 象 。 玩 家 (Player) 
对 象 的 位 置 就 是 Enemy” 对象 的 目标 。 

系统 会 在 每 一 帧 都 自动 调用 Update0 函 数 ， 然 后 产生 一 个 对 象 当 前 
位 置 与 目的 位 置 的 位 移 癌 量 ， 这 个 向 量 表示 这 个 对 象 应 该 行进 的 
方 同 。 玉 数 Quaternion.Look Rotation(0 会 接收 这 个 癌 量 ， 然 后 按照 
它 调 整 对 象 前 同 同 量 的 方向 。 这 样 吏 保证 了 对 象 始终 面 问 着 目 的 
地 ， 关 于 LookRotation0 函 数 的 详细 内 容 可 以 参阅 Unity 的 在 线 文档 
http://docs.Unity3d.com/ScriptReference/Quaternion.Look 


Rotation.html ° 


在 测试 这 段 代 码 之 前 ， 一 定 要 先 确认 场景 中 的 Tag 属 性 设置 
为 "Player 的 对 象 已 经 被 启用 ， 敌 人 也 和 这 个 对 象 有 一 定 的 距离 。 在 对 
象 检查 〈Inspector) 面板 中 找到 ObjFace 组 件 的 Follow Player 复 选 框 并 勾 
选 上 。 当 完成 这 个 操作 之 后 ， 敌 人 就 会 一 直面 向 着 “Player” 对 象 运 动 
了 ， 如 图 3.40 所 示 。 
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图 3.40 敌人 飞船 一 直面 向 着 玩家 (Player) 对 象 运动 


当 敌 人 与 玩家 (Player) 对 象 发 生 碰撞 之 后 ， 就 会 对 玩家 
(Player) 对 象 造成 伤害 ， 甚 至 可 能 会 杀 死 玩家 (Player) 对 象 。 为 了 
实现 这 个 设计 ， 必 须 可 以 侦 测 到 敌人 与 玩家 (Player) 对 象 之 间 的 碰 
撞 。 选 中 代表 敌人 的 敌人 (Enemy) 对 象 ， 然 后 在 检查 〈Inspector) 面 
板 中 的 胶 赛 碰撞 体 (Capsule Collider) 组 件 中 你 选 上 “Is Trigger” 复 选 


框 。 通 过 这 样 的 调整 之 后 ， 敌 人 (Enemy) 对 象 就 变 成 了 一 个 虚 体 ， 可 
以 穿 过 玩家 (Player) ， 但 是 不 会 引起 碰撞 ， 如 图 3.41 所 示 。 
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图 3.41 将 敌人 (Enemy) 对 象 的 碰撞 器 改 为 一 个 触发 器 (Trigger) 


接 下 来 创建 一 个 用 来 检测 碰撞 的 脚本 ， 这 段 脚 本 也 能 处 理 在 碰撞 
发 生 时 对 玩家 (Player) 对 象 造 成 的 伤害 ， 代 码 示例 3.8 给 出 了 详细 内 容 
(ProxyDamage.cs) ， 这 段 代码 附加 到 敌人 (Enemy) 对 象 上 。 


代码 示例 3.8: 


using UnityEngine 
using System,Collections ; 
// 


public class ProxyDamage : MonoBehaviour 


// 每 秒 造成 的 伤害 
public float DamageRate = 10f; 


void OnTriggerStay(Collider Col) 
Health H = Col.gameObject.GetComponent<Health>(); 


if(H == null)return; 


H.HealthPoints -= DamageRate * Time.deltaTime; 


下 面 对 代 码 进行 总 结 。 


脚本 ProxyDamage 应 该 附加 到 敌人 (Enemy) 对 象 上 ， 这 个 脚本 将 
会 通过 Health 组 件 来 处 理 任何 碰撞 产生 的 伤害 值 。 

当 两 个 对 象 产生 重合 状态 的 时 候 ， 每 隔 一 帧 就 会 调用 一 次 
OnTriggerStay 事 件 ， 在 这 个 函数 中 ，Health 组 件 的 HealthPoints 值 会 
以 DamageRate 值 (这 个 值 就 是 每 秒 的 伤害 ) 递减 。 


当 将 ProxyDamage 脚 本 附加 到 “Enemy” 上 面 之 后 ， 就 可 以 通过 在 对 
象 检查 〈Inspector) 面板 中 的 Proxy Damage 组 件 来 设置 *Damasge 
Rate” 的 值 。 这 个 值 表示 当 磁 撞 发 生 时 ，“Player 对 象 每 秒 钟 受到 的 伤 
害 。 为 了 加 大 游戏 的 难度 ， 将 这 个 值 设 置 为 200， 如 图 3.42 所 示 。 
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图 3.42 ”在 “Proxy Damage” 组 件 设置 “Damage Rate” 的 值 


运行 这 个 游戏 来 测试 一 下 ， 按 下 工具 栏 上 的 “Play” 键 ， 然 后 试 着 让 
玩家 (Player) 对 象 和 敌人 (Enemy) 对 象 之 间 发 生 一 次 碰撞 。 一 秒 钟 
之 后 ， 玩 家 (Player) 对 象 就 会 被 摧毁 。 一 切 都 按照 设计 进行 着 ， 不 过 
为 了 使 游戏 充满 挑战 性 ， 还 需要 添加 更 多 的 敌人 。 


3.10 ”批量 产生 敌人 


为 了 使 关卡 变 得 更 有 趣 ， 更 有 挑战 性 ， 需 要 不 止 一 个 敌人 
(Enemy) 。 实 际 上 ， 对 于 一 个 游戏 来 说 ， 只 要 它 没有 结束 ， 就 应 该 不 
断 地 产生 和 天 人 。 ee 。 从 本 质 来 说 ， 
需要 定期 地 产生 敌人 ， 这 一 节 将 要 添加 这 个 功能 。 在 实现 这 个 功能 
前 ， 需 要 制作 敌人 es 对 象 的 prefab。 操 作 方 法 为 : 在 层次 
(Hierarchy) 面板 上 选中 敌人 (Enemy) ， 然 后 将 它 拖 放 到 项 目 


(Project) 面板 上 的 Prefabs 文件 夹 中 ， 操 作 完 成 之 后 就 实现 了 敌人 
(Enemy) 预 设 体 的 制作 ， 如 图 3.43 所 示 。 
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图 3.43 ”创建 一 个 敌人 (Enemy) 预 设 体 


接 下 来 创建 一 个 新 的 脚本 (Spawner.cs) ， 这 个 脚本 可 以 定期 地 在 
场景 中 产生 指定 数量 的 敌人 (Enemy) 对 象 ， 这 个 脚本 应 该 附加 到 场景 
中 一 个 新 的 空 游戏 对 象 上 ， 如 代码 示例 3.9 所 示 。 


代码 示例 3.9: 


using UnityEngine; 

using System.Collections; 
//--- 
public class Spawner : MonoBehaviour 


public float MaxRadius = 1f; 

public float Interval = 5f; 

public GameObject ObjToSpawn = null; 
private Transform Origin = null; 


void Awake() 


Origin = GameObject.FindGameObjectwithTag 
("Player").GetComponent(); 


// 初始 化 画 数 start() 
void Start () 


InvokeRepeating("Spawn", Of, Interval); 


void Spawn () 


if(Origin == null)return; 


Vector3 SpawnPos = Origin.position + Random.onUnitSphere * 
MaxRadius,; 

SpawnPos = new Vector3(SpawnPos.x, Of, SpawnPos.z); 

Instantiate(ObjToSpawn, SpawnPos, Quaternion.identity); 


下 面 对 代 码 进行 总 结 。 


。 Spawner 类 将 会 在 每 个 Interval 长 度 的 时 间 间 隔 中 产生 一 个 
ObjToSpawn 的 实例 ，Interval 的 单位 是 秒 ， 产 生 对 象 的 中 心 点 为 
Origin， 半 径 随机 。 

。 在 Start 事 件 中 会 调用 函数 InvokeRepeating()， 通 过 调用 这 个 函数 就 
可 以 持续 地 执行 Spawn0 函 数 ， 在 每 个 Interval 长 度 的 时 间 间 隔 中 不 
汤 地 产生 新 的 政和 人 。 

。 函数 Spawn0 会 在 场景 中 以 原点 为 中 心 的 随机 位 置 上 不 断 地 创建 
Enemy 的 实例 ， 当 Enemy 产 生 之 后 ， 它 就 会 按照 设计 思路 ， 一直 朝 
着 Player 对 象 运动 发 起 攻击 。 


Spawner 类 是 一 个 在 整个 场景 都 支持 的 全 局 行为 。 这 个 类 并 不 是 必 
须 依 靠 玩 家 (Player) ， 同 样 也 不 是 必须 依靠 敌人 (Enemy) 。 基 于 这 


个 原因 ， 这 个 类 应 该 附加 到 一 个 空 的 游戏 对 象 上 。 在 应 用 程序 菜单 上 
依次 选中 “GameObject| Create Empty”， 然 后 将 这 个 对 象 命名 
为 “Spawner”， 最 后 将 Spawner 脚 本 附加 到 该 对 象 上 面 ， 如 图 3.44 所 示 。 
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图 3.44 ”创建 一 个 空 的 游戏 对 象 


当成 功 添加 了 对 象 之 后 ， 就 可 以 在 检查 (Inspector) 面板 对 其 进行 
调整 ， 将 敌人 (Enemy) 预 设 体 拖 动 到 “Spawner” 组 件 的 “Obj To 
Spawn” 属 性 中 。 然 后 如 图 3.45 所 示 ， 将 Interval 的 值 修改 为 2， 将 “Max 
Radius” 的 值 修改 为 5。 
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图 3.45 ”为 敌人 (Enemy) 对 象 设置 Spawner 组 件 


现在 按 下 工具 栏 上 的 “Play” 按 钮 来 测试 游戏 ， 可 以 看 到 一 个 完全 受 
玩家 控制 的 飞船 ， 以 及 无 数 蜂拥 而 来 紧 妃 飞船 不 放 的 敌人 ! 如 图 3.46 所 
示 


图 3.46 ”被 不 断 产生 的 敌人 所 包围 的 玩家 (Player) 对 象 


3.11 小 结 


到 目前 为 止 ， 太 空 射击 游戏 已 经 成 型 了 : 一 个 可 以 控制 并 遵循 物 
理 规 律 的 玩家 (Player) 角色 、 双 轴 控 制 机 制 、 敌 人 的 飞船 ， 整 个 场景 
都 可 能 产生 敌人 。 严 格 来 说 ， 所 有 这 些 加 在 一 起 ， 仍 然 不 是 一 个 真正 
的 游戏 ， 因 为 还 不 能 开 枪 射击 ， 所 以 不 能 增加 得 分 ， 也 不 能 消灭 政 
人 。 这 些 问 题 和 一 些 其 他 会 遇 到 的 问题 都 有 待 改进。 尽管 如 此 ， 现 在 
已 经 为 进一步 的 游戏 设计 打下 了 坚实 的 基础 ， 在 下 一 章 将 会 实现 射击 
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第 4 章 ”太空 射击 游戏 (I)) 


本 章 是 上 一 章 双 轴 太空 射击 游 戏 开 发 的 继续 。 到 现在 为 止 ， 已 经 
拥有 了 一 个 可 以 工作 的 游戏 。 目 前 游戏 着 可 以 使 用 运动 和 旋转 来 控制 
宇宙 飞船 。 键 盘 上 的 “W”*A”S”D”4 个 键 可 以 控制 宇宙 飞船 的 运动 
(上 下 左右 ) ， 姐 标 光标 可 以 控制 宇宙 飞船 的 旋转 一 一 宇宙 飞船 会 始 
终 面 对 着 鼠标 光标 。 除 了 玩家 控制 之 外 ， 在 关卡 中 每 隔 特 定 的 周期 都 
会 产生 敌人 ， 这 些 敌 人 会 在 玩家 的 周转 产生， 并且 会 对 玩家 造成 威 
胁 。 最 后 ， 玩 家 和 敌人 都 拥有 一 个 生命 值 组 件 ， 这 意味 着 无 论 玩家 还 
征 敌 人 都 可 能 受到 仿 害 ， 甚 至 被 挫 毁 。 不 过 现在 的 玩家 还 缺乏 两 个 最 
为 重要 的 功能 : 发 射 武器 ， 增 加 得 分 。 这 一 章 将 会 完善 这 两 个 以 及 其 
他 的 功能 。 如 何 实现 武 郁 射击 功能 将 是 一 个 非常 有 趣 的 问题 。 总 体 而 
言 ， 本 章 将 会 包含 如 下 主题 : 


。 洲 戏 中 武 炙 和 弹药 的 生成 
。 游戏 的 内 存 管 理 与 共享 
。 游戏 的 声音 与 首 频 

。 游戏 的 计 分 

。 游戏 的 调试 与 测试 

。 游戏 的 构建 与 发 布 


本 章 所 需要 的 项 目 文件 可 以 在 本 书 配套 文件 中 的 <Chapter04/Start" 文 件 
夹 中 找到 ， 如 果 没 有 保存 好 上 一 章 的 项 目 文件 ， 可 以 使 用 这 些 文 件 来 开始 
本 章 的 内 容 。 


现在 开始 武器 的 详细 设计 。 具 体 而 言 ， 关 卡 中 包含 了 玩家 和 敌人 
的 飞船 。 玩 家 必须 具有 射击 收 人 的 功能 ， 但 是 现在 这 些 还 无 法 做 到 ， 
如 图 4.1 所 示 。 武 如 的 详细 设计 需要 注意 3 个 重要 的 原则 。 第 一 ， 必 须 有 
一 个 发 射 器 ， 当 玩家 按 下 发 射 按钮 时 就 可 以 发 射 炮弹 。 第 二 ， 炮 弹 一 
旦 产生 束 会 独立 地 在 场景 中 行动 。 第 三 ， 炮 弹 在 与 其 他 物体 碰撞 时 具 
有 伤害 它们 的 能 力 。 
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图 4.1 目前 为 止 的 游戏 


现在 一 步 步 地 来 实现 这 些 功能 ， 首 先 从 炮塔 产生 和 发 射 弹药 的 点 
开始 。 对 于 这 个 游戏 ， 玩 家 只 需要 一 个 炮塔 ， 不 过 一 个 更 有 吸引 力 的 
游戏 中 应 该 文 持 更 多 的 炮塔 ， 这 样 玩家 就 可 以 实现 双重 其 至 多 重 的 火 
力 。 下 面 创 建 第 一 个 炮塔 ， 首 先 在 应 用 程序 菜单 上 选中 *GameObject | 
Create Empty” 同 场景 中 添加 一 个 空 的 游戏 对 象 ， 将 其 命名 为 “Turret”。 
然后 将 炮塔 (Turret) 对 象 放置 到 玩家 飞船 的 前 方 ， 确 定 蓝 色 的 前 向 向 
量 箭头 所 指向 的 就 是 发 射 的 炮弹 的 运行 方向 。 最 后 ， 将 炮塔 (Turret) 
对 象 设置 为 玩家 飞船 的 子 对 象 ， 这 可 以 通过 将 炮塔 (Turret) 对 象 拖 忠 
到 层次 (Hierarchy) 面板 的 玩家 (Player) 对 象 下 方 〈 见 图 4.2) 。 
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图 4.2 将 炮塔 (Turret) 对 象 作为 玩家 飞船 的 一 个 子 对 象 


接 下 来 创建 一 个 发 射 炮弹 的 炮塔 〈Turret) 对 象 ， 所 有 的 炮弹 都 从 
这 个 位 置 发 射出 来 。 但 是 如 果真 的 要 产生 一 些 炮弹 ， 还 需要 设计 一 个 
炮弹 对 象 。 具 体 地 说 ， 需 要 创建 一 个 炮弹 (Ammo) 预 设 体 ， 在 需要 的 
时 候 整 可 以 将 这 个 预 设 体 实例 化 为 炮弹 。 下 面 就 来 实现 这 个 功能 。 


4.2 炮弹 预 设 体 


当 玩 家 在 游戏 进行 中 按 下 开火 键 时 ， 宇 宙 飞 船 就 应 该 在 场景 中 发 

射 炮弹 对 象 。 这 些 炮弹 对 象 都 是 基于 Ammo 预 设 体 的 。 现 在 就 来 创建 这 
个 预 设 体 ， 首 先 将 这 个 预 设 体 的 texture 配 置 为 炮弹 的 贴图 。 在 项 日 

(Project) 面板 上 打开 “Textures” 文 件 来 ， 然 后 选中 “Ammo Texture”。 
这 个 贴图 包含 了 多 个 不 同 版 本 炮弹 的 图 像 精灵 ， 这 些 炮 弹 图 像 精 灵 按 
照 图 4.3 所 示 排 成 一 行 。 当 炮弹 发 射 的 时 候 ， 并 不 需要 显示 完整 的 贴 
图 ， 相反， 只 需要 其 中 的 一 个 图 像 ， 或 者 将 一 些 图 像 逐 帧 地 组 成 动画 
序列 。 
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图 4.3 ”创建 炮弹 预 设 体 的 准备 工作 


现在 ，Unity 会 将 炮弹 的 每 个 部 分 贴图 看 作 是 一 个 整体 ， 可 以 使 用 
Sprite 编 辑 器 将 这 些 部 分 分 离开 来 。 首 先 ， 在 项 目 中 选中 贴图 ， 之 后 
(在 对 象 Inspector 面 板 ) 将 “Sprite Mode” 的 值 由 “Single” 修 改 
为 "Multiple”， 表 示 在 这 个 贴图 中 包含 了 多 个 图 像 精 灵 ， 如 图 4.4 所 示 。 
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图 4.4 ”贴图 “Sprite Mode” 设 置 为 “Multiple” 


完成 上 述 操 作 之 后 单 击 “Apply” 按 钮 ， 然 后 在 对 象 Inspector 面 板 中 
单 击 “Sprite Editor” 按 钮 ， 就 会 打开 Sprite 编 辑 器 ， 可 以 独立 地 编辑 每 一 
个 图 像 精灵 “。 首 先 单 击 并 拖 动 里 标 来 选择 每 个 图 像 精灵 ， 确 保 中 心 点 
与 对 象 的 中 心 对 齐 ， 如 图 4.5 所 示 。 之 后 ， 使 用 鼠标 单 击 “Apply” 按 钮 来 
傈 存 这 些 改变 。 


图 4.5 在 Sprite 编 辑 器 中 将 多 个 图 像 精 灵 分 离 


在 Sprite 编 辑 器 中 保存 这 些 修 改 之 后 ，Unity 会 自动 地 将 相关 图 像 精 
灵 分 割 成 独立 的 部 分 ， 这 些 部 分 都 可 以 在 项 目 (Project) 面板 中 作为 独 
立 的 对 象 选 中 。 单 击 贴图 上 向 右 的 箭头 ， 它 所 包含 的 所 有 图 像 精 灵 就 
会 问 外 展开 显示 出 来 ， 如 图 4.6 所 示 。 
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图 4.6 ”展开 贴图 中 的 所 有 图 像 精 灵 


现在 ， 将 其 中 一 个 图 像 精灵 从 项 目 (Project) 面板 拖 忠 到 场景 中 ， 
它 将 会 被 添加 成 为 一 个 图 像 精灵 对 象 。 这 就 是 炮弹 预 设 体 的 初始 阶 
段 。 这 个 图 像 精灵 在 最 开始 的 时 候 可 能 并 不 是 直接 面 对 着 游戏 摄像 
机 ， 解 决 的 方法 就 是 将 图 像 精灵 旋转 90 度 ， 直 到 它 看 起 来 的 位 置 合适 
了 为 止 ， 如 图 4.7 所 示 。 
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图 4.7 ”将 炮弹 图 像 精 灵 进 行 对 齐 


此 时 在 场景 中 创建 了 一 个 新 的 空 游戏 对 象 《从 应 用 程序 荣 单 中 依 
次 选中 “GameObject | Create Empty”) ， 并 将 其 重 命名 为 “Ammo”。 将 这 
个 新 的 对 象 作为 “Ammo_Sprite” 的 父 对 象 ( 见 图 4.8) ， 以 此 来 确保 它 的 
前 向 同 量 所 指向 的 方向 正 古 炮弹 前 进 的 方 同 ， 在 炮弹 上 再 次 使 用 Mover 
脚本 (在 上 一 章 中 用 到 的 ， 这 个 脚本 可 以 控制 炮弹 的 运动 。 
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图 4.8 创建 一 个 炮弹 对 象 


将 Mover.cs 从 项 目 (Project) 面板 拖 忠 到 “Ammo” 父 对 象 上 ， 这 样 

束 可 以 将 Mover 作 为 ‘Ammo” 的 一 个 组 件 。 然 后 在 对 象 检 查 
(Inspector) 面板 中 选中 “Ammo” 对 象 ， 将 Mover 组 件 中 的 “Max 

Speed” 的 值 修改 为 7。 最 后 向 这 个 对 象 添 加 一 个 与 其 体积 相仿 的 盒子 碰 
撞 器 (从 应 用 程序 菜单 依次 选中 “Component | Physics | Box 
Collider”) 。 下 面 可 以 对 游戏 进行 测试 了 。“Ammo” 对 象 呵 前 开火 就 如 
同一 个 武器 一 样 。 如 果 炮 弹 运动 的 方向 不 正确 ， 就 需要 确认 父 对 象 的 
蓝 色 前 向 向 量 指向 的 方向 是 否 正 确 ， 如 图 4.9 所 示 。 


图 4.9 向 前 运动 的 炮弹 预 设 体 (Mover 组 件 和 Collider 组 件 ) 


接 下 来 ， 向 炮弹 添加 一 个 刚体 组 件 ， 使 它 成 为 Unity 物 理 体 系 中 的 
一 部 分 。 首 先 选中 炮弹 (Ammo) 对 象 ， 然 后 依次 在 应 用 程序 菜单 上 选 
中 “Component | Physics |Rigidbody”， 在 对 象 检 查 (Inspector) 面板 中 的 
刚体 组 件 处 取消 “Use Gravity” 处 的 选中 状态 ， 这 样 在 游戏 进行 中 炮弹 就 
不 会 掉 落 到 地 上 。 按 照 游戏 设计 思路 ， 炮 弹 不 应 该 受到 重力 的 影响 ， 
而 是 沿 着 轨迹 运动 直到 最 终 被 销毁 。 这 也 表明 了 游戏 开发 时 要 把 握 的 
一 个 重要 原则 ， 不 需要 将 现实 世界 中 的 物理 情形 毫 无 差 池 地 应 用 到 游 
戏 中 的 每 一 个 对 象 上 ， 只 需要 能 让 游戏 对 象 表现 出 合适 行为 的 足够 物 
理 特性 ， 如 图 4.10 所 示 。 
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图 4.10 ”将 重力 属性 从 炮弹 对 象 上 去 除 


除了 向 炮弹 添加 一 个 Mover 脚 本 和 物理 属性 之 外 ， 还 需要 给 炮弹 添 
加 特有 的 行为 。 具 体 来 说 ， 当 它 与 其 他 对 象 发 生 碰撞 时 ， 会 对 目标 造 
成 伤害 ， 同 时 也 会 挫 贤 自身 。 为 了 实现 这 一 功能 ， 必 须 创建 一 个 新 的 
脚本 文件 ， 将 这 个 新 的 文件 命名 为 Ammo.cs。 这 个 脚本 中 的 全 部 代码 如 
代码 示例 4.1 所 示 。 


代码 示例 4.1: 


using UnityEngine; 
using System.Collections; 


public class Ammo : MonoBehaviour 
{ 
public float Damage = 100f; 
public float LifeTime = 2f; 


void OnEnable() 


CancelInvoke() 
Invoke("Die", LifeTime); 


// Update 会 在 每 一 帧 调用 一 次 
void OnTriggerEnter(Collider Col) 


// 获 取 health 组 件 
Health H = Col.gameObject.GetComponent(); 


if(H == null)return; 


H.HealthPoints -= Damage; 


void Die() 


gameObject.SetActive(false); 


下 面 对 代 码 示例 4.1 进 行 总 结 。 


Ammo 类 应 该 附加 到 “Ammo prefab” 对 象 上 ， 所 有 的 炮弹 对 象 在 创 
建 时 都 应 该 将 这 个 类 实例 化 。 这 个 类 的 目的 就 是 当 发 生 磁 接 时 对 
其 他 对 象 造成 伤害 。 

当 炮 弹 接 触 到 一 个 移动 单元 〈 例 如 Player 对 象 或 者 Enemy 对 象 ) 上 
所 附加 的 触发 器 时 ， 就 会 调用 OnTriggerEnter 函 数 。 然 后 它 会 查找 
附加 在 这 个 移动 单元 上 的 生命 值 组 件 ， 如 果 找 到 ， 就 会 将 其 生命 
值 减 少 ， 减 少 的 值 为 炮弹 伤害 值 。 生 命 值 组 件 已 经 在 上 一 人 划 中 创 
建 过 。 

要 注意 每 一 个 炮弹 对 象 都 有 一 个 生命 时 间 。 这 个 时 间 代 表 了 从 炮 
塔 开 火 和 这 个 炮弹 对 象 产生 之 后 的 生存 时 间 。 当 生存 时 间 到 期 
后 ， 炮 弹 歼 应 该 被 销毁 或 者 停 用 。 


函数 Invoke 用 来 在 经 过 LifeTime 时 间 间 隅 后 停 用 炮弹 对 象 ， 这 个 画 
数 是 在 OnEnable 函 数 中 调用 的 。 每 当 一 个 对 象 被 激活 之 后 ，Unity 
就 会 自动 调用 OnEnable 函 数 〈 也 就 是 说 ， 状 态 从 Disabled 转 换 到 
Enabled) 。 


将 “Ammo” 脚 本 文件 从 项 目 (Project) 面板 中 的 Scripts 文 件 夹 中 拖 
暇 到 “Ammo” 对 象 上 ， 然 后 再 将 场景 中 整个 "Ammo” 对 象 拖 暇 回 项 目 
(Project) 面板 中 的 Prefabs 文 件 夹 以 创建 一 个 新 的 “Ammo prefab”， 如 
图 4.11 所 示 。 


现在 已 经 创建 了 一 个 炮弹 预 设 体 ， 这 个 预 设 体 可 以 从 武器 中 产 
生 ， 直 接 去 攻击 敌人 人。 但是， 现在 并 没有 设计 预 设 体 的 产生 过 程 ， 接 
下 来 将 对 这 部 分 内 容 进 行 处 理 。 


图 4.11 创建 一 个 炮弹 预 设 体 


4.3 炮弹 的 产生 


到 目前 为 止 ， 炮 弹 预 设 体 的 创建 留 下 了 一 个 扩 术 性 的 问题 ， 如 采 
没有 谨慎 地 处 理 这 个 问题 ， 将 会 对 游戏 造成 挛 重 的 性 能 影响 。 具体 来 
说 ， 当 宇宙 飞船 上 的 武器 发 射 时 ， 惰 会 产生 炮弹 发 射 ， 击 中 并 摧毁 场 
景 中 的 政 人 。 这 的 确 不 错 ， 但 是 问题 是 玩家 在 进行 游戏 的 时 候 可 能 会 
多 次 地 掖 下 开火 按钮 ， 甚 至 可 能 会 长 时 间 按 住 开火 按钮 不 放 ， 从 而 产 
生 了 数 以 百 计 的 炮 璋 。 可 以 使 用 实例 化 函数 来 动态 地 产生 这 些 炮 弹 预 
设 体 ， 但 是 这 些 实例 化 计算 时 要 伦 费 大 量 的 资源 。 当 连续 产生 大 量 的 
物品 时 ， 通 利 会 引起 一 个 十 分 巨大 的 系统 延迟 ， 从 而 导致 FPS 降 低 到 一 
个 无 法 接受 的 程度 ， 需 要 避免 这 种 情况 。 


这 种 情况 的 解决 方案 就 是 Pooling 技 术 , “Object Pooling” 或 
者 “Object Caching”。 实 质 上 ， 如 是 必须 要 产生 一 个 大 的 且 可 以 循环 利 
用 的 炮弹 对 象 池 。 最 开始 的 时 候 这 个 炮弹 对 象 池 是 隐藏 的 或 者 说 是 停 
用 的 ， 只 有 在 需要 的 时 候 〈 例 如 当 玩家 发 射 武器 时 ) ， 才 会 激活 对 
象 。 当 炮弹 与 政 人 相 碰 接 时 或 者 炮弹 的 生命 周期 结束 时 ， 并 不 会 彻底 
销毁 该 炮弹 对 象 ， 而 是 将 其 关闭 ， 然 后 放 回 到 炮弹 对 象 池 中 ， 如 果 再 
次 需要 使 用 ， 就 可 以 直接 使 用 对 象 池 中 的 炮弹 。 利 用 这 种 工作 方式 可 
以 避免 对 Instantiate 的 调用 。 在 开始 编程 实现 这 个 功能 之 前 ， 先 来 完成 
一 个 AmmoManager 类 。 这 个 类 将 实现 两 个 功能 : 第 一 ， 在 场景 局 动 的 
时 候 生成 一 对 象 池 的 炮弹 ， 第 二 ， 当 需要 使 用 炮弹 时 ， 例 如 使 用 武器 
开火 ， 就 会 从 对 象 池 中 提供 炮弹 对 象 。 下 面 的 代码 示例 4.2 中 
AmmoManager 类 实现 这 个 功能 。 


代码 示例 4.2 : 


Using UnityEngine 
using System.Collections 
using System,Collections,Generic ; 


public class AmmoManager : MonoBehaviour 


{ 


// 对 ammo 预 设 体 的 引用 
public GameObject AmmopPrefab = null; 


//Ammo 池 计数 
public int PoolSize = 100; 


public Queue<Transform> AmmoQueue = new Queue<Transform>(); 


// 产 生 一 个 ammo 对 和 象 的 队列 


private GameObject[] AmmoArray; 
public static AmmoManager AmmoManagerSingleton = null; 


// 初始 化 画 数 
void Awake () 


if(AmmoManagerSingleton != null) 


Destroy(Getcomponent<AmmoManager>( )); 
return; 


} 


AmmoManagerSingleton = this; 
AmmoArray = new GameObject[PoolSizel]; 


for(int i=0; i<PoolSize; i++) 
{ 
AmmoArray[i] = Instantiate(AmmoPrefab, Vector3.zero, 
Quaternion.identity) as GameObject; 
Transform ObjTransform = 
AmmoArray[i].GetComponent<Transform>(); 
ObjTransform.parent = GetComponent<Transform>(); 
AmmoQueue.Enqueue(ObjTransform) ， 
AmmoArray[i].SetActive(false); 


public static Transform SpawnAmmo 
(Vector3 Position, Quaternion Rotation) 


// 获 取 ammo 
Transform SpawnedAmmo = 
AmmoManagerSingleton.AmmoQueue.Dedqueue( ) ; 


SpawnedAmmo ,gameobject.SetActive(true ) ; 
SpawnedAmmo ,position = Position， 
SpawnedAmmo.localRotation = Rotation， 


// 添 加 到 Queue 尾 部 
AmmoManagerSingleton.AmmoQueue.Endqueue(SpawnedAmmo ) ; 


// 返 回 ammo 
return SpawnedAmmo; 


下 面 对 代 码 示 例 4.2 进 行 总 结 


AmmoManager 类 包含 了 一 个 AmmoArray 成 员 变 量 ， 这 个 变量 中 包 
含 了 所 有 炮弹 对 象 的 列表 (顺序 引用 数组 ，， 这 些 炮弹 对 象 都 会 
在 游戏 启动 的 时 候 产 生 〈 在 Awake 函 数 中 实现 ) 
AmmoArray 的 大 小 要 与 PoolSize 相 匹配 。 这 个 大 小 指 的 就 是 要 产生 
的 炮弹 对 象 的 数量 。 范 数 Awake 会 在 关卡 开始 的 时 候 产 生 炮 弹 对 
象 ， 这 些 对 象 都 会 被 Enqueue 添 加 到 队列 中 。 

当 这 些 炮弹 对 象 产 生 之 后 ， 每 一 个 炮弹 对 象 都 会 被 SetActive(false) 
设置 为 停 用 状态 ， 并 存储 在 对 象 池 中 ， 直 到 需要 使 用 的 时 候 。 
AmmoManager 使 用 Mono 库 中 Queue 类 来 确定 当 开火 键 按 下 时 ， 如 
何 从 对 象 池 选中 炮弹 对 象 。Queue 的 工作 机 制 是 先进 先 出 (First In 
First Out，FIFO) 。 换 名 话说， 每 次 将 一 个 炮弹 对 象 添 加 到 Queue 
中 ， a 束 可 以 从 Queue 中 移 除 。 移 除 的 对 
象 总 是 位 于 Queue 的 最 前 端 。 关 于 Queue 类 的 更 多 信息 可 以 在 下 面 


的 网 址 找到 : https://msdn.microsoft.com/en- 
us/library/7977ey2c%28v=Vvs.110%29.aspx° 

在 Awake 函 数 中 ，Queue 对 和 象 会 调用 Enqueue 罚 数 癌 Queue 中 了 逐个 添 
加 对 和 象 。 

调用 SpawnAmmo 函 数 产 生 场 景 中 新 的 炮弹 。 这 个 函数 中 不 需要 使 
用 Instantiate 函 数 ， 而 是 使 用 Queue 对 象 来 代替 。 它 将 Queue 中 的 第 
一 个 炮弹 对 象 移 出 ， 并 激活 它 。 然 后 再 次 将 它 添 加 到 Queue 中 所 有 
的 炮弹 对 象 的 后 面 。 通 过 这 种 方法 ， 就 可 以 循环 地 使 用 所 有 的 炮 
弹 对 象 。 

AmmoManager 被 编写 为 一 个 单 态 对 象 ， 这 就 意味 着 ， 在 任何 时 候 
都 只 有 一 个 对 象 的 实例 存在 于 场景 中 。 这 个 功能 是 通过 议 态 成 员 
AmmoManagerSingleton 实 现 的 。 关 于 单 态 对 象 的 更 多 信息 ， 可 以 
访问 https://www.packtpub.com/game-development/ mastering-Unity- 
5x-scripting 里 Packet 出 版 社 出 版 的 Mastering Unity Scripting 一 书 。 


在 应 用 程序 菜单 处 依次 单 击 “GameObject | Create Empty” 来 在 场景 
中 创建 一 个 新 的 游戏 对 象 ， 并 将 其 命名 为 AmmoManager。 然 后 从 项 目 
(Project) 面板 处 将 AmmoManagex 脚 本 拖 归 到 场景 中 选中 的 对 象 上 。 
创建 成 功 之 后 ， 从 Prefabs 文 件 夹 中 将 “Ammo prefab” 拖 虑 到 对 和 象 
Inspector 面 板 中 “Ammo Manager” 组 件 处 的 “Ammo Prefab” 后 面 的 位 置 
处 ， 如 图 4.12 所 示 。 


区 ES | Tl) | vpivot | 旬 Local | Pp 1 pl [iayers | [Layout | [Account »| 
二 Hierarchy -三 | 六 Scene 2 Animator == | © Game | ==| @ Inspector | 等 Lighting CE 
Create * | (orA Shaded "12D| 深 | 动 | Gizmos ~ Al 16:9 7 M Play EJ 回 AmmoManager 口 Stati 
Main Camera | g ged Layer | Defaul 
Directional Light TE nm [mE 
ee Position x0 Yo zo 
vets Rotatio XT Yo z0 
bluecargoship 二 全 : 
Turret -一 -一 
mmo @ Ammo Manager (Script) 辐 加 
Ammo_Sprit Script -AmmoManager 9 
Ammo Prefab Ammo 9 
Pool Size 100 
Add Component 


图 4.12” 问 “Ammo Manager 添 加 一 个 对 象 


现在 场景 中 已 经 包含 了 一 个 AmmoManager 对 象 ， 这 个 对 象 实现 了 
Ammo 对 象 池 。 不 过 ， 当 玩家 按 下 开火 键 时 仍然 什么 都 没有 发 生 ， 这 是 
因为 在 现在 的 游戏 中 仍然 缺乏 玩家 按键 与 产生 炮弹 之 间 的 联系 。 这 是 
因为 没有 编写 这 方面 的 代码 。 可 以 利用 上 一 章 中 编写 的 PlayerController 
脚本 来 完成 这 两 者 之 间 的 联系 。 现 在 来 改进 这 段 脚本 ， 修 改 以 后 的 脚 
本 将 具有 产生 炮弹 的 能 力 ， 重 新 编写 过 的 PlayerController 类 内 容 如 代码 
示例 4.3 所 示 ， 加 粗 的 部 分 就 是 修改 过 的 部 分 。 


代码 示例 4.3: 


using UnityEngine 
using System,Collections ; 


private Rigidbody ThisBody = null; 
private Transform ThisTransform = nulil; 


public bool MouseLook = true; 

public string HorzAxis "Horizontal"; 
public string VertAxis "Vertical"; 
public string FireAxis "Fire1"; 


public float MaxSpeed = 5f; 
public float ReloadDelay = 0.3f; 
public bool CanFire = true; 


public Transform[] TurretTransforms; 


// 初 始 化 函数 
void Awake () 


ThisBody = GetComponent(); 
ThisTransform = GetComponent ( ); 


// Update 会 在 每 一 帧 调用 一 次 
void FixedUpdate () 
{ 
// 对 运动 进行 更 新 
float Horz = Input.GetAxis(HorzAxis); 
float Vert = Input.GetAxis(VertAxis); 
Vector3 MoveDirection = new Vector3(Horz, 0.0f, Vert); 
ThisBody .AddForce(MoveDirection.normalized * MaxSpeed); 


// 对 速度 进行 限制 

ThisBody.velocity = new Vector3 
(Mathf.Clamp(ThisBody.velocity,.X，-MaxSpeed，MaxSpeed )， 

Mathf.Clamp(ThisBody.velocity.y, -MaxSpeed, MaxSpeed), 

Mathf.Clamp(ThisBody.velocity.z, -MaxSpeed, MaxSpeed)); 


// 鼠 标 控制 
if(MouseLook) 


// 对 rotation 进 行 更 新 -转向 去 面 对 鼠 标 指针 
Vector3 MousePosWorld = Camera.main.ScreenToWorldPoint (new 
Vector3(Input.mousePosition.x, 
Input .mousePosition.y，0.0f))， 
MousePosWorld = new Vector3(MousePoswWor1d.x，0.0f， 
MousePosWorld.z); 


// 获 得 光标 的 方 癌 
Vector3 LookDirection = MousePosWorld - 
ThisTransform.position; 


// 对 rotation 进 行 固 定 更 新 
ThisTransform.localRotation = Quaternion.LookRotation 
(LookDirection.normalized,Vector3.up); 


} 

// 检 查 开 火 控 制 
if(Input.GetButtonDown(FireAxis) && CanFire) 
{ 


foreach(Transform T in TurretTransforms) 
AmmoManager .SpawnAmmo(T.position, T.rotation); 


CanFire = false; 
Invoke ("EnableFire", ReloadDelay); 


void EnableFire() 


CanFire = true; 


public void Die() 


Destroy(gameObject ); 


下 面 对 代 码 示例 4.3 进 行 忌 结 


Le 


。 PlayerController 类 中 包含 了 一 个 名 为 TurretTransform 的 数组 变量 
文 个 数组 变量 中 列 出 了 所 有 可 以 作为 炮塔 产生 地 点 的 对 象 。 
。 在 Update 函 数 中 ，PlayerController 会 检测 开火 键 是 否 被 按 下 。 如 果 
分 测 到 这 个 键 被 按 下 ， 代码 就 会 在 所 有 的 炮塔 循环 ， 并 在 每 一 个 
炮塔 的 位 置 产生 一 个 炮弹 。 
。 当 开 火 时 ， 就 会 将 ReloadDelay 的 值 设 置 为 “True”。 这 就 表示 只 有 
延迟 时 间 (delay) 完成 以 后 ， 才 可 以 再 次 开火 。 


当 将 这 些 代 码 添加 到 PlayerController 类 之 后 ， 在 场景 中 选中 Player 
对 象 ， 将 空 的 炮塔 对 象 拖 虑 到 “Turret Transform” 下 面 的 槽 位 里 。 在 这 个 


例子 中 只 使 用 了 一 个 炮塔 ， 
如 图 4.13 所 示 。 
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图 4.13 ”为 炮弹 的 产生 配置 “TurretTransform”* 属 性 


现在 已 经 完成 飞船 开火 的 功能 。 在 场景 中 进行 游戏 的 测试 ， 当 按 
下 键盘 上 的 开火 键 或 者 鼠标 左 键 时 ， 炮 弹 就 会 产生 了 “。 不 过 在 这 次 的 
测 弃 中 ， 有 两 个 主要 的 问题 : 第 一 ， 产 生 的 炮弹 可 能 太 大 或 者 太 小 ; 
第 二 ,产生 的 炮弹 有 时 可 能 会 与 玩家 宇宙 飞船 发 生 碰 接 。 接 下 来 逐步 


对 这 些 问题 进行 解决 。 


如 果 炮 弹 的 大 小 不 正确 ， 只 需要 对 预 设 体 的 尺寸 进行 修改 即 可 。 
首先 在 项 目 (Project) 面板 上 选中 “Ammo Prefab”， 从 检查 


(Inspector) 面板 处 的 “Transform” 组 件 处 输入 一 个 新 的 值 ， 如 图 4.14 所 
不 。 
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图 4.14 ”修改 “Ammo Prefab” 的 大 小 


如 采 炮 弹出 现 了 和 玩家 宇宙 飞船 相互 磁 接 的 情形 ， 就 需 0 
进行 设置 ， 使 得 炮弹 与 玩家 之 间 没 有 任何 反应 。 为 了 实现 这 一 点 ， 可 
以 使 用 物理 层 (Layer) 。 简 而 言 之 ， 玩 家 宇宙 飞船 和 炮弹 应 该 添加 到 
同一 个 层 ， 并 且 这 一 个 层 中 的 所 有 对 象 互相 之 间 都 是 没有 任何 物理 影 
啊 的 。 首 先 ， 在 场景 中 选中 Player 对 象 ， 然 后 从 对 和 象 检查 (Inspector) 


面板 ， 单 击 *Layer” 下 拉 列 表 框 ， 然 后 从 弹出 的 下 拉 沫 单 中 选中 “Add 
Layer”"， 如 图 4.15 所 未 。 
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图 4.15 ”创建 一 个 物理 无 关 的 新 层 
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将 这 个 层 命 名 为 "Player”， 表 示 在 这 个 层 中 的 所 有 对 象 都 
与 Player 对 象 有 关 ， 如 图 4.16 所 示 。 
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图 4.16 ”创建 一 个 新 的 层 


将 场景 中 的 Player 对 象 和 项 目 (Project) 面板 中 的 “Ammo 
Prefab” 都 放置 到 新 创建 的 Player 层 中 。 对 这 两 个 对 象 依次 执行 如 下 操 
作 ， 百 移 选 中 “Layer" 下 拉 列 表 框 ， 然 后 选中 其 中 的 “Player 选 项 ， 如 图 
4.17 所 示 。 如 果 此 时 弹出 了 一 个 对 话 框 ， 同 样 要 选择 将 子 对 象 一 同 修 
改 。 这 就 可 以 确保 所 有 的 子 对 象 与 其 父 对 象 天 联 到 了 相同 的 层 。 
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图 4.17 ”将 玩家 (Player) 和 炮弹 (Ammo) 都 放置 到 Player 层 


玩家 (Player) 对 象 和 炮弹 (Ammo) 对 象 都 已 经 添加 到 了 相同 的 
层 ， 现 在 同一 层 中 的 所 有 对 象 都 是 可 以 设置 相互 无 影响 的 。 接 下 来 ， 
设置 这 些 对 象 在 物理 属性 上 没有 影响 。 为 了 实现 这 一 点 ， 在 应 用 程序 
菜单 上 依次 选中 “Edit | Project Settings | Physics”， 如 图 4.18 所 示 。 
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图 4.18 ”选中 “Physics” 选 项 


在 对 象 检 查 (Inspector) 面板 处 有 全 局 Physics 的 设置 。 在 检查 
(Inspector) 面板 底部 的 “Layer Collision Matrix” 组 件 处 展示 了 各 个 层 之 
间 的 相互 影响 。 任 意 两 个 层 交 义 的 复 选 框 如 果 被 选中 ， 就 表示 这 两 个 


层 中 的 对 象 会 相互 影响 。 基 于 这 个 原理 ， 将 Player 层 后 面 复 夺 框 中 的 选 
中 取消 ， 阻 止 这 一 层 里 各 个 对 象 的 碰撞 ， 如 图 4.19 所 示 。 
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图 4.19 ”对 “Layer Collision Matrix” 进 行 调整 以 改善 碰撞 


在 对 象 检 查 (Inspector) 面板 中 对 “Layer Collision Matrix” 进 行 设 
置 ， 在 工具 栏 上 按 下 “Play” 按 钮 对 游戏 进行 测试 。 当 开始 对 游戏 进行 测 
试 后 ， 按 下 开火 键 ， 炮 弹 就 会 在 炮塔 处 产生 ， 同 时 也 不 会 再 与 宇宙 飞 
船 发 生 碰 撞 。 产 生 的 炮弹 只 会 去 碰撞 和 拱 毁 敌人 ， 如 图 4.20 所 示 。 


图 4.20 ”通过 开火 消灭 敌人 


现在 已 经 有 了 一 稻 可 以 开火 并 消炎 敌人 的 宇宙 飞船 ， 而 且 它 的 物 
理 属性 和 我 们 设计 的 一 样 。 你 可 能 想 要 上 自 定 义 玩家 的 控制 ， 或 者 想 要 
使 用 一 个 游戏 手柄 来 控制 游戏 。 接 下 来 的 内 容 将 完成 这 部 分 设计 。 


4.4 ”用 户 控 制 


可 能 你 并 不 喜欢 默认 的 游戏 控制 方式 一 一 上 下 、 左 右 、 开 火 ， 想 
要 做 出 一 些 改变 ， 这 些 输入 会 被 钞 数 Input.GetAxis (在 之 前 出 现 过 ) 所 
读 取 。 这 个 函数 的 名 字 易 于 记忆 ， 同 时 也 隐藏 了 Unity 中 设备 输入 与 虚 
拟 轴 之 间 的 映射 关系 。 接 下 来 简单 地 看 一 下 如 何 实现 自 定 义 。 可 以 通 
过 从 应 用 程序 荣 单 处 依次 选中 “Edit |Project Settings | Input 来 修改 游戏 
的 输入 设置 ， 如 图 4.21 所 示 。 
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访问 “Input* 选 项 


当选 中 了 这 个 选项 之 后 ， 在 对 象 检 查 (Inspector) 面板 就 会 出 现 一 


个 自 定义 输入 轴 和 集合 ， 


这 个 集合 是 以 列表 形式 出 现 的 ， 如 图 4.22 所 示 。 


这 个 列表 可 以 定义 输入 系统 的 所 有 轴 ,，“Horizontal” 和 “ Vertical" 两 个 轴 
都 在 这 里 显示 出 来 。 
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图 4.22 输入 轴 的 设置 


通过 在 对 象 检查 (Inspector) 面板 中 对 每 个 轴 进 行 扩 展 ， 就 可 以 简 
单 地 上 自 定 义 用 户 输入 的 映射 方式 ， 即 如 何 指 定 硬 件 设备 上 的 键 和 控 
制 ， 例 如 键盘 和 鼠标 ， 都 会 映射 成 一 个 轴 。 例 如 ，Horizontal 轴 就 被 定 
义 了 两 次 。 对 于 第 一 个 定义 ，Horizontal 被 映射 成 了 左 和 右 ， 以 及 键盘 
上 的 A 和 D， 右 和 D 被 映射 为 正 按钮 ， 这 是 因为 当 按键 被 按 下 之 后 ， 它 


们 就 会 依靠 mput.GetAxis 函 数 产生 正 的 浮 点 值 ， 这 个 值 为 0 一 1 中 任意 一 
个 。 左 和 A 键 被 映射 成 为 负 的 浮 点 数 ， 这 样 就 可 以 根据 值 的 正 负 来 确定 
对 象 移动 的 方向 ， 如 图 4.23 所 示 。 
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图 4.23 ”对 输入 轴 进 行 配置 


同样 ，Horizontal 也 在 对 象 检 查 (Inspector) 面板 中 被 定义 了 两 
次 ， 一 次 在 整个 列表 的 上 方位 置 ， 一 次 在 整个 列表 的 下 方位 置 。 这 两 
次 定义 的 效果 是 受 加 的 ， 它 们 之 间 并 不 矛盾 。 这 种 方式 允许 将 多 个 设 
备 映射 到 同一 个 轴 上 面 ， 这 样 游戏 就 可 以 实现 在 多 平台 和 多 设备 上 面 
运行 。 默 认 情 况 下 ，Horizontal 映 射 的 第 一 个 定义 是 键盘 上 的 左 方向 
键 、 右 方向 键 ~“A” 和 “D”* 键 ， 第 二 个 定义 是 操纵 杆 的 运动 。 这 两 个 定 
义 都 是 有 效 的 ， 它 们 协同 工作 。 如 果 需 要 ， 可 以 对 同一 个 轴 进 行 更 多 
的 定义 ， 这 主要 取决 于 所 要 支持 的 设备 ， 如 图 4.24 所 示 。 


图 4.24 ”定义 两 次 “Horizontal Axes” 


对 于 这 个 项 目 ， 保 留 了 默认 的 控制 模式 ， 不 过 如 采 布 望 文 持 多 种 
不 同 的 配置 方式 ， 也 可 以 修改 或 者 添加 新 的 控制 模式 。 关 于 用 户 输入 
和 目 定义 控制 的 更 多 信息 可 以 在 Unity 的 在 线 文档 
http://docs.Unity3d.com/Manual/classInputManager.html 中 查看 。 


4.5 ”分 数 和 评分 一 UI 和 文本 对 象 


下 面 继续 游戏 的 设计 ， 现 在 开始 计 分 系统 的 实现 ， 为 此 创建 了 一 
个 名 为 GameController 的 类 。 这 个 类 用 来 管理 游戏 全 局 范围 和 总 体 性 的 
行为 ， 同 样 包 括 了 比分 。 因 为 对 于 这 个 游戏 来 说 ， 分 数 指 的 古玩 家 所 


获得 的 一 个 独立 的 全 局 性 进度 的 标志 。 在 开始 计 分 系统 之 前 ， 需 要 创 
建 一 个 简单 的 用 来 显示 游戏 成 绩 的 GUI。GUI 是 英文 图 形 用 户 界 面 

(Graphic User Interface) 的 缩写 ， 这 里 指 位 于 游戏 窗口 顶部 用 来 向 玩 
家 提供 信息 的 2D 图 形 元 素 。 创 建 GUI 的 步骤 如 下 : 首先 在 应 用 程序 荣 
单 处 依次 选中 “GameObject | UI| Canvas”， 如 图 4.25 所 示 。 关 于 GUI 的 更 
多 信息 可 以 在 接 下 来 的 两 章 看 到 。 
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图 4.25” 疝 场景 中 添加 一 个 画布 (Canvas) 对 象 


画布 (Canvas) 对 象 定义 了 GUI 所 存在 的 全 部 表面 和 区 域 ， 包 括 所 
有 的 按钮 、 文 本 和 其 他 部 件 。 画 布 对 象 是 在 场景 中 生成 的 ， 同 样 也 可 


以 在 层次 (Hierarchy) 面板 中 找到 。 最 开始 的 时 候 ， 在 视窗 里 看 到 的 
画布 对 象 可 能 太 大 或 者 太 小 。 首 先 在 层次 (Hierarchy) 面板 中 选中 画 
布 对 象 ， 然 后 按 下 键盘 上 的 F 键 以 便 把 关注 点 放 在 画布 (Canvas) 对 象 
上 。 这 个 对 象 显示 出 来 是 一 个 大 的 矩形 ， 如 图 4.26 所 示 。 


图 4.26 在 视窗 里 查看 画布 (Canvas) 对 象 


在 Game 选 项 卡 中 并 不 能 直接 看 到 画布 (Canvas) 对 象 ， 它 更 像 是 
一 个 容器 。 尽 管 如 此 ， 画 布 在 很 大 程度 上 影响 了 它 所 包含 对 象 在 屏幕 
上 的 大 小 、 位 置 和 规模 。 基 于 这 个 原因 ， 在 向 其 中 添加 对 象 或 者 重新 
定义 界面 之 前 ， 最 好 是 先 重新 配置 画布 (Canvas) 对 象 。 首 先 在 场景 
中 选中 画布 (Canvas) 对 象 ， 并 在 对 象 Inspector 面 板 窗口 中 的 “Canvas 
Scaler” 组 件 处 单 击 “UI Scale Mode” 下 拉 列 表 框 ， 人 然后 在 下 拉 列 表 框 弹出 
的 内 容 中 选中 “Scale With Screen Size” 选 项 ， 并 在 “Reference 
Resolution” 属 性 中 输入 一 个 HD 分 辨 率 ， 也 就 是 说 在 X 区 域 输入 1920， 

在 Y 区 域 输入 1080， 如 图 4.27 所 示 。 
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图 4.27 ”修改 “Canvas Scaler” 组 件 的 值 


在 将 “Canvas Scaler” 组 件 的 值 修改 为 “Scale With Screen Size” 之 后 ， 
游戏 的 用 户 界 面 将 根据 目标 的 分 辨 紊 自动 拉 伸 或 者 收缩 《向 上 或 者 向 
下 ) ， 确 保 每 个 元 素 缩放 到 相同 的 比例 ， 以 保持 整体 的 外 观 和 视觉 效 
果 。 这 是 一 个 创建 UI 的 快速 简单 的 办 法 ， 并 且 这 种 方法 可 以 通过 调整 
大 小 来 适应 任何 分 辨 率 。 但 是 ， 如 有 果 想 要 你 持 最 高 质量 的 图 像 画 质 ， 
这 就 不 是 一 个 最 好 的 解决 方案 7 了， 不 过 在 大 多 数 情 况 下 ， 这 种 方法 还 
是 很 适用 的 。 还 有 ， 在 进行 UI 设计 之 前 ， 最 好 将 场景 (Scene) 选项 卡 
和 游戏 (Game) 选项 卡 同时 显示 ， 当 然 如 果 配 置 双 显 示 器 就 更 好 了 ， 
可 以 一 个 显示 器 显示 场景 (Scene) 选项 卡 中 的 内 容 ， 另 一 个 显示 器 显 
示 游 戏 (Game) 选项 卡 的 内 容 。 这 样 就 可 以 在 场景 (Scene) 选项 卡 中 


建立 用 户 界面 ， 然 后 在 游戏 (Game) 选项 卡 处 对 其 进行 预 咒 。 可 以 将 
场景 《Scene) 选项 卡 浓 边 的 游戏 (Game) 选项 卡 拖 暇 出 来 ， 然 后 重新 
并 排 的 排列 ， 如 图 4.28 所 示 。 
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图 4.28 ”将 场景 (Scene) 选项 卡 和 游戏 (Game) 选项 卡 并 排 显示 


J 添加 的 步骤 如 
下 : 首先 在 层次 (Hierarchy) 和 然后 在 这 个 对 象 
上 单 击 骨 标 右键 ， 这 时 会 显示 一 个 上 下 文 菜 单 ， 然 后 依次 选中 “UI| 
Text”。 这 样 就 会 创建 一 个 新 的 文本 对 象 ， 它 作为 画布 的 子 对 象 ， 如 图 
4.29 所 示 。 使 用 文本 (Text) 对 象 ， 束 可 以 轻松 地 使 用 特定 颜色 、 尺 
寸 、 字 体 来 在 屏幕 上 显示 信息 。 
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图 4.29 ”为 UI 创造 一 个 文本 (Text) 对 象 


稚 认 情况 下 ， 文 本 对 象 无 论 是 在 场景 中 还 是 在 视 岁 ， 都 是 不 可 见 
的 ， 虽 然 这 个 对 象 在 层次 (Hierarchy) 面板 已 经 列 出 来 了 。 不 过 ， 当 
在 场景 中 靠近 一 些 看 时 ， 也 可 能 看 到 一 些 很 小 的 黑色 文字 。 如 图 4.30 所 
示 ， 在 画布 和 游戏 (Game) 选项 卡 中 都 可 以 看 到 这 些 文字 。 默 认 情 况 
下 ， 痢 的 文本 对 象 中 包含 一 段 字 体 很 小 的 黑色 文字 。 对 于 这 个 项 目 ， 
需要 对 此 进行 一 些 修改 。 


站 Scene | 8 Animator 7 三 | € Game 


7 三 
Shaded "12D| | 流 |1 呈 | 1"||Gizmos | (or | | 16:9 7 Maximize on Play Mute audio Stats Gi 


图 4.30 新 创建 的 文本 对 象 在 大 多 数 的 时 候 很 难看 清 


在 层次 (Hierarchy) 面板 上 选中 文本 对 象 ， 然 后 在 检查 
(Inspector) 面板 中 的 文本 组 件 部 分 ， 将 文本 的 “Color* 属 性 修改 
为 “White”， 将 “Font Size” 的 值 修 改 为 2.0， 如 图 4.31 所 示 。 
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图 4.31 ”修改 文本 的 “Size” 和 “Color” 


即使 修改 了 文本 的 “Size” 属 性 之 后 ， 这 个 对 象 看 起 来 仍然 很 小 。 如 
果 进 一 步 增加 它 的 “Size” 值 ， a 。 出现 这 种 情 
况 是 因为 每 一 个 文本 对 象 都 有 一 个 矩形 的 边界 ， 这 个 边界 对 文本 对 象 
进行 了 限制 。 当 字体 的 大 小 超出 了 这 个 边界 的 限制 之 后 ， 文 本 就 会 自 
动 地 隐藏 起 来 。 为 了 解决 这 个 问题 ， 可 以 扩大 文本 的 边界 。 要 实现 这 
一 点 ， 在 工具 栏 上 选中 “Rect Transform” 工 具 ， 如 图 4.32 所 示 。 
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图 4.32 ”选中 “Rect Transform” 工 具 


当 激 活 “Rect Transform”* 工 具 之 后 ， 束 可 以 在 场景 视图 中 查看 到 一 
个 围绕 在 选 定 的 文本 对 象 外 面 的 清晰 边界 ， 这 就 是 矩形 边界 。 现 在 来 
扩大 这 个 边界 的 大 小 ， 以 适应 更 大 的 文本 ， 只 需 使 用 鼠标 将 边界 拖 电 
到 所 需 的 位 置 ， 如 图 4.33 所 示 。 这 样 就 可 以 扩大 边界 ， 然 后 将 字体 变 大 
以 改善 文字 的 可 读 性 。 
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图 4.33 ”改变 矩形 的 大 小 以 适应 较 大 的 字体 


除了 设置 文本 对 象 边 界 大 小 之 外 ， 文 本 也 可 以 垂直 地 对 齐 到 中 心 
的 位 置 。 要 实现 这 一 点 只 需要 单 击 垂直 对 齐 方式 中 的 大 中 按钮 。 对 于 
水 平 对 齐 方式 ， 保 留 默 认 左 对 齐 就 可 以 了 ， 如 图 4.34 所 示 。 
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图 4.34 ”在 边界 内 设置 文本 的 对 齐 方式 


现在 文本 已 经 设置 了 垂直 对 齐 的 方式 ， 还 需要 将 整个 画布 容器 作 
为 一 个 整体 来 设置 ， 即 使 游戏 窗口 的 大 小 和 位 置 调整 了 之 后 ， 这 个 画 
布 容器 仍然 位 于 屏幕 上 相同 的 位 置 和 方向 。 为 了 实现 这 一 点 ， 需 要 使 
用 Anchors。 使 用 变形 工具 (W) 将 文本 (Text) 对 象 移动 到 屏幕 的 右 
上 和 角 ， 这 个 位 置 就 是 应 该 显示 得 分 的 位 置 。 这 个 对 象 将 会 在 二 维 的 空 
间 中 移动 ， 而 不 是 在 三 维 空间 。 当 在 场景 视图 中 移动 文本 (Text) 对 象 
时 ， 可 以 在 游戏 (Game) 选项 卡 中 查看 它 的 显示 是 否 准确 ， 如 图 4.35 
所 未 * 
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图 4.35 ”在 游戏 (Game) 选项 卡 中 对 Score 文本 (Text) 对 象 定位 


需要 将 文本 对 象 固定 在 屏幕 上 〈 防 止 它 移动 或 者 变化 ) ， 即 使 游 
戏 选项 卡 被 用 户 调整 了 大 小 。 可 以 将 对 象 Anchor 的 位 置 设置 到 屏幕 的 
右上 角 ， 这 样 就 可 以 确保 文本 距离 Anchor 的 位 置 始 终 是 一 个 固定 的 比 
例 。 要 做 到 这 一 点 ， 首 先 在 对 象 检查 (Inspector) 面板 的 “Rect 
Transform”* 组 件 上 单 击 “Anchor Presets” 按 钮 。 完 成 这 个 操作 之 后 ， 就 会 
出 现 一 个 预 设 的 表单 ， 在 这 个 亲 单 中 可 以 看 到 一 些 对 齐 的 方式 。 每 个 
方式 以 一 个 小 图 的 形式 出 现 ， 每 个 小 图 上 有 一 个 红色 的 点 代表 对 齐 的 
方式 ， 在 这 里 选中 右上 对 齐 的 方式 ， 如 图 4.36 所 示 。 
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图 4.36 ”将 文本 对 象 与 屏幕 对 齐 


现在 成 功 创建 了 一 个 文本 对 象 。 当 然 ， 在 Play 模式 中 ， 这 个 文本 的 
内 容 既 不 会 改变 ， 也 不 会 显示 出 真实 的 分 数 。 这 是 因为 还 没有 向 其 添 
加 实现 功能 的 代码 。 不 过 ， 文 本 对 象 现 在 已 经 束 位 了 ， 而 且 也 可 以 随 
时 移动 它 。 


4.6 ” 计 分 功能 一 为 文本 对 象 编写 脚本 
为 了 能 在 GUI 中 显示 出 玩家 的 得 分 ， 需 要 实现 评分 系统 ， 也 就 是 编 


写 一 段 具 有 评分 功能 的 代码 。 评 分 系统 将 会 被 添加 到 游戏 中 一 个 负责 
忌 体 功能 的 GameController 类 中 ， 这 个 类 将 人 负责 游戏 中 所 有 逻辑 惫 


能 。 代 码 示例 4.4 给 出 了 GameController 类 和 评分 系统 的 代码 ， 这 上 段 代码 
应 该 添加 到 项 目的 Script 文 件 夹 中 。 


代码 示例 4.4: 


using UnityEngine; 
using System.Collections; 
using UnityEngine .UI; 


public class GameController : MonoBehaviour 


{ 


// 游 戏 的 得 分 
public static int Score '， 


// 前 组 
public string ScorepPrefix = string.Empty; 


// 分 数 文本 对 象 


public Text ScoreText = null; 


// 游 戏 结束 文本 
public Text GameOverText = null; 


public static GameController ThisInstance = null,; 
void Awake( ) 


ThisInstance = this， 


void Update() 
{ 


// 更 新 分 数 文本 
if(ScoreText!=null) 
ScoreText.text = ScorePrefix + Score.ToString(); 


public static void GameOver() 


if(ThisInstance.GameOverText!=null) 
ThisInstance.GameOverText .gameObject.SetActive(true); 


下 面 对 代 码 示例 4.4 进 行 总 结 。 


。 类 GameController 使 用 了 UnityEngine.ui 命 名 空间 ， 这 一 点 是 十 分 重 
要 的 ， 因 为 这 个 命名 空间 中 包含 了 Unity 中 所 有 的 UI 类 和 对 象 。 如 
果 没 有 3 引入 这 个 命名 空间 ， 那 么 在 脚本 中 将 无 法 使 用 任何 的 UI 对 
象 o 

。 GameController 类 包含 了 两 个 Text 公 共 成 员 ，ScoreText 和 
GameOverText。 这 两 个 公共 成 员 都 是 Text 对 象 ， 两 者 都 是 可 选 
的 ， 即 使 它们 都 是 空 的 ，Game Controller 代 码 也 能 实现 正常 功能 。 
ScoreText 是 一 个 用 来 显示 分 数 文 本 的 text GUI 对 象 的 引用 。 
GameOverText 是 当 触发 了 游戏 结束 条 件 时 ， 用 来 显示 任何 信息 的 
对 象 。 


为 了 能 使 用 GameController 代 码 ， 需 要 在 场景 中 创建 一 个 新 的 空 对 
象 ， 将 这 个 对 象 命名 为 “GameController”。 然 后 将 GameController 脚 本 拖 
虚 到 这 个 对 象 上 。 添 加 之 后 ， 再 将 ScoreText 对 象 拖 蝶 到 GameController 
的 对 象 检查 (Inspector) 面板 中 的 “Score Text* 属 性 中 ， 如 图 4.37 所 示 。 
在 “Score Prefix” 属 性 中 输入 得 分 的 前 缀 词语。 得 分 指 的 是 一 个 数字 ( 例 
如 1000) ， 前 缀 词语 指 的 是 添加 在 这 个 得 分 前 面 的 修饰 性 词语 ， 这 个 
词语 可 以 让 玩家 清楚 地 了 解 这 个 数字 的 含义 。 
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图 4.37 创建 一 个 GameController 来 记录 游戏 的 得 分 


现在 来 测试 这 个 游戏 ， 在 游戏 中 玩家 的 得 分 可 以 在 游戏 (Game) 
选项 卡 中 的 右上 角 看 到 ， 但 是 玩家 的 得 分 始终 为 0， 一 直 都 不 会 发 生 改 
变 。 这 是 因为 还 没有 编写 改变 得 分 的 代码 。 对 于 游戏 来 说 ， 每 当 一 个 
敌人 (Enemy) 对 象 被 破坏 的 时 候 ， 玩 家 的 得 分 都 应 该 增加 。 为 了 实现 
这 个 功能 ， 需 创建 一 个 新 的 脚本 文件 ， 命 名 为 “ScoreOnDestroy”。 这 个 
脚本 文件 的 内 容 如 代码 示例 4.5 所 示 。 


代码 示例 4.5: 
using UnityEngine 
using System,Collections ; 


public class ScoreonDestroy : MonoBehaviour 


{ 


void OnDestroy() 


GameController.Score += ScoreValue; 


这 个 脚本 应 该 关联 到 所 有 当 被 摧毁 时 能 增加 点 数 的 对 象 ， 例 如 政 
人 的 身上 。 总 的 点 数 由 ScoreValue 指 定 。 接 下 来 ， 将 这 个 脚本 附加 到 敌 
人 (Enemy) 预 设 体 上 ， 首 先 在 项 目 (Project) 面板 上 选中 Prefabs， 然 
后 在 对 象 检 查 (Inspector) 面板 上 ， 单 击 “Add Component” 按 钮 ， 在 
Search 文 本 框 中 输入 “ScoreOnDestroy” 来 向 预 设 体 中 添加 一 个 组 件 。 成 
功 添加 之 后 ， 指 定 要 挫 毁 敌人 的 总 点 数 。 对 于 这 个 游戏 ， 分 配 的 总 点 
数 设 置 为 50， 如 图 4.38 所 示 。 
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图 4.38 ”向 Enemy 预 设 体 添 加 一 个 得 分 组 件 


现在 已 经 可 以 通过 消炎 天 人 来 获得 分 数 了 。 对 游戏 进行 扩展 ， 设 
立 高 分 奖励 或 者 得 分 排行 榜 ， 此 时 游戏 设计 已 经 接近 尾声 了 ， 开 始 准 
备 构建 游戏 。 接 下 来 ， 对 这 个 游戏 添加 一 些 最 后 的 功能 。 


4.7 ”游戏 的 润色 


这 一 节 向 游戏 添加 最 后 的 功能 。 首 先 要 做 的 是 改善 游戏 的 背景 。 
到 目前 为 止 ， 游 戏 中 的 背景 仍然 是 摄像 机 中 关联 的 背景 色 。 不 过 ， 有 既 
然 游 戏 设 定 是 发 生 在 太空 中 ， 那 么 也 应 该 为 游戏 添加 一 个 太空 图 片 作 
为 背景 。 为 了 实现 这 个 功能 ， 需 要 在 场景 中 创建 一 个 新 的 四 边 形 

(Quad) 对 象 来 展示 一 张 太 空 背景 图 片 。 在 菜单 栏 上 依次 选 

中 “GameObject | 3D Object| Quad”。 转动 这 个 对 象 ， 并 将 其 同 下 移动 ， 
使 它 成 为 一 个 平 的 、 垂 直 对 齐 的 背景 ， 可 以 调整 对 象 的 大 小 ， 如 图 4.39 
所 示 包 
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图 4.39 ”为 关卡 创建 一 个 背景 ， 建 立 一 个 四 边 形 (Quad) 对 象 


将 太空 贴图 从 项 目 (Project) 面板 处 拖 忠 到 场景 中 的 四 边 形 对 象 
上 ， 将 这 个 贴图 作为 四 边 形 对 象 的 材质 。 设 置 成 功 之 后 ， 选 中 四 边 形 


对 象 然后 在 对 象 Inspector 面 板 修改 材质 属性 中 的 “Tiling” 的 值 ， 
将 “Tiling” 的 “X” 和 “Y” 的 值 都 修改 为 图 4.40 所 示 的 3。 
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图 4.40 ”配置 贴图 的 tiling 


如 果 贴 图 看 起 来 是 不 完整 的 ， 那 么 就 需要 检查 一 下 贴图 的 导入 设 
置 。 具 体 的 步骤 是 : 在 项 目 (Project) 面板 中 选中 贴图 ， 然 后 在 对 象 
Inspector 面 板 里 ， 检 查 “Texture Type” 是 否 被 正确 地 设置 为 了 “Texture”， 
以 及 “Wrap Mode” 的 值 是 否 被 正确 地 设置 为 了 “Repeat”， 如 图 4.41 所 
示 。 
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图 4.41 配置 贴图 以 实现 无 颖 拼接 


当前 已 经 有 了 一 个 合适 的 背景 。 接 下 来 ， 为 这 个 游戏 添加 一 些 循 
环 播放 的 背景 音乐 。 首 先 在 项 目 (Project) 面板 中 的 Audio 文 件 夹 中 选 
中 音乐 文件 ， 完 成 选中 操作 之 后 ， 要 在 对 象 检 查 (Inspector) 面板 确保 
音乐 的 Load Type” 属 性 的 值 为 "Streaming”， 并 且 禁 用 了 “Preload Audio 
Data” 属 性 ， 如 图 4.42 所 示 。 这 样 设置 之 后 就 可 以 减少 Unity 游 戏 开 始 时 
载 入 音乐 的 时 间 ， 无 需 在 场景 开始 的 时 候 将 全 部 的 音乐 文件 一 次 性 载 
入 到 内 存 中 。 
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图 4.42 ”为 循环 播放 设置 Audio 文 件 


接 下 来 ， 在 场景 中 创建 一 个 新 的 空 游 戏 对 象 ， 并 将 其 命名 
为 “Music”"， 然 后 从 项 目 (Project) 面板 上 将 音频 文件 拖 动 到 Music 对 象 
上 ， 并 作为 这 个 对 象 的 一 个 “Audio Source” 组 件 。“Audio Source” 组 件 用 
来 播放 音效 和 音乐 ， 如 图 4.43 所 示 。 


图 4.43 ”创建 一 个 具有 AudioSource 组 件 的 游戏 对 象 


在 对 象 检 查 (Inspector) 面板 中 的 “Audio Source” 组 件 处 ， 将 “Play 
On Awake” 和 “Loop” 两 个 单 选 框 都 选中 ， 这 样 束 可 以 确保 从 天 卡 开 始 一 
直到 结束 的 整个 游戏 过 程 中 ， 音 乐 都 能 一 直播 放 。 男 外 “Spatial 
Blend” 的 值 应 该 设置 为 0， 这 就 意味 着 这 个 声 首 是 以 2D 形 式 播放 的 。 简 
而 言 之 ，2D 的 声音 是 指 从 始 至 终 一 直 以 恒定 的 音量 播放 ， 而 跟 玩家 的 
位 置 元 关 ， 这 是 因为 2D 的 声音 是 没有 空间 定位 功能 的 。 而 3D 的 声 首 却 
恰恰 相反 ， 它 会 根据 玩家 所 处 的 位 置 不 同 而 不 同 ， 这 种 声音 在 游戏 中 
主要 是 指 枪 声 、 脚 步 声 、 爆 炸 声 等 ， 如 图 4.44 所 示 。 
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图 4.44 ”循环 播放 一 个 音乐 文件 


接 下 来 又 到 了 游戏 的 测试 时 间 了 ! 在 工具 栏 上 单 击 “Play” 按 钮 ， 然 
后 对 其 进行 测试 ， 如 果 音 乐 声 没有 正常 响起 来 ， 在 游戏 (Game) 选项 
卡 中 检查 “Mute Audio” 按 钮 是 否 被 启用 ， 如 图 4.45 所 示 。 
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4.8 测试 与 调试 


3D Sound Settings 


图 4.45 ”进行 游戏 测试 


当 整 个 游戏 开发 完成 之 后 ， 接 下 来 需要 做 的 就 是 花费 大 量 的 时 间 
对 游戏 进行 测试 ， 以 及 花费 大 量 的 精力 对 游戏 进行 调试 ， 从 而 消除 游 
戏 中 的 bug 和 失误 。 对 于 这 个 项 目 实例 来 说 ， 只 需要 很 少 的 调试 和 测试 
工作 ， 并 不 是 因为 游戏 很 商 单 ， 而 是 本 书 的 作者 在 本 书 的 写作 之 前 已 
经 化 费 了 大 量 的 时 间 和 经 历 对 这 个 实例 进行 检查 和 测试 ， 以 确保 实例 
的 正确 性 ， 好 为 读者 提供 优秀 的 阅读 体验 。 对 于 其 他 项 目 来 说 ， 束 需 
要 完成 大 量 的 测试 工作 。 可 以 使 用 Stats 面 板 来 开始 测试 工作 。 在 游戏 


(Game) 选项 卡 上 单 击 “Stats” 按 钮 就 可 以 打开 这 个 面板 ， 如 图 4.46 所 
A ° 


Audio: 


Level; -13.,4 dB 
Clipping: 0,09o 


Graphics: 


CPU: main ,13.8ms render thread:0,5ms 
Bat 10 Sa' by batching: 1 


nN casters: 1 
Inned meshes:; 0, ‘Animations: 0 


图 4.46 在 Stats 面 板 上 查看 游戏 的 性 能 


关于 Stats 面 板 的 详细 信息 可 以 在 本 书 的 第 2 革 中 找到 。 如 果 想 对 此 
深入 了 解 ， 可 以 访问 Unity 的 在 线 文 档 
http://docs.Unity3d.com/Manual/RenderingStatistics.html ° 


男 一 个 调试 工具 就 是 Profiler， 这 个 工具 是 十 分 有 用 的 。 当 在 Stats 
面板 中 发 现 了 一 个 常见 的 问题 后 ， as 如 采 硕 望 对 此 进行 深 
入 的 人 研究 ， ee 束 需 要 用 到 这 个 工具 。Profiler 的 详细 
言 息 将 在 第 6 章 中 介绍 ， 这 里 仅仅 对 它 进行 一 个 简单 的 介绍 。 可 以 在 应 
用 程序 菜单 中 依次 选中 “Window | Profiler” 来 获取 Profiler 工 具 ， 完 成 这 
个 操作 之 后 ， 将 会 出 现 图 4.47 所 示 的 Profiler 窗 口 。 


人 Profiler 
Add Profiler 


ox 
Record Deep Profile Profile Editor Active Profiler 7 E rame: re 4 , Current | 


Phys Ee 4ms ER 
本 GarbageCo 
三 VSYnc 


wm Gi 
天 Others lms (1000FPS) 


Rendering 
Batches 
Set| 


a 
本 Triangles 
eltices 


Hierarchy 2 CPU 
No frame data available 


:--ms GPU:--ms Frame Debugger 


图 4.47 ”打开 Profiler 和 窗口 


当 Profiler 窗 口 打 开 之 后 ， 单 击 工 具 栏 上 的 “Play” 按 钮 来 测试 游戏 。 
这 时 ，Profiler 窗 口中 会 以 及 y 色 图 的 形式 展示 一 些 数据 如 图 4.48 所 示 ， 
绿色 的 曲线 表示 数据 泻 染 的 性 能 。 要 想 读 懂 这 些 曲 线 ， 需 要 一 些 经 
验 ， 但 是 有 一 条 通用 的 规则 :注意 波峰 ， 也 就 是 图 表 中 出 现 的 剧烈 波 
动 (剧烈 起 伏 ) ， 因 为 这 可 能 意味 着 一 个 问题 ， 特 别 是 起 伏 和 帧 速率 
下 降 相 一 致 的 时 候 


Tree 百 
@ Profiler Wn ra Re 
Add Profiler Record Deep Profile Profile Editor Active Profiler ™ Clear 


Memory 
中 Total Allocated 


Hierarchy CPU:13,72ms GPU:0,00ms Frame Debugger 


WaitForTargetFPS 91.9% 91.9% 1 0B 12,62 12,62 四 
广 Camera,Render 3.1% 0.2% 1 0B 0.43 0.03 
Overhead 12% 1.2% 1 oB 0,17 0,17 


图 4.48 ”游戏 进行 时 的 数据 所 填充 的 Profiler 


如 果 进 一 步 深入 研究 ， 就 先 暂停 游戏 ， 然 后 单 击 图 形 。 水 平 轴 (X 
轴 ) 代表 的 是 最 新 的 帧 ， 自 直 轴 代 表 的 是 工作 负荷 当 单 击 图 中 某 一 
帧 的 时 候 ， 吕 会 在 帧 上 添加 一 个 线性 的 标记 ， 表 示 要 对 这 个 帧 进行 深 
入 的 研究 。 在 图 的 下 方 ， 列 出 了 当前 帧 的 所 有 主要 进程 ， 这 是 一 个 典 
型 的 按照 进程 所 占有 的 工作 量 排 序 的 列表 ， 工 作 量 最 大 的 排 在 了 最 上 
方 ， 如 图 4.49 所 示 。 


人 profiler | ， ee 本 
Add Profiler - Record Deep Profile Profile Editor Active Profiler ™ Clear Frame: 


5ms (200FPS) 


Rendering 
在 Batches 
时 SetPass Calls 
不 Triangles 

显 Weltices 
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后 这 Memory 

Total Allocated 
Texture Memory 
Mesh Memory 


Hierarchy CPU;1i,96ms GPU;0,00ms Frame i 


Overview "Serr tons Gc Alioe iiarmel Serf me] | obj 


WaitForTargetFPS 84,5% 84.,5% 1 0B 10,11 10,11 和 | NB 


ProcessRemoteInput 1 C '75 
PY Camera.Render 3,8% 0.3% 和 DB 0.46 0.04 
Overhead 16% 1.6% 1 DB 0.19 0.19 
PY BehaviourUpdate LE DL 下 70 B 0,14 0,01 1 
Pb AudioManager,Update 05% DAN . 0B 0.06 0,05 
PY Monobehaviour,OnNMouse_ 0.4% 0.0% 1 0B 0,05 0.00 
GameView,.GetMainGameViewR': 0.3% 0.3% 汪 64B 0.03 0.03 
Profiler,FinalizeAndSendFrame 0.2% 0,2% 3 0B 0,03 0,03 
PY Canvas,RenderOverlays 0.1% 0.0% bE 0B 0,02 0,01 
Canvas,SendWillRenderCanvas，0,15%o 0.1% 1 0B 0.01 0.01 
> GUI.Repaint 0.0% 0.0% 1 DB 0.01 0,00 
HandleUtilty,SetwiewInfof) 0.0% 0.0% 主 DB 0,00 0,00 


图 4.49 使 用 Profiler 研 究 性 能 数据 


关于 Profiler 的 更 多 详细 信息 可 以 在 Unity 的 在 线 帮助 文档 
http://docs.Unity3d.com/Manual/Profiler.html 处 找到 。 


4.9 ”游戏 的 构建 


现在 已 经 可 以 将 完成 的 游戏 打包 成 为 可 独立 执行 的 文件 发 送 给 杀 
朋 好 友 ， 或 者 测试 者 了 ! 这 个 过 程 和 第 2 章 中 介绍 的 构建 过 程 是 一 样 
的 。 有 具体 的 过 程 是 从 应 用 程序 菜单 中 依次 选中 “File | Build Settings”， 然 
后 在 弹出 的 Build 对 话 框 中 ， 单 击 “Add Current” 按 钮 ， 将 关卡 添加 到 
Level 列 表 中 。 或 者 ， 也 可 以 将 关卡 从 项 目 (Project) 面板 上 拖 电 到 
Level 列 表 上 ， 如 图 4.50 所 示 。 


Build Settings 


Scenes In Build 
ML Scenes/Level 01,unity 


| 


| Add Current | 


wy PC, Mac & Linux Standalone 


Standalone <4 Target Platform | Windows +| 
Architecture | x86 4 | 
Development Build mm 
Autoconnect Profiler 
Script Debugging 
| switch Platform || Player Settings,,, | | Build | Build And Run | 
图 4.50 ”构建 (Build) 宇宙 设计 游戏 的 准备 


对 于 这 个 游戏 ， 目 标 平 台 应 该 是 windows。 因 此 ， 应 该 在 Platform 
平台 列表 上 选中 “PC, Mac & Linux Standalone” 选 项 。 如 果 “Switch 
Platform” 按 钮 (位 于 左下 方 ) 不 是 灰色 的 ， 那 么 需要 按 下 这 个 按钮 ， 
这 样 Unity 就 会 按照 所 选 定 的 平台 来 构建 \Build) 游戏 ， 而 不 是 其 他 的 
平台 。 单 击 “Build And Run” 按 钮 之 后 ，Unity 会 要 求 在 电脑 上 选择 一 个 


用 来 保存 构建 文件 的 文件 夹 ， 这 个 文件 夹 用 来 输出 和 保存 游戏 文件 。 
当 创 建成 功 之 后 ， 就 可 以 双击 这 个 可 执行 文件 ， 完 成 对 游戏 文件 的 运 
行 和 测试 ， 如 图 4.51 所 示 。 


TwinSstickShooter Configuration 区 到 
Graphics Input 
Screen resolution 1920 x 1080 ~ | Windowed 
Graphics quality Fantastic v 
Select monitor Display 1 (Left) 已 
| play! N- | Quit 


图 4.51 ”将 游戏 在 Windows 环 境 下 进行 测试 运行 


4.10 小结 


至 此 ， 已 经 完成 了 两 个 Unity 项 目 。 第 一 个 项 目 是 一 个 便 币 采集 游 
戏 ， 第 二 个 是 一 个 双 轴 射击 游戏 。 两 首都 是 比较 和 商 单 的 游戏 ， 龙 们 有 妖 
没有 依赖 于 高 级 的 力学 机 制 ， 也 没有 显示 出 复杂 的 功能 。 不 过 ， 即 使 
再 复杂 的 游戏 ， 也 还 生 由 基本 功能 所 组 成 的 ， 前 面 讲 解 过 的 内 容 中 池 


盖 了 这 些 基 本 功能 。 这 也 束 是 为 什么 要 对 Unity 的 实例 进行 深入 理解 。 
接 下 来 ， 将 要 创建 更 多 的 2D 游 戏 ， 会 涉及 到 更 多 的 关于 界面 、 图 像 精 
灵 、 物理 属性 等 内 容 。 


第 5 章 ”二 维 冒 险 游戏 (1) 


本 章 将 开始 一 个 全 新 的 项 目 ， 这 是 一 个 二 维 的 冒险 游戏 。 在 这 个 游 
戏 中 ， 玩 家 将 控制 一 个 来 自 外 星 的 角色 在 一 个 充满 危险 的 世界 完成 任 
务 。 这 个 项 目 将 包含 以 前 章节 中 讲 过 的 技术 和 思想 ， 同 样 也 会 引入 新 的 
各 种 技术 ， 例 如 复杂 的 碰撞 、 二 维 物 体 的 物理 属性 、 单 例 模 式 


(Singleton) 、 静 态 (Statics) 等 。 总 之 ， 本 章 将 会 涵盖 如 下 主题 : 


。 二 维 角 色 和 玩家 的 运动 
复杂 的 、 多 个 部 件 组 成 的 角色 
关卡 的 设计 

二 维 物理 属性 以 及 碰撞 的 检测 


本 章 的 原始 项 目 和 资源 可 以 在 本 书 配套 文件 中 的 “Chapter 05/Start” 文 件 
夹 中 找到 ， 如 果 没 有 建立 自己 的 项 目 ， 就 可 以 使 用 这 个 文件 来 开始 本 章 的 学 
习 。 


5.1 二 维 冒 险 游戏 一 一 开始 


冒险 游戏 需要 玩家 充分 发 挥 他 们 、 智 瓦 、 敏 捷 、 敏 锐 的 观察 能 力 以 
及 技巧 ， 才 能 获得 胜利 。 这 种 游戏 中 包含 了 一 些 有 危险 的 障碍 、 具 有 挑 
战 性 的 任务 ， 以 及 角色 之 间 的 互动 ， 但 这 种 互动 并 不 是 第 一 人 称 射 击 游 


戏 那 种 的 全 面 行动 。 要 开发 的 这 个 冒险 游戏 也 十 如 此 。 图 5.1 所 示 为 一 个 
游戏 进行 中 的 截图 。 在 这 个 游戏 中 ， 玩 家 将 需要 使 用 键 副 上 的 方向 键 或 
者 “W”A”S”D”4 个 键 来 控制 角色 的 移动 。 此 外 ， 他 们 还 可 以 使 用 空格 
键 来 完成 跳跃 动作 ， 靠 近 游 戏 中 的 角色 来 实现 与 他 们 的 互动 。 在 游戏 
中 ， 玩 家 将 从 NPC 角 色 处 领取 寻找 一 个 说 隐 藏 起 来 的 古代 宝石 的 任务 。 
玩家 必须 突破 重重 险阻 才能 找到 这 个 宝石 ， 然 后 将 这 个 宝石 党 回 到 NPC 
那里 完成 任务 。 


3 Unity (64bit) - scene_LevelO1.unity - Sample2D - PC Mac & Linux Standaione <DX11> = 局 荐 到 


File Edit Assets GameObject Component Mobilelnput W el 
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€ Game 


图 5.1 ”要 创建 的 二 维 冒 险 游戏 截图 


以 创建 一 个 新 的 空 Unity 项 目 作 为 游戏 设计 的 开始 ， 然 后 倒 
入 “Particles”“Effects”“Characters”“2D”“ParticleSystems” 和 “CrossPlatformlI 
nput” 等 资源 包 。 可 以 在 “Project Creation Wizard” 中 导入 这 些 资源 ， 也 可 
以 通过 在 应 用 程序 荣 单 中 选中 “Assets |Import Packages” 实 现 ， 如 图 5.2 所 
示 。 具 体 的 导入 过 程 和 第 1 章 中 导入 标准 资源 包 是 一 样 的 。 


sset packages 


加 | 日 | 风 
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四 
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图 5.2 ”在 项 目 创建 屏幕 中 为 创建 的 新 项 目 导 入 资源 包 


5.2 ”资源 的 导入 


从 上 一 节 创 建 的 空 项 目 开 始 ， 接 着 导入 需要 使 用 的 包括 玩家 角色 和 
环境 在 内 的 贴图 资源 。 这 些 需 要 导入 的 资源 可 以 在 本 书 的 配套 文件 中 
的 “Chapter05/Assets” 文 件 夹 中 找到 。 在 这 里 ， 利 用 Windows 的 资源 管理 
句 或 者 Mac 的 Finder 选 中 所 有 的 贴图 ， 然 后 将 它们 拖 忠 到 Unity 项 目 

(Project) 面板 中 的 Textures 文 件 夹 (如 有 果 这 里 不 存在 这 个 文件 来 ， 可 以 
创建 一 个 ) 。 完 成 操作 之 后 ， 束 将 所 有 的 贴图 导入 到 了 当前 项 目 中 ， 如 
国 时 3 所 中 冯 


Defaut | 思 | 最 | 日 | 冰 |@@| 帮 | 回 | 同 | 日 已 
i 2048 + 


Max Size 


& 


请 记 住 ， 始 终 都 可 以 使 用 缩 略图 调整 滑 块 (位 于 项 目 (Project) 面板 右 
下 角 ) 来 调整 缩 略 图 大 小 ， 这 样 就 可 以 对 贴图 资源 进行 观察 了 。 


默认 情况 下 ，Unity 会 假定 所 有 导入 的 贴图 都 要 应 用 到 场景 中 的 三 维 
模型 ， 例 如 立方 体 、 球 体 和 网 格物 体 上 。 在 大 多 数 情 况 下 ， 这 个 设 定 是 
正确 的 ， 因 为 大 多 数 的 游戏 都 是 三 维 的 。 然 而 ， 对 于 二 维 游戏 来 说 ， 例 
如 当前 正在 开发 的 这 个 游戏 ， 设 置 应 该 是 完全 不 同 的 。 在 本 例 中 ， 对 象 
不 会 向 远 处 移动 ， 或 者 渐 行 渐 远 ， 而 是 始终 与 摄像 机 保持 相同 的 距离 。 
为 此 ， 必 须要 对 所 有 导入 的 贴图 的 一 些 关 键 属性 进行 调整 。 具 体 的 实现 
步骤 是 ， 首 移 选 中 所 有 导入 的 贴图 ， 然 后 在 对 象 Inspector 面 板 中 ， 

将 “Texture Type” 域 的 内 容 从 “Texture” 改 变 为 “Sprite 2D and UI"， 然 后 取 
消 “Generate Mip Maps” 选 择 框 的 选中 状态 ， 然 后 单 击 “Apply” 按 钮 。 当 完 
成 这 些 操 作 之 后 ，Unity 会 标记 这 个 资源 可 以 应 用 到 二 维 对 象 上 。 它 允许 


将 透明 的 背景 应 用 到 合适 的 地 方 《例如 PNG 图 片 精灵 上 ) ， 这 对 图 像 泻 
染 也 有 很 重要 的 意义 ， 如 图 5.4 所 示 。 
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图 5.4 ”对 导入 的 贴图 进行 配置 


现在 已 经 导入 了 项 目 所 需要 的 全 部 贴图 。 下 面 来 配置 主场 景 、 游 戏 
摄像 机 以 及 目标 分 辨 率 。 首 移 切 换 到 Game 选 项 卡 ， 然 后 将 分 辨 率 设 置 
为 1024x600， 这 个 分 辨 率 可 以 很 好 地 应 用 在 大 量 设备 上 。 具 体 的 步 又 
是 ， 在 Unity 的 工具 栏 上 单 击 “Free Aspect”， 然 后 在 弹出 的 上 下 文 菜 单 中 
选中 “1024 x 600” 这 个 选项 ， 如 有 果 没 有 找到 这 个 选项 ， 可 以 单 击 列表 底 
部 的 “+ 按钮 来 添加 一 个 新 的 分 辨 率 ， 如 图 5.5 所 示 。 


€ Game | -三 | 四 Inspector | 
Display 1 $+ Free Aspect 7 Maximize on Play Mute aud 
Y Free Aspect 
5:4 
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x 
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图 5.5 ”添加 一 个 新 的 游戏 分 辩 率 


在 弹出 的 对 话 框 中 的 名 字 处 输入 一 个 自 定义 的 名 字 ， 然 后 
在 “Type” 的 下 拉 列 表 框 中 选中 “Fixed Resolution”， 最 后 在 “Width & 
Height” 后 面 的 文本 框 中 添加 需要 的 分 辨 率 的 值 。 完 成 之 后 ， 单 
击 “OK”， 上 自 定 义 的 分 辨 率 就 会 被 添加 到 Unity 中 的 可 选项 中 ， 如 图 5.6 所 
六 
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图 5.6 ”创建 自 定义 的 分 辨 率 


接 下 来 ， 将 场景 中 的 摄像 机 配置 为 二 维 工作 模式 ， 这 样 当 贴图 以 图 
像 精灵 的 形式 添加 之 后 ， 就 会 以 1:1 的 比例 显示 在 屏幕 上 。 首 先 ， 在 场景 
中 选中 主 摄像 机 ， 可 以 在 场景 视图 单 击 它 或 者 层次 (Hierarchy) 面板 中 
选择 它 。 然 后 ， 在 对 象 检 查 (Inspector) 面板 中 将 “Projection” 的 值 改 
为 “Orthographic”。 这 样 可 以 确保 对 象 以 一 个 真实 的 二 维 效果 显示 ， 而 没 
有 任何 的 透视 效果 。 最 后 将 摄像 机 的 Size 的 值 设置 为 3。 这 个 域 值 的 公式 
为 Screen Height / 2 / Pixel to World， 在 本 例 中 , “Screen Height” 的 值 为 
600，600/2= 300，300/100 = 3。 这 里 的 100 指 的 是 应 用 在 图 像 精 灵 贴 图 
上 的 像素 坐标 与 世界 坐标 的 转换 率 ， 表 示 世 界 坐 标 中 的 一 平米 对 应 贴图 


上 的 多 少 个 像素 ， 这 个 值 为 1 表示 1 个 像素 对 应 着 1 米 。 可 以 通过 在 “项 目 
(Project) 面板 ”中 选择 一 个 图 像 精灵 ， 然 后 在 对 象 检 查 (Inspector) 面 
板 的 “Pixel to World ratio” 中 修改 这 个 值 ， 如 图 5.7 所 示 。 
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图 5.7 配置 Orthographic 摄 像 机 的 “Size” 


当 对 摄像 机 和 场景 中 的 设置 进行 测试 时 ， 只 需要 从 项 目 (Project) 
面板 中 将 一 个 背景 贴图 拖 上 忠 到 场景 中 来 ， 背 景 贴图 的 大 小 应 该 精确 为 
1024x600， 这 样 才 适合 场景 的 背景 。 因 此 ， 当 背景 被 添加 a 到 场景 ， 而 且 
摄像 机 也 被 正确 地 配置 之 后 ， 背 景 贴图 就 会 填 满 整个 屏幕 ， 如 图 5.8 所 
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图 5.8 ”使 用 贴图 测试 摄像 机 的 设置 


5.3 ”开始 创建 游戏 的 环境 


本 游戏 要 包含 3 个 独立 ， 但 又 相互 关联 的 场景 ， ee 
险 ， 然 后 从 一 个 场景 移动 到 下 一 个 场景 。 玩 家 可 以 在 不 同 的 场景 中 进 
切换 ， 每 当 走 到 一 个 场景 的 边缘 的 时 候 ， 就 可 以 进入 到 下 一 个 场景 。 
个 场景 主要 包括 平台 (Platforms) 和 人 台阶 (Ledges) ， es 
满 了 危险 与 障碍 。 就 图 形 资 源 而 言 ， 每 个 场景 有 两 个 贴图 或 者 图 片 精灵 


一 一 前 景 和 背景 。 图 5.9 和 图 5.10 所 示 为 场景 1 的 实例 ， 图 5.9 束 是 背景 ， 


而 图 5.10 就 是 前 景 ， 其 中 包含 了 一 个 玩家 必须 穿越 的 完整 平台 和 人 台阶。 
这 些 文件 可 以 在 本 书 配 套 文件 的 “Chapter05/Assets” 文 件 夹 中 找到 。 


图 5.9 ”场景 的 背景 一 tex_level01_bck.png 


图 5.10 ”Scene 的 前 景 


teX_level01_design.png 


根据 图 5.9 和 图 5.10 创 建 第 一 个 关卡 ， 既 可 以 使 用 现 有 的 空 场景 ， 也 
可 以 创建 一 个 新 的 场景 ， 但 是 要 确保 场景 摄像 机 按照 其 原 有 的 大 小 来 显 
示 贴 图 。 然 后 ， 将 项 目 (Project) 面板 上 的 前 景 和 背景 图 像 精灵 拖 虚 到 
场景 中 。 这 两 者 都 会 作为 独立 的 图 像 精灵 对 和 象 添加 到 场景 中 ， 最 后 将 它 
们 的 位 置 都 设置 在 (0,0,0) ， 如 图 5.11 所 示 。 


夺 Scen 器 Animator -三 | & Game 二 @ Inspector 于 Lighting 六 * 三 
Shaded -| 2D || 涪 | 动 | 四 上 || Gizmos -| (erAT Display 1 *| | 1024x600 < Maximize on Play Mute aud 站” en 口 static v 


Tag | Untagged # | Layer | Default 

VY Transform 回头 , 
Position  X0 Yo Z0 
Rotation X0 Yo zo0 
Scale XI Yi zl1 

* .IM Sprite Renderer 回 交 , 
Sprite tex_level01_desig © 
Color 吐 Poesy 2 
Flip Dx DY 
Material sprites-Default | © 
Sorting Layer Default 4] 
Order in Layer 0 


| Add Component 


© Animation 号 -三 
入 


Assets Textures 


图 5.11 ”向 一 个 场景 中 添加 一 个 背景 和 前 景 


如 果 将 前 景 和 背景 贴图 一 起 选中 之 后 从 项 目 (Project) 面板 拖 忠 到 场景 
1， 当 松 开 鼠标 时 ，Unity 会 询问 是 否 想 要 创建 一 个 动画 。 在 这 个 案例 中 
Unity 会 假设 要 创建 一 个 动画 图 像 精 灵 ， 每 一 个 选中 的 贴图 都 将 成 为 动画 序列 
的 一 帧 。 如 果 不 想 要 这 样 做 ， 则 可 以 将 每 一 个 图 像 精 灵 拖 电 到 一 个 单独 的 
层次 (Hierarchy) 面板 ， 人 允许 前 景 和 背景 可 以 同时 看 到 。 


现在 两 个 图 像 精灵 对 象 都 被 添加 到 了 场景 中 ， 而 且 二 者 的 世界 坐标 
是 相同 的 ， 都 是 〈0,0,0) 。 问题 是 这 两 个 图 像 精灵 是 相互 重 登 的 ， 哪 一 
个 图 像 精灵 应 该 位 于 前 面 呢 ? 如 末 保 持原 样 ， 现 在 的 层次 顺序 下 出现 了 
冲突 和 混乱 ，Unity 也 不 能 始终 目 行 作出 正确 的 选择 。 有 两 种 解决 这 个 问 


题 的 方法 : 第 一 种 是 调整 图 像 精灵 Z 轴 上 的 坐标 ， 使 它 与 正 交 
(Orthographic) 摄像 机 的 距离 变 近 ; 另 一 种 方法 是 在 对 象 检查 
(Inspector) 面板 中 改变 Order 的 设置 。Order 值 大 的 图 像 精灵 意味 着 要 

在 Order 值 小 的 图 像 精 灵 前 面 。 这 里 将 使 用 这 两 种 方法 ， 如 图 5.12 所 示 。 

但 是 ， 注 意 Order 优 先 性 要 高 于 位 置 。 这 束 意 味 着 Order 值 大 的 对 象 总 是 

出 现在 Order 值 小 的 对 象 上 面 ， 即 使 将 Order 值 大 的 对 象 的 位 置 设置 到 了 

Order 值 小 的 对 象 的 后 面 。 
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图 5.12 ”在 场景 中 调整 图 像 精灵 的 顺序 


在 进一步 进行 游戏 开发 之 前 ， 要 对 场景 中 的 层次 结构 进行 组 织 ， 以 
避免 后 期 出 现 过 于 复杂 和 混乱 的 情况 。 依 次 选中 环境 中 的 每 一 个 对 象 ， 
并 给 每 一 个 对 象 赋予 合适 的 名 称 ， 为 背景 起 名 为 “scene_background”， 为 
前 景 起 名 为 “scene_foreground”。 接 下 来 ， 创 建 一 个 新 的 空 对 象 ， 并 将 该 
对 象 命名 为 Env (Environment 的 缩写 ) ， 它 将 是 环境 中 所 有 静态 对 象 的 
根 父 对 象 。 这 样 承 可 以 轻松 地 将 所 有 相关 对 象 归 于 一 类 。 可 以 在 应 用 程 
序 荣 单 处 依次 选中 “GameObject | Create Empty”， 将 创建 好 的 对 象 放置 在 
游戏 世界 的 原点 ， 然 后 将 背景 和 前 景 对 象 进行 拖 暇 操作 ， 使 它们 成 为 这 
个 对 象 的 子 对 象 ， 如 图 5.13 所 示 。 
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图 5.13 对 场景 的 层次 进行 组 织 


通过 切换 到 游戏 选项 卡 ， 可 以 得 到 一 个 关卡 的 初步 预览 ， 因 为 这 些 
画面 的 感觉 会 影响 到 游戏 者 的 情绪 。 这 种 感觉 可 以 通过 进一步 添加 摄像 
机 的 后 期 特效 来 加 强 。 这 些 特效 指 的 是 可 以 被 应 用 到 相机 上 的 基于 像素 
的 效果 。 它 们 会 在 每 一 帧 对 图 像 进行 泻 染 ， 最 终 加 重 了 游戏 的 气氛 。 在 
特效 包 中 包含 了 图 像 的 特效 ， 这 个 特效 包 在 项 目 创建 的 初期 就 已 经 导入 
过 了 。 如 果 没 有 人 完成 这 个 特效 包 的 导入 操作 ， 可 以 通过 依次 选择 菜单 栏 
上 的 “Assets | Import Package | Effects” 选 项 实现 , “Image Effects” 包 保存 
的 位 置 位 于 “Standard Assets/Effects” 文 件 来 ， 导 入 之 后 ， 可 以 在 应 用 菜 
单 栏 上 依次 选中 “Component | Image Effects” 来 将 选中 的 图 像 特 效 添 加 到 
选中 的 摄像 机 ， 如 图 5.14 所 示 。 
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图 5.14 ”向 选中 的 摄像 机 添加 图 像 特效 


对 于 现在 的 这 个 关卡 以 及 整个 游戏 中 所 有 其 他 关卡 ， 会 同 其 中 添加 
两 个 图 像 特效 ， 即 “Bloom Optimized” 和 “Noise and Grain”。 添加 之 后 ， 
还 需要 在 对 象 Inspector 面 板 中 对 “Sliders” 和 “Settings” 两 个 属性 进行 修 
改 ， 这 样 才能 够 实现 预期 的 效果 。 需 要 在 游戏 (Game) 选项 卡 中 不 断 
对 效果 进行 预览 ， 因 为 在 场景 (Scene) 选项 卡 中 是 看 不 到 图 像 效 果 变 
化 的 。 在 许多 情况 下 ， 这 些 设置 将 会 多 次 地 进行 党 试 ， 才 能 得 到 预期 的 
效 采 ， 如 图 5.15 所 示 。 


到 目前 为 止 ,场景 中 已 经 包含 了 从 贴图 文件 中 导入 的 前 景 和 背景 ， 
而 且 也 应 用 了 图 像 特效 资源 包 中 的 特效 。 这 是 一 个 不 错 的 开始 ， 但 是 还 
有 很 多 工作 需要 去 完成 ， 让 我 们 继续 努力 吧 。 
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图 5.15 ”应 用 在 游戏 摄像 机 上 的 图 像 特效 


现在 关卡 最 主要 的 问题 是 


还 缺乏 互动 性 。 确 切 地 说 ， 
家 对 象 拖 放 到 这 个 关卡 时 ， 然 后 按 下 工具 栏 上 的 “Play” 键 ， 


如 采 将 一 个 玩 
这 时 会 发 现 


玩家 将 从 地 板 和 墙壁 中 穿越 而 过 ， 这 是 因为 前 景 贴图 并 不 会 被 Unity 引 擎 
看 做 是 一 个 实体 ， 它 只 是 一 个 贴图 ， 仅 仅 是 一 个 表象 ， 而 并 非 是 实质 上 
的 存在 。 这 一 节 将 会 引入 物理 学 和 人 磁 撞 对 此 进行 完善 。 首 先 创建 一 个 临 
时 的 玩家 对 象 (这 不 是 最 终 版 本 ， 只 是 一 个 用 来 进行 测试 的 临时 白 盒 版 
本 ) ， 在 应 用 程序 菜单 上 依次 选中 “GameObject | 3D Object | Capsule”， 
在 场景 中 创造 一 个 胶 早 对 象 ， 将 Transform 组 件 中 的 Zz 值 进行 设置 ， 使 之 
与 前 景 贴 图 相 匹 配 (这 里 设置 为 -2) ， 生 成 这 个 对 象 之 后 ， 将 胶 宫 碰撞 
体 组 件 从 对 象 上 去 掉 。 默 认 情 况 下 ， 胶 赛 对 象 上 都 会 被 分 配 一 个 三 维 的 
碰撞 体 〈 例 如 胶 宫 碰撞 体 ) ， 这 个 碰撞 体 主 要 用 来 实现 三 维 世界 中 的 物 
理 属性 ， 但 是 这 是 一 个 二 维 的 游戏 。 如 有 果 想 要 移 除 这 个 碰撞 体 ， 在 对 象 
检查 (Inspector) 面板 上 单 击 “Capsule Collider" 组 件 右上 角 的 齿轮 
标 ， 然 后 在 出 现 的 菜单 上 选中 “Remove Component”， 如 图 5.16 所 示 。 
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图 5.16 将 胶 赛 碰撞 体 组 件 移 除 


为 了 使 这 个 对 象 具 有 二 维 世界 的 物理 属性 ， 需 要 从 应 用 程序 菜单 处 
依次 选中 “Component | Physics 2D | Circle Collider” 来 添加 一 个 圆 形 磁 接 
体 组 件 ， 成 功 添加 之 后 ， 在 对 象 Inspector 面 板 处 修改 圆 形 碰撞 体 组 件 
的 “Offset* 和 “Radius” 值 ， 这 样 就 可 以 调整 胶 早 对 象 圆 形 人 页 撞 体 的 大 小 和 
位 置 ， 使 得 它 与 玩家 角色 脚 的 大 小 相近 似 。 如 果 硕 望 更 容易 地 对 圆 形 碰 
撞 体 进行 位 置 的 调整 ， 可 以 将 场景 (Scene) 视图 模式 切换 
成 “Wireframe” 和 “2D” 模 式 。 在 视图 工具 栏 使 用 “2D Toggle” 按 钮 和 “Scene 
Render” 模 式 中 的 下 拉 按 钮 来 实现 模式 的 切换 ， 如 图 5.17 所 示 。 
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图 5.17 对 玩家 角色 的 圆 形 碰 撞 体 进行 调整 


接 下 来 ， 如 果 需 要 让 圆 形 磁 撞 体 具有 二 维 世 界 的 物理 属性 ， 就 得 问 
胶 宫 对象 添 加 一 个 刚体 (Rigidbody) 组 件 。 首 先 ， 要 在 应 用 程序 荣 单 中 
依次 选中 *Component | Physics 2D |RigidBody 2D”， 在 游戏 模式 中 对 它 能 
否 正常 工作 进行 预览 。 当 单 击 “Play 图标 时 ， 胶 赛 对 象 就 会 在 重力 的 作 
用 下 掉 落 ， 并 罕 过 前 景 中 的 地 面 ， 如 图 5.18 所 示 。 
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图 5.18 ”向 一 个 测试 


的 角色 添加 一 个 “Rigidbody 2D” 组 件 


现在 是 时 候 将 前 景 贴图 作为 一 个 统一 的 物理 整体 了 。 此 时 的 测试 玩 
家 角色 会 罕 过 地 面 ， 当 然 这 并 不 是 所 希望 的 。 为 了 解决 这 个 问题 ， 需 要 
为 前 景 环境 添加 一 个 人 页 撞 体 。 其 中 一 种 办 法 就 是 使 用 “Edge Collider 
2D”， 它 可 以 帮助 你 围绕 图 像 手动 地 画 出 一 个 与 地 形 近似 的 多 边 形 网 格 
磁 撞 体 。 首 先 在 场景 中 选中 前 景 ， 然 后 从 应 用 程序 菜单 中 依次 选 
中 “Component | Physics 2D | Edge Collider 2D”， 这 样 就 可 以 为 前 景 对 象 
添加 上 一 个 “Edge Collider 2D” 组 件 ， 如 图 5.19 所 示 。 
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图 5.19 ”添加 一 个 “Edge Collider 2D” 


默认 情况 下 ， 一 个 添加 进来 的 "Edge Collider 2D” 对 选中 的 对 象 和 其 


他 对 象 来 说 并 没有 什么 明显 的 效果 ， 仅 仅 是 在 场景 中 出 现 了 一 条 


穿 整 个 屏幕 的 横 线 。 当 Gizmos 工 具 按钮 司 用 之 后 ， 在 游戏 (Game) 选 


项 卡 中 就 可 以 看 到 这 条 线 ， 或 者 在 场景 (Scene) 选项 卡 中 选中 


Foreground 对 象 时 ， 也 可 以 看 到 这 条 线 。 如 果 玩 家 的 位 置 位 于 这 条 横 线 
的 上 方 ， 在 工具 栏 上 按 下 “Play” 键 ， 玩 家 角色 就 会 掉 落 到 这 条 横 线 上 ， 


并 将 这 条 横 线 看 作 是 一 个 固体 的 平面 ， 如 图 5.20 所 示 。 
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图 5.20 “Edge Collider 2D” 十 分 适合 模拟 地 平面 和 国体 表 


~ 


当然 


然 ， 地形 并 不 是 一 个 笔直 的 平面 。 这 个 地 形 既 有 起 伏 的 地 形 ， 也 
有 平坦 的 地 形 。 使 用 “Collider Edit* 模 式 可 以 将 “Edge Collider 2D” 组 件 绘 
制 的 与 地 形 十 分 近似 。 可 以 在 对 象 检查 (Inspector) 面板 中 单 击 “Edit 
Collider” 按 钮 来 进入 这 个 模式 ， 如 图 5.21 所 示 。 
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图 5.21 ”使 用 “Edit Collider”* 模 式 修改 “Edge Collider 2D” 的 形状 


当 “Edit Collider” 模 式 激活 之 后 ， 束 可 以 改变 碰撞 体 的 形状 使 它 适应 
地 形 。 现 在 把 注意 力 放 在 其 中 一 块 区 域 上 ， 例 如 地 形 的 右 下 角 。 把 鼠标 
的 光标 移动 到 “Edge Collider”( 绿 线 ) 边缘 点 的 上 方 ， 然 后 单 击 这 个 
点 ， 就 可 以 拖 动 它 改 变 位 置 ， 将 这 个 点 拖 动 到 场景 的 右 侧 ， 如 图 5.22 所 
最 
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图 5.22 ”对 “Edit Collider” 进 行 变形 以 适应 地 形 


接 下 来 ， 拖 虑 “Edit Collider 左 侧 的 点 来 匹配 右 侧 小 岛 最 左边 的 点 ， 
如 图 5.23 所 示 。 
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图 5.23 ”定位 到 右 侧 小 岛 的 左边 缘 点 


现在 ， 左 右边 缘 点 的 位 置 已 经 确定 了 ， 再 添加 一 些 额 外 的 点 来 改变 
它 的 形状 ， 使 其 与 右边 的 岛屿 形状 相 吻 合 。 将 光标 移动 到 直线 上 的 任意 
一 点 ， 执 行 单 击 操作 并 拖 动 以 插入 一 个 新 的 点 ， 将 新 点 的 位 置 与 岛屿 相 
匹配 。 不 断 重 复 这 个 过 程 ， 直 到 添加 了 所 有 勾画 岛屿 大 致 曲线 所 需要 的 
点 ， 如 图 5.24 所 示 。 
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图 5.24 打造 一 个 与 最 右 侧 岛屿 相 匹配 的 Edge Collider” 


现在 已 经 拥有 了 一 个 与 最 右 侧 岛屿 地 形 相 匹配 的 线条 。 创 建 完 这 个 
线条 之 后 ， 在 对 象 检 查 (Inspector) 面板 中 再 次 单 击 “Edit Collider” 按 
钮 ， 这 样 承 离开 了 “Edit Collider” 模 式 。 接 着 为 图 中 的 剩余 岛屿 创造 伴 撞 
体 (Collider) ， 癌 这 个 对 象 继续 添加 新 的 EEdge Collider”。 可 以 向 同一 
个 对 象 添 加 任意 数量 的 *Edge Collider*"， 每 一 个 碰撞 器 都 应 该 匹配 完整 
地 形 结构 中 的 一 个 独立 岛屿 ， 如 图 5.25 所 示 。 
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图 5.25 ”在 一 个 对 象 上 应 用 多 个 “Edge Collider” 来 模拟 复杂 地 形 


现在 已 经 将 多 个 “Edge Collider” 添 加 到 了 一 个 前 景 对 象 上 ， 使 它 与 
场景 中 的 地 形 相 匹 瑟 。 可 以 来 测试 一 下 ， 首 先 单 击 工 具 栏 上 的 “Play” 图 
标 ， 这 次 可 以 看 到 玩家 的 胶 赛 对 象 与 地 形 的 交互 。 这 一 次 ， 胶 宫 对 象 不 
会 再 穿 过 地 面 了 ， 而 是 落 在 了 地 面 上 。 这 说 明 地 形 已 经 成 为 游戏 物理 系 
统 中 的 一 部 分 了 ， 如 图 5.26 所 示 。 
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图 5.26 胶 守 对象 通过 “Edge Colliders” 与 地 形 发 生 交互 


现在 已 经 拥有 一 个 使 用 了 “Edge Collider” 组 件 的 完整 地 形 ， 这 个 地 
形 不 仅仅 是 看 起 来 跟 预 期 一 样 ， 而 且 也 已 经 成 为 玩家 角色 和 其 他 物理 实 
体 的 障碍 。 当 然 ， 到 现在 为 止 ， 一 直 在 使 用 一 个 近似 玩家 的 粗糙 模型 ， 
现在 是 时 候 对 其 进行 改进 了 。 


5.5 创建 一 个 玩家 


游戏 中 的 玩家 《Player) 角色 是 一 个 可 以 被 控制 的 小 型 绿色 生物 ， 
玩家 可 以 通过 使 用 大 量 的 游戏 设备 来 控制 这 个 角色 的 行为 ， 例 如 行走 、 
跳 路 、 互 动 等 。 上 一 市 创建 了 一 个 白 盒 (原型) 角色 来 测试 与 环境 之 间 
的 互动 ， 现 在 要 开发 一 个 更 加 深入 的 玩家 角色 ， 图 5.27 所 示 为 本 草 早 些 
时 候 导 入 的 角色 贴图 ， 这 个 贴图 包含 了 玩家 的 肢体 等 部 位 。 
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图 5.27 在 同一 张贴 图 中 的 玩家 角色 和 它 的 四 胶 


图 5.27 所 示 的 玩家 贴图 被 称 为 贴图 册 (Atlas Texture) 或 者 图 像 精 灵 
表 (Sprite Sheet) ， ee 
角色 的 所 有 部 分 。 这 个 贴图 的 问题 就 在 于 ， 当 将 它 从 项 目 (Project) 面 
板 闪 动 到 场景 中 时 ，， es 。 这 是 因为 
Unity 会 将 所 有 独立 的 部 分 看 作 是 一 个 图 像 精灵 。 但 是 ， 这 些 部 分 应 该 被 
分 成 独立 的 单元 ， 如 图 5.28 所 示 。 
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图 5.28 ”玩家 图 像 精 灵 贴 图 需要 被 分 割 成 独立 的 部 分 


使 用 “Sprite Editor" 将 这 个 角色 贴图 按照 吴 体 的 各 个 部 位 分 割 成 独立 
的 部 分 。 使 用 这 个 工具 时 ， 需 要 首先 在 项 目 (Project) 面板 上 选中 角色 
贴图 ， 然 后 在 对 象 Inspector 面 板 ， 将 “Sprite Mode” 的 值 由 “Single” 修 改 
为 “Multiple”*， 之 后 单 击 “Apply” 键 ， 最 后 单 击 “Sprite Editor” 按 钮 来 打开 
Sprite 编 辑 工 具 ， 利 用 这 个 工具 就 可 以 将 整个 贴图 分 割 成 多 个 部 分 ， 如 
图 5.29 所 示 。 
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图 5.29 ”将 图 像 精灵 的 模式 指定 为 “Multiple” 


使 用 “Sprite Editor” 工 具 就 可 以 将 一 个 贴图 的 各 个 部 分 分 割 成 独立 
的 、 分 离 的 单位 。 可 以 采用 在 贴图 中 的 每 一 个 应 该 独立 的 图 像 上 画 一 个 


矩形 ， 这 个 矩形 可 以 通过 使 用 鼠标 在 图 片上 拖 暇 出 一 个 区 域 来 实现 ， 如 
图 5.30 所 示 。 


图 5.30 ”手动 分 割 图 像 精 灵 


现在 已 经 实现 利用 手工 的 方法 对 贴图 进行 切割 ， 不 过 Unity 引 擎 还 可 
以 利用 对 孤立 像素 区 域 识 别 来 自动 地 对 贴图 进行 切割 。 也 可 使 用 这 种 方 
法 : 在 “Sprite Editor 窗 口 的 左上 和 角 单 击 *Slice” 按 钮 ， 如 图 5.31 所 
不 o 
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图 5.31 使 用 切片 (Slice) 工具 


在 切片 (Slice) 工具 窗口 中 ， 要 确保 “Type” 被 设置 为 "Automatic”， 
这 意味 着 Unity 引 警 将 会 目 动 检测 每 个 图 像 精 灵 的 位 置 。“Pivot” 的 值 应 该 
保留 为 默认 的 “Center”"， 确 定 每 一 个 图 像 精灵 的 轴 心 点 。Method 应 该 
为 “Delete Existing”， 这 意味 着 任何 现 有 贴图 的 图 像 精灵 或 者 Slice 都 将 会 
被 删除 ， 并 由 新 生成 的 切片 (Slice) 完全 替换 。 然 后 ， 单 击 “Slice” 按 钮 
确认 操作 ， 贴 图 会 被 切 成 多 个 独立 的 具有 清晰 边界 的 图 像 精灵 ， 如 图 
S02 


图 5.32 ” 切 好 的 图 像 精灵 


现在 的 贴图 已 经 被 分 割 成 了 多 个 图 像 精灵 : 涉 、 驱 干 、 手 壁 和 腿 。 
最 终 在 场景 中 出 现 的 玩家 角色 显然 应 该 有 两 只 腹 膊 和 两 条 腿 ， 它 们 需要 
通过 对 图 像 精灵 复制 来 实现 。 最 后 的 过 程 是 为 图 像 精灵 设置 一 个 轴 心 
点 ， 图 像 精灵 会 围绕 这 个 点 旋转 。 这 一 点 对 将 来 为 角色 设置 动画 是 十 分 
重要 的 。 站 和 完 从 为 头 部 设置 轴 心 点 开始 ， 在 编辑 器 中 选中 头 部 图 像 精 
灵 ， 然 后 拖 忠 枢 轴 手柄 〈 蓝 色 圆 圈 ) 来 重新 定位 图 像 精灵 的 旋转 中 心 ， 
将 手柄 拖 点 到 头 的 正 下 方 ， 大 概 就 是 头 与 脖子 相连 接 的 地 方 。 这 么 做 是 
有 原因 上 的 ， 因 为 头 要 以 这 一 点 为 中 心 摆动 。 当 移动 文 点 的 时 候 ， 应 该 可 
以 在 “Sprite Properties” 对 话 框 中 的 Custom Pivot 区 域 看 到 X 值 和 Y 值 的 变 
化 ， 这 个 对 话 框 位 于 “Sprite Editor" 右 下 角 ， 如 图 5.33 所 示 。 
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图 5.33 ”重新 定位 图 像 精 灵 的 轴 心 点 


接 下 来 ， 我 们 要 为 手臂 定位 轴 心 点 ， 这 
手臂 与 鹏 干 连接 的 位 置 ， 对 于 腿 来 说 ， 这 个 ， in 和 
连接 到 服 干 的 地 方 。 最 后 ， 对 于 驱 干 来 说 ， 点 
置 ， 如 图 5.34 所 示 。 
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图 5.34 ”为 玩家 角色 的 蝶 干 定位 轴 心 点 


以 上 操作 完成 之 后 ， 我 们 单 击 “Apply” 按 钮 来 确认 做 出 的 修改 并 关 
闭 “Sprite Editor”。 现 在 我 们 回 到 Unity 的 主 界面 ， 束 可 以 在 项 目 
(Project) 面板 中 看 到 角色 贴图 的 变化 。 具 体 来 说 ， 就 是 在 角色 贴图 上 
右手 边 部 分 多 了 一 个 箭头 图 标 。 当 单 击 这 个 箭头 图 标的 时 候 ， 这 个 贴图 
会 回 右 展开 ， 将 包含 的 所 有 独立 的 图 像 精灵 展开 成 一 行 ， 可 以 将 这 些 图 
像 精灵 各 日 拖 忠 到 场景 中 ， 如 图 5.35 所 示 。 


5 

© All Material 

All Model 

= All Script: 

和 All Prefabs 

TEAssets 

> Editor 
六 上 Standard Assets Head Torso Gem Platform 

加 

» , p = 
a 这 由 oh 
tex_levelO1_bck tex levelO1_desi.. tex level02_bck tex level02_desi.. tex_level02_hut tex level03 bck tex_level03_desi.. 


图 5.35 ”对 角色 图 像 精灵 进行 预览 


现在 我 们 已 经 将 贴图 中 所 有 玩家 的 图 像 精灵 分 离 出 来 了 ， 是 时 候 来 

建立 一 个 游戏 场景 中 的 角色 了 。 首 先 在 应 用 程序 菜单 处 选 
中 “GameObject | Create Empty” 来 创建 一 个 空 的 游戏 对 象 ， 并 将 这 个 对 象 
命名 为 “Player”"”， 在 对 和 象 Inspector 面 板 中 为 其 Tag 分 配 “Player”。 这 个 对 象 
将 成 为 游戏 中 玩家 角色 最 高 的 父 对 象 。 这 个 对 象 的 子 对 象 承 是 玩家 角色 
的 组 成 部 分 一 一 颈 干 、 手 臂 和 腿 。 我 们 将 驱 干 网 像 精灵 从 项 目 

(Project) 面板 拖 忠 到 层次 (Hierarchy) 面板 使 之 成 为 玩家 对 象 的 子 对 
象 ， 如 图 5.36 所 示 。 
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图 5.36 ”开始 设计 一 个 玩家 角色 


在 成 功 添 加 了 玩家 角色 的 颈 干 之 后 ， 我 们 接着 癌 里 面 添 加 手 侣 和 
腿 。 手 壁 应 该 被 添加 为 肛 干 的 子 对 象 ， 因 为 园 干 决定 了 手 辟 的 位 置 。 不 
过 ， 腿 却 应 该 税 添 加 为 玩家 角色 的 子 对 象 ， 这 样 腿 和 园 干 是 平 级 的 关 
系 ， 这 是 因为 哎 干 的 运动 可 以 与 腿 不 相干 。 图 5.37 中 给 出 了 完整 的 层次 
安排 。 每 当 添 加 一 个 肢体 后 ， 需 要 对 其 进行 移动 ， 使 之 出 现在 正确 的 位 
置 。 例 如 头 应 该 位 于 脚 的 上 方 等 。 
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图 5.37 构建 一 个 游戏 角色 


默认 情况 下 ， 身 体 各 个 部 分 的 泻 染 顺 序 可 能 是 不 正确 的 ， 这 是 由 于 
它们 在 “Sprite Renderer” 组 件 中 的 序号 都 是 相同 的 。 这 也 就 意味 着 Unity 
可 能 按照 任意 的 顺序 来 对 每 个 部 分 进行 渲染 ， 例 如 允许 手臂 出 现在 头 部 
的 前 面 ， 腿 出 现在 身体 的 前 面 等 。 为 了 修正 这 个 问题 ， 我 们 将 依次 选择 
每 个 部 分 并 为 其 指定 适当 的 顺序 值 ， 要 注意 的 是 每 个 部 分 的 顺序 值 要 大 
于 背景 的 顺序 值 ， 小 于 前 景 的 顺序 值 。 这 里 为 身体 分 配 的 顺序 值 是 
103， 头 的 顺序 值 是 105， 左 手臂 为 102， 右 手臂 为 104， 左 腿 为 100， 碳 
腿 为 101， 如 图 5.38 所 示 。 
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图 5.38 身体 部 分 的 顺序 值 


现在 已 经 成 功 地 配置 了 胶体 的 洽 染 顺序 。 接 下 来 是 为 玩家 角色 设置 
页 撞 和 物理 属性 。 为 了 实现 这 些 属性 ， 需 要 癌 角 色 添 加 两 个 碰撞 体 ， 一 
个 圆 形 碰 撞 体 用 来 近似 模拟 玩家 角色 的 脚 ， ee 
与 地 面 发 生 了 接触 ， 一 个 盒子 碰撞 体 用 来 近似 模拟 包括 头 部 在 内 的 整 
身体 。 首 先 选 中 Player 对 象 (位 于 最 顶端 的 对 象 ，， 然 后 依次 单 
击 “Component | Physics 2D | Circle Collider 2D” 和 “Component | Physics 2D 
| Box Collider 2D”， 添 加 完 的 效果 如 图 5.39 所 示 。 


Tag | Untagged +$| Layer | Default 攻 
ww Transform 
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霹 区 circle Collider 2D 回 翅 
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图 5.39 ”向 玩家 对 象 添 加 两 个 碰撞 体 一 一 圆 形 碰撞 体 和 盒子 碰撞 体 


圆 形 伴 撞 体 是 特别 重要 的 ， 这 是 因为 它 是 用 来 检测 角色 是 否 接触 地 
面 的 主要 手段 ， 也 可 以 用 来 检测 角色 移动 中 与 地 面 的 接触 。 基 于 这 个 原 
， 应 该 给 这 个 圆 形 伴 撞 体 r 分 配 一 个 物理 材质 来 保证 当 它 在 场景 中 移 
动 时 不 会 产生 摩擦 而 阻止 角色 的 运动 。 为 了 实现 这 个 功能 ， 需 要 创建 一 
个 新 的 物理 材质 ， 首 先 在 项 目 (Project) 面板 的 空白 处 单 击 鼠标 右键 ， 
然后 在 弹出 的 上 下 文 菜单 中 依次 选择 “Create | Physics2D Material”， 为 这 
个 材质 命名 为 “Low Friction”， 如 图 5.40 所 示 。 
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图 5.40 


在 项 目 (Project) 面板 上 选中 新 创建 的 “Physics2D” 材 质 ， 然 
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新 的 物理 材质 
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后 在 对 


象 检 查 (Inspector) 面板 上 将 它 的 Friction 设 置 为 0.1。 之 后 从 项 目 
(Project) 面板 上 将 这 个 “Physics2D?” 材 质 拖 电 到 Player 对 象 的 


CircleCollider2D 组 件 中 的 Material 后 面 的 位 置 ， 如 图 5.41 所 示 。 利 用 这 些 
设置 ， 玩 家 角色 就 可 以 表现 得 更 为 真实 。 
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图 5.41 ”为 玩家 角色 分 配 一 个 物理 材质 


最 后 给 Player 对 象 分 配 一 个 “RigidBody2D”， 并 将 “Linear 
Drag” 和 “Gravity Scale” 的 值 都 设置 为 3。 此 外 ， 将 “Collison Detection” 的 
值 改变 为 “Continuous”"， 这 样 可 以 获得 最 精确 的 碰撞 检测 ， 人 然后 
将 “Freeze Rotation” 后 面 的 Z 复 选 框 选中 ， 这 是 因为 玩家 角色 不 应 该 转 
动 。 现 在 已 经 拥有 了 一 个 具备 完整 物理 属性 的 玩家 角色 ， 如 图 5.42 所 
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图 5.42 ”为 玩家 角色 设置 物理 属性 


5.6 ”编写 控制 玩家 移动 的 脚本 


现在 这 个 游戏 已 经 包含 了 一 个 拥有 人 碰撞 属性 的 环境 ， 一 个 由 多 个 部 
分 组 成 的 可 以 和 环境 进行 交互 的 玩家 对 象 。 人 然而， 到 现在 为 止 玩家 角色 
仍然 是 无 法 控制 的 ， 本 市 将 进一步 开发 控制 器 的 功能 。 用 户 将 使 用 两 个 
主要 的 输入 机 制 ， 就 是 运动 《向 左 或 者 向 右 行走 和 跳跃 。 这 个 输入 可 
以 轻松 地 使 用 CrossPlatformInputManager 包 来 读 取 ， 这 个 包 是 Unity 自 带 
的 资源 包 。 这 个 包 在 项 目 创建 的 时 候 就 已 经 导入 了 ， 不 过 现在 一 样 可 以 
通过 在 应 用 程序 呈 单 上 依次 单 击 “Assets | Import Package | 


CrossPlatformInput" 来 导入 。 完 成 了 导入 操作 之 后 ， 打 开 *Assets | 
CrossPlatformInput | Prefabs” 文 件 夹 ， 然 后 将 “MobileTiltControlRig 
prefab” 拖 上 忠 到 场景 中 。 前 面 的 章 市 涉及 过 这 个 预 设 体 ， 它 可 以 读 取 一 些 
设备 上 的 输入 数据 ， 并 将 其 映射 到 水 平和 与 直 轴线 ， 如 图 5.43 所 示 。 
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图 5.43 ”器 平 台 输入 预 设 体 实现 了 方便 的 多 设备 控制 


现在 来 编写 玩家 角色 控制 的 脚本 。 首 先 创建 一 个 名 
为 “PlayerControl.cs” 的 新 脚本 ， 然 后 将 这 个 脚本 附加 到 Player 角 色 上 。 下 
面 的 代码 示例 5.1 给 出 了 这 个 脚本 的 完整 代码 。 


代码 示例 5.1: 


using UnityEngine; 

using System.Collections; 

Using UnityStandardAssets.CrossPlatformInput; 
// 


public class PlayerControl : MonoBehaviour 


public enum FACEDIRECTION {FACELEFT = -1, FACERIGHT = 1}; 
//Player 对 象 面 对 的 方向 是 左 还 是 右 ? 

public FACEDIRECTION Facing = FACEDIRECTION .FACERIGHT ; 
// 哪 些 对 象 的 tag 被 标记 为 ground 

public LayerMask GroundLayer ; 

// 对 刚体 的 引用 

private Rigidbody2D ThisBody = null; 


// 对 transform 组 件 的 引用 

private Transform ThisTransform = null; 
// 对 脚 部 碰撞 体 的 引用 
public CircleCollider2D FeetCollider = null; 
// 我 们 础 到 地 面 了 吗 ? 


public bool isGrounded = false; 


// 主 要 输入 多 

public string HorzAxis = "Horizontal"; 
public string JumpButton = "Jump"; 
// 速 度 变量 


public float MaxSpeed = 50f， 
public float JumpPower = 600; 
public float JumpTimeOut = 1f; 
// 我 们 现在 可 以 跳 了 吗 
private bool CanJump = true 
// 我 们 可 以 控制 游戏 角色 了 吗 ? 
public bool CanControl = true; 
public static PlayerControl PlayerInstance = nuill,; 
//---- 
public static float Health 
{ 

get 

{ 


} 


set 


return _Health,; 


_Health = value; 


// 如 果 死 亡 的 话 ， 游 戏 也 就 结 
if(_Health <= 0) 


Na 
aul 
| 


Die( ); 


} 
} 


[SerializeField] 
private static float _Health = 100f; 


// 初始 化 
void Awake () 


// 获 取 transform 组 件 和 rigid body 组 件 
ThisBody = GetComponent<Rigidbody2D>( ) ; 
ThisTransform = GetComponent<Transform>(); 


// 设 置 静 态 实 例 
PlayerIinstance = this,; 


// 返 回 一 个 布尔 值 ， 玩 家 在 地 面 上 吗 ? 
private bool GetGrounded ( ) 


// 检 测 地 面 

Vector2 CircleCenter = new Vector2(ThisTransform.position.x, 
ThisTransform.position.y) + FeetCollider.offset; 

Collider2D[] HitColliders = 
Physics2D.OverlapCircleAll(CircleCenter, 

FeetCollider.radius, GroundLayer); 
if(HitColliders.Length > 0) return true; 
return false,; 


// 调 转角 色 方 向 

private void FlipDirection() 

{ 
Facing = (FACEDIRECTION) ((int)Facing * -1f); 
Vector3 LocalScale = ThisTransform.localScale; 
LocalScale.x *= -1f; 
ThisTransform.localScale = LocalScale; 


} 

//--- 

// 跳 路 

private void Jump() 

{ 
// 如 果 我 们 在 地 面 上 的 话 ， 就 跳跃 
if(!isGrounded || !CanJump)return,; 
// 跳 路 


ThisBody .AddForce(Vector2.up * JumpPower); 
CanJump = false,; 
Invoke ("ActivateJump", JumpTimeOut); 


// 在 指定 时 间 结 束 后 激活 允许 跳跃 变量 
// 禁 止 第 一 次 跳跃 未 结束 时 就 二 次 起 跳 
private void ActivateJump() 


{ 


CanJump = true, 


// _ Update 函数 在 每 一 帧 调用 一 次 
void FixedUpdate () 


// 如 果 我 们 不 能 控制 角色 ， 就 退出 
if(!CanControl || Health <= 0f) 
{ 


} 


return; 


// 更 新 grounded 变量 状态 

isGrounded = GetGrounded() ; 

float Horz = CrossPlatformInputManager .GetAxis(HorZzAxis ) ; 
ThisBody.AddForce(Vector2 ,right * Horz * MaxSpeed); 


if(CrossPlatformInputManager.GetButton( JumpButton)) 
Jump(); 


// 对 速度 进行 限制 
ThisBody.velocity = new 
Vector2(Mathf .clamp(ThisBody.velocity.x, -MaxSpeed, 
MaxSpeed), 
Mathf.Clamp(ThisBody.velocity.y, -Mathf.Infinity, 
JumpPower ) ); 


// 如 果 需 要 的 话 就 调转 方向 

if((Horz < Of && Facing != FACEDIRECTION.FACELEFT) || 
(Horz > Of && Facing != FACEDIRECTION .FACERIGHT) ) 
FlipDirection(); 


void OnDestroy() 
PlayerIinstance = nuill,; 

// 杀 死 玩家 的 功能 

static void Die() 
Destroy(PlayerControl.PlayerIinstance.gameObject); 


// 重 置 Player 
public static void Reset() 


Health = 100f; 


下 面 对 代 码 示例 5.1 进 行 总 结 。 


。 PlayerControl 类 负责 处 理 所 有 的 玩家 输入 ， 并 控制 玩家 的 左右 运动 
以 及 跳跃 。 


。 为 了 实现 玩家 的 运动 ， 在 ThisBody 变 量 中 存在 一 个 对 RigidBody2D 
组 件 的 引用 ， 这 个 ThisBody 变 量 在 Awake 函 数 中 赋值 。 玩 家 的 运动 
和 动作 使 用 RigidBody2 D.Velocity 变 量 实现 。 关 于 这 个 变量 的 更 多 
言 轧 可 以 访问 在 线 文 档 http:/docs. 
Unity3d.com/ScriptReference/Rigidbody2D-velocity.html ° 
函数 FlipDirection 用 来 将 图 像 精 灵 的 水 平 值 进行 反 转 ， 转 头面 向 无 
或 者 右 〈 改 变 图 像 的 方向 ， 例 如 1 和 -1) 。 从 Unity 5.3 版 本 起 ， 可 
以 使 用 SpriteRenderer 组 件 的 Flip 属 性 来 代替 。 
FixedUpdate 函 数 用 来 代替 Update 函 数 来 实现 对 Player 角 色 的 更 新 操 
作 ， 这 是 因为 正在 使 用 RigidBody2D， 也 就 是 一 个 基于 物理 属性 的 
组 件 。 所 有 的 物理 功能 应 该 在 FixedUpdate 函 数 中 调用 ， 调 用 的 时 间 
间隔 应 该 是 固定 的 ， 所 以 时 间 单 位 应 该 是 每 秒 而 不 是 每 帧 。 关 于 它 
的 更 多 详细 信息 可 以 在 Unity 的 在 线 文 档 http://docs.Unity3d.com/ 
ScriptReference/MonoBehaviour.FixedUpdate.html 中 找到 。 
阔 数 GetGrounded 会 检测 场景 中 特定 层 中 的 其 他 磁 接 体 与 原型 磁 捷 
体 之 间 的 交叉 和 重奏 ， 简 而 言 之 ， 这 个 函数 会 给 出 当前 玩家 角色 的 
脚 是 否 与 地 面相 接触 。 如 有 果 是 ， 玩 家 就 可 以 执行 跳 路 操作， 否则 ， 
玩家 不 可 以 跳跃 。 因 为 他 们 现在 已 经 在 空中 了 ， 凌 空 再 跳跃 这 种 操 
作 有 是 不 允许 的 。 


为 了 让 前 面 的 代码 能 够 正常 地 工作 ， 必 须 对 玩家 角色 和 场景 做 出 一 
些 细微 的 调整 。 特 别 是 GetGrounded 函 数 需 要 将 同一 层 中 的 地 面 都 集中 
到 同一 层 。 这 也 就 意味 着 关卡 前 景 应 该 与 其 他 对 象 位 于 不 同 的 层 上 。 首 
完 创建 一 个 名 为 “Ground” 的 新 层 ， 然 后 将 前 景 对 象 分 配 到 这 一 层 中 。 创 
建 的 方法 是 ， 首 先 选中 前 景 对 象 ， 然 后 在 对 象 Inspector 面 板 上 ， 单 击 


Layer 下 拉 列 表 框 ， 然 后 在 上 下 文 菜 单 中 选中 “Add Layer”， 


如 图 5.44 所 
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图 5.44 


现在 添加 一 个 名 为 “Ground” 的 新 层 ， 


入 “Ground”， 如 图 5.45 所 示 。 
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图 5.45 ”创建 一 个 新 的 “Ground” 层 


现在 ， 将 前 景 对 象 分 配 到 Ground 层 。 首 先 选 中 前 景 对 象 ， 然 后 在 对 
象 Imspector 面 板 中 选中 layer 下 拉 列 表 杠 中 的 “Ground” 选 项 。 在 将 前 景 对 
象 分 配 到 Ground 层 之 后 ， 脚 本 PlayerControl 要 求 必 须 标 明 哪 一 层 被 指定 
为 Ground。 首 先 选中 Player 对 象 ， 然 后 在 对 象 检 查 (Inspector) 面板 中 
将 “Ground Layer” 的 值 设置 为 “Ground”， 如 图 5.46 所 示 。 
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图 5.46 ”为 而 


撞 检 测 设置 Ground 层 


另外 ， 脚 部 碰撞 体 (Feet Collider) 区 域 的 值 也 需要 制定 ， 以 指明 使 
用 哪个 人 页 撞 体 对 象 来 进行 地 面 人 页 撞 的 检测 。 对 于 这 个 区 域 ， 我 们 需要 将 
圆 形 (Circle Collider) 组 件 拖 动 到 “Feet Collider”* 区 域 ， 如 图 5.47 所 示 。 
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图 5.47 ” 脚 部 碰撞 体 用 来 检测 玩家 角色 何 时 与 地 面 接触 


现在 来 对 玩家 角色 进行 一 下 测试 ， 首 先 在 工具 栏 上 单 击 “Play” 图 
标 ， 测 试 玩家 角色 的 控制 。 使 用 W、A、S、D (或 者 方向 键 ) 可 以 控制 
玩家 角色 的 移动 。 空 格 键 束 可 以 控制 角色 进行 跳 晓 ， 如 图 5.48 所 示 。 
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图 5.48 ”对 玩家 角色 进行 测试 


5.7 优化 


到 目前 为 止 ， 已 经 开发 了 一 个 有 趣 的 环境 和 一 个 可 欣 的 角色 。 在 继 
续 游戏 的 开发 之 前 ， 将 注意 力 转移 到 优化 方面 ， 这 是 一 个 在 开发 过 程 必 
须要 考虑 的 问题 。 优 化 指 的 是 可 以 应 用 提高 运行 性 能 和 改善 工作 流程 的 
技巧 。 现 在 考虑 使 用 预 设 体 来 改善 工作 流程 ， 使 用 图 像 精灵 打包 技术 来 
提高 运行 时 的 性 能 ， 现 在 就 从 预 设 体 开始 。 


预 设 体 (Prefab) 是 一 个 Unity 中 的 资源 ， 利 用 预 设 体 就 可 以 将 场景 
中 的 许多 对 象 集合 到 一 起 并 将 它们 封装 成 一 个 单独 的 单元 。 预 设 体 可 以 
被 当 作 一 个 资源 添加 到 项 目 (Project) 面板 上 。 从 这 里 开始 ， 预 设 体 就 
可 以 作为 一 个 完整 的 单元 添加 到 其 他 的 场景 或 者 环境 。 玩 家 角色 了 束 是 一 


个 理想 的 预 设 体 候选 ， 因 为 它 必 须 应 用 到 所 有 的 场景 中 。 从 玩家 开始 创 
建 预 设 体 ， 只 需 简 单 将 Player 对 和 象 拖 忠 到 项 目 (Project) 面板 中 一 个 名 
为 Prefabs 的 独立 文件 夹 中 ， 如 图 5.49 所 示 。 
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图 5.49 创建 一 个 玩家 预 设 体 


在 创建 了 预 设 体 之 后 ， 层 次 (Hierarchy) 面板 上 的 Player 对 象 的 名 

字 了 就 变 成 了 蓝 色 ， 这 表明 它 已 经 关联 到 了 预 设 体 资 源 上 。 当 在 项 目 

(Project) 面板 上 选中 预 设 体 以 后 ， 如 果 在 对 象 检查 (Inspector) 面板 
中 对 其 进行 了 修改 ， 那 么 场景 中 的 玩家 (Player) 怠 会 相应 地 做 出 改 
变 。 不 过 也 可 以 切断 场景 中 的 玩家 (Player) 和 预 设 体 之 间 的 这 种 关 
联 ， 切 断 的 方法 就 是 选中 玩家 (Player) 之 后 ， 在 应 用 程序 菜单 中 依次 
选中 “GameObject | Break Prefab Instance”°。 这 样 就 将 场景 中 的 对 象 转换 
成 为 一 个 预 设 体 的 独立 副本 ， 如 图 5.50 所 示 。 
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图 5.50 ”切断 预 设 体 和 实例 之 间 的 联系 


大 多 数 时 候 和 希望 保持 实例 对 象 和 预 设 体 之 间 的 关联 。 有时， 可 能 对 
场景 中 的 对 象 做 出 了 一 些 修改 ， 之 后 又 硕 望 将 这 些 修改 再 应 用 到 项 目 
(Project) 面板 的 预 设 体 资源 上 ， 影 响 到 所 有 其 他 相关 联 的 实例 对 象 。 
如 采 想 实现 这 个 功能 ， 需 要 首先 选中 作出 了 修改 的 那个 对 象 ， 然 后 从 应 
用 程序 菜单 处 依次 选中 “GameObject | Apply Changes to Prefab”， 如 图 


5.51 所 示 。 
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图 5.51 将 改变 应 用 到 预 设 体 


除了 使 用 预 设 体 之 外 ， 还 需要 对 2D 游 戏 进行 泻 染 ， 对 性 能 进行 优 
化 。 当 运行 游戏 时 ，Unity 会 对 当时 屏幕 中 出 现 的 每 一 个 独立 的 贴图 或 者 
Sprite 进 行 独立 唯一 的 绘制 调用 (Draw Call) 。 绘 制 调用 指 的 就 是 Unity 
在 将 一 个 网 格 、 材 质 或 者 贴图 显示 在 屏幕 上 时 必须 执行 的 一 个 步骤 或 者 
过 程 周 期 。“Draw Call” 往 往 也 束 意 味 着 系统 的 开销 ， 所 以 最 好 尽 可 能 地 
减少 绘制 调用 的 使 用 。 


对 2D 游 戏 来 说 ， 可 以 通过 将 相关 的 贴图 ， 例 如 场景 中 的 所 有 道具 、 
所 有 的 敌人 、 所 有 的 武器 进行 组 合 处 理 。 这 就 是 说 ， 通 过 将 一 组 贴图 一 
起 交 给 Unity 处 理 ，Unity 束 可 以 实现 内 部 优化 ， 从 而 提高 泻 染 性 能 。 具 


体 来 说 ，Unity 会 使 用 一 个 单独 的 大 型 贴图 来 代替 那些 相关 的 贴图 。 如 采 
想 要 实现 这 个 优化 ， 需 要 首先 选中 所 有 的 道具 贴图 ， 对 于 这 个 游戏 来 
说 ， 道 具 需 要 包含 “Player"、 房 子 、 平 台 以 及 宝石 。 这 些 贴 图 都 包含 在 
项 目 (Project) 面板 ， 虽 然 在 游戏 中 可 能 还 没 使 用 到 。 选 中 这 些 贴 图 ， 
在 对 象 检 查 (Inspector) 面板 中 为 它们 在 “Packing Tag” 处 起 一 个 相同 的 
名 字 (Props) ， 然 后 单 击 “Apply” 按 钮 ， 如 图 5.52 所 示 。 
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图 5.52 ”为 多 个 贴图 设置 相同 的 “Packing Tag” 属 性 值 


对 背景 重复 这 个 过 程 ， 首 先 选 中 所 有 的 背景 ， 然 后 将 它们 的 Packing 
Tag 属 性 都 设置 为 “Background”， 然 后 单 击 “Apply”， 如 图 5.53 所 示 。 
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图 5.53 ”创建 一 个 背景 贴图 组 合 


Unity 束 会 上 自动 基于 分 组 来 批量 处 理 贴图 以 实现 性 能 
的 优化 ， 这 个 技术 可 以 明显 减少 绘制 调用 的 使 用 次 数 。 当 按 下 Play 按钮 
之 后 ，Unity 内 部 就 会 产生 一 个 新 的 贴图 集合 ， 同 时 会 出 现 一 个 进度 条 。 
在 Play 模式 中 ， 可 以 在 “Sprite Packer" 窗 口中 看 到 Unity 是 如 何 对 贴图 进行 
组 织 的。 可 以 在 应 用 程序 荣 单 中 依次 选择 “Window | Sprite Packer”， 如 
图 5.54 所 示 。 
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图 5.54 ”Unity 将 所 有 标记 相同 的 贴图 组 织 成 一 个 图 集 


5.8 ”小结 


干 得 很 出 色 ! 我 们 在 本 革 中 已 经 做 了 不 少 工作 了 ， 从 最 初 的 一 个 空 
无 一 物 的 项 目 ， 做 成 了 现在 这 个 很 有 意思 的 二 维 游戏 ， 在 这 个 游戏 中 玩 
家 角色 可 以 在 一 个 具有 物理 属性 的 二 维 世 界 进行 探索 ， 而 且 这 个 角色 可 
以 左右 移动 、 跳 跃 ， 图 像 精 灵 贴 图 也 可 以 根据 不 同 的 运动 做 出 变化 。 此 
外 ， 我 们 也 可 以 使 用 “Sprite Packing” 技 术 对 运行 时 的 性 能 进行 优化 ， 这 
一 点 对 于 移动 设备 来 说 是 十 分 理想 的 ， 在 下 一 章 中 ， 我 们 将 再 接 再 厉 ， 
为 游戏 中 添加 更 多 的 障碍 和 宝物 等 游戏 物品 。 


第 6 章 二 维 冒 险 游戏 〈 山 


上 一 章 开始 了 二 维 冒 险 游 戏 的 设计 之 旅 。 到 现在 为 止 ， 已 经 创建 
了 一 个 受 控制 的 角色 ， 并 且 这 个 角色 具有 物理 属性 、 碰 撞 检 测 以 及 重 
力 功 能 ， 可 以 在 关卡 中 行走 。 在 这 一 章 中 ， 会 将 其 余 的 功能 添加 到 这 
个 二 维 游戏 项 目 中 去 ， 具 体 而 言 ， 本 章 将 会 渔 盖 以 下 主题 : 


。 移动 障碍 物 例 如 升降 平台 
。 攻击 玩家 的 炮塔 
。 一 个 具有 任务 系统 的 非 玩 家 控制 角色 (NPC) 


本 章 一 开始 所 使 用 的 项 目 和 资源 可 以 在 本 书 的 配套 文件 中 的 
Chapter06/Start 文 件 夹 中 找到 ， 如 果 没 有 完成 之 前 的 项 目 ， 那 么 现在 就 可 以 
利用 这 个 文件 来 开始 本 章 的 学 习 内 容 。 


6.1 移动 的 平台 


现在 进一步 将 冒险 元 素 添加 到 现 有 场景 中 来 ， 具 体 来 说 ， 就 是 要 
添加 一 个 移动 的 平台 对 象 。 这 个 平台 应 该 网 上 移动 ， 然 后 再 网 下 ， 像 
个 乒乓 球 一 样 在 两 器 之 间 移 动 ， 并 且 不 断 地 循环 这 个 动作 。 游 戏 玩家 
可 以 跳 到 这 个 平台 上 ， 然 后 再 移动 到 目标 位 置 。 这 个 平台 对 象 可 以 被 


构造 成 一 个 预 设 体 ， 这 样 束 可 以 在 整个 场景 中 反复 使 用 ， 图 6.1 给 出 添 
加 了 一 个 这 样 移动 平台 的 场景 。 


图 6.1 创建 一 个 移动 的 平台 


首先 在 项 目 面板 处 选中 平台 的 贴图 ， 然 后 在 对 象 检查 (Inspector) 
面板 上 确认 这 个 贴图 已 经 被 指定 为 图 片 精灵 (Sprite) 类 型 ， 而 且 它 
的 “SpriteMode” 属 性 已 经 被 设置 为 “Single”"， 我 们 将 平台 贴图 拖 虑 到 场 
景 中 ， 然 后 将 它 的 “Scale”* 属 性 设置 为 (0.7, 0.5, 1) ， 如 图 6.2 所 示 。 
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图 6.2 ”构建 一 个 可 移动 的 平台 


接 下 来 ， 这 个 平台 应 该 是 一 个 实体 对 象 ， 这 样 玩家 才能 和 这 个 平 
台 发 生 磁 撞 。 要 知道 ， 我 们 的 玩家 角色 应 该 可 以 站 在 这 个 平台 上 面 。 
因此 ， 必 须 向 这 个 平台 对 象 上 添加 一 个 碰撞 体 。 在 这 种 情况 下 ， 二 维 
盒子 碰撞 体 (Box Collider 2D) 是 最 为 合适 的 。 我 们 首先 在 场景 中 选中 
平台 对 象 ， 然 后 在 菜单 中 依次 选中 “Component | Physics 2D | Box 
Collider 2D”， 就 可 以 为 其 添加 一 个 二 维 盒 子 页 撞 体 (Box Collider 
2D) ， 如 图 6.3 所 示 。 
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图 6.3 ”向 平台 添加 一 个 二 维 盒子 而 
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撞 体 (Box Collider 2D) 


当 向 这 个 平台 添加 了 碰撞 体 (Collider) 之 后 ， 就 可 以 在 对 象 检查 
(Inspector) 面板 中 对 这 个 碰撞 体 的 属性 进行 调整 。 具 体 来 说 ， 就 是 要 
修改 Offset 和 Size 两 个 属性 的 值 ， 保 证 碰撞 体 的 体积 与 平台 图 像 精灵 相 


件 。 最 后 进入 游戏 模式 来 测试 这 个 平台 ， 让 玩家 角色 站 在 平台 上 ， 如 


图 6.4 所 示 。 
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图 6.4 ”测试 平台 的 碰撞 体 (Collider) 


到 现在 为 止 ， 这 个 平台 都 是 静态 的 ， 而 且 不 能 运动 ， 但 是 在 设计 
中 这 个 平台 应 该 是 上 下 不 断 移动 的 。 为 了 解决 这 个 问题 ， 可 以 通过 在 
菜单 中 依次 单 击 *Window | Animation”， 打 开 “Animation Editor" 来 创建 
一 个 预定 义 的 动画 序列 。 不 过 ， 在 这 个 游戏 设计 中 ， 要 使 用 脚本 文件 
来 实现 平台 的 动态 。 通 常 在 制作 动画 的 时 候 ， 需 要 在 “C# 
Animations” 或 者 “Baked Animations” 两 者 之 间 做 出 选择 。 通 常 ， 如 果 一 
个 动画 并 不 复杂 ， 要 应 用 到 很 多 对 象 上 ， 并 且 在 应 用 到 不 同 的 对 象 时 
可 以 变化 。 下 面 给 出 的 PingPongMotion.cs 脚 本 应 该 附加 到 这 个 平台 
上 ， 脚 本 的 具体 内 容 如 代码 示例 6.1 所 示 。 


代码 示例 6.1: 


using UnityEngine 
using System,Collections ; 
// 


public class PingPongMotion : MonoBehaviour 


// 对 象 的 transformation 属 性 
private Transform ThisTransform = nulil; 


// 原 始 位 置 


private Vector3 OrigPos = Vector3.zero; 


// 移 动 的 和 


public Vector3 MoveAxes = Vector2.zero; 


// 速 度 
public float Distance = 3f; 

//---- 
// 初始 化 函数 

void Awake () 


// 获 取 transform 组 件 
ThisTransform = GetComponent<Transform>(); 


//Copy original position 
OrigPos = ThisTransform.position; 


// _ Update 函数 在 每 一 帧 被 调用 一 次 
void Update () 


// 使 用 ping pong 范 数 来 更 新 平台 的 位 置 


ThisTransform.position = OrigPos + MoveAxes * 
Mathf .PingPong(Time. 
time, Distance); 


下 面 对 代 码 示例 进行 总 结 。 


。 PingPongMotion 类 负责 实现 游戏 对 象 从 初始 点 出 发 并 来 回 移动 。 

。 Awake(0) 函 数 使 用 变量 OrigPos 来 记录 游戏 对 象 的 初始 位 置 。 

。 Update0 函 数 要 使 用 Mathf.PingPong 函 数 来 实现 一 个 值 在 最 小 值 和 
最 大 值 之 间 的 光滑 过 渡 。 这 个 函数 可 以 随 着 时 间 反 复 地 在 最 大 值 
和 最 小 值 范 围 内 波动 一 个 值 ， 从 而 允许 线性 地 移动 对 象 。 关 于 这 


个 函数 的 更 多 信息 ， 可 以 访问 Unity3d 的 在 线 文档 
http://docs.unity3d.com/ScriptReference/Mathf.PingPong.html ° 


已 经 完成 的 代码 应 该 附加 到 场景 中 的 平台 对 象 上 ， 而 且 可 以 很 容 
易 地 应 用 到 其 他 应 该 上 下 移动 (或 者 左右 移动 ) 的 对 象 上 。 


6.2 ”创建 其 他 的 场景 一 关卡 2 和 关卡 3 


与 之 前 在 书 中 创建 的 游戏 有 所 不 同 ， 当 前 的 冒险 游戏 将 跨越 多 个 
场景 。 这 也 就 是 说 ， 游 戏 中 会 包含 多 个 不 同 的 屏幕 ， 玩 家 可 以 从 一 个 
屏幕 的 边缘 进入 男 一 个 屏幕 。 为 了 引入 这 个 功能 ， 将 要 面 对 Unity 中 一 
些 新 的 而 且 也 很 有 趣 的 问题 ， 这 些 问题 非常 值得 我 们 去 深入 的 研究 ， 
这 也 正 是 我 们 即将 要 做 的 。 现 在 ， 开 始 为 游戏 制作 第 二 个 和 第 三 个 场 
景 ， 这 需要 用 到 剩 下 的 背景 和 前 景 对 象 ， 而 且 需要 为 每 一 个 关卡 配置 
碰撞 体 ， 允 许 玩 家 预 设 体 在 不 同 的 环境 中 无 颖 工作 。 创 建 一 个 市 有 碰 
拉 体 的 场景 的 详细 过 程 已 经 在 上 一 章 中 进行 了 介绍 ， 最 后 ， 完 成 的 场 
景 如 下 。 


。 关卡 2 在 垂直 方 癌 上 包含 了 两 部 分 平台 ， 下 面 的 平台 包含 了 一 组 可 
移动 的 平台 。 这 些 平台 可 以 利用 上 一 章 中 创建 的 移动 平台 预 设 体 
来 实现 。 目 前 ， 上 面 的 平台 对 于 玩家 来 说 是 无 害 的 ， 但 是 需要 对 
其 进行 修改 。 在 上 面 的 平台 上 添加 一 些 会 对 玩家 造成 伤害 的 炮塔 
对 象 。 玩 家 对 象 可 以 从 第 一 个 初始 关卡 的 最 左 侧 进入 到 这 个 关 
卡 ， 如 图 6.5 所 示 。 


图 6.5 ”场景 2 一 一 危险 的 平台 和 移动 的 平台 


。 玩家 可 以 在 第 一 个 初始 关卡 处 ， 走 到 屏幕 的 最 右 侧 进 入 到 关卡 3。 
这 个 关卡 中 包含 了 一 个 有 房子 的 地 面 。 这 个 房子 就 是 游戏 中 NPC 
的 家 ， 玩 家 要 从 NPC 这 里 来 接收 所 收集 物品 的 任务 。 在 本 章 稍 后 
的 内 容 中 创建 这 个 角色 ， 如 图 6.6 所 示 。 


图 6.6 ”场景 3 ”一座 孤零零 的 NPC 住 所 


现在 的 关卡 2 和 关卡 3 都 是 使 用 迄今 学 过 的 技术 创建 出 来 的 。 不 
过 ,为 了 让 每 个 场景 拥有 独特 的 魅力 和 个 性 ， 必 须 同 这 些 场景 中 添加 
一 些 特有 的 元 素 。 这 些 元 素 一 部 分 是 某 些 场景 专用 的 ， 态 外 一 部 分 则 
征 通 用 的 。 下 面 依次 来 了 解 这 些 因 和 又。 


死亡 区 域 (Kill Zones) 是 一 个 所 有 场景 中 都 需要 使 用 到 的 通用 功 
能 ， 不 过 现在 还 没有 实现 它 。 也 了 吏 是 说 ， 在 关卡 中 要 标记 出 一 块 二 维 
空间 区 域 ， 当 玩家 进入 到 这 块 区 域 之 后 ， 将 会 对 玩家 造成 伤害 ， 甚 至 
会 杀 死 玩家 ， 尤 其 是 在 处 理 玩 家 在 地 面 上 掉 进 了 一 个 洞 的 时 候 ， 和 死亡 


区 域 就 显得 十 分 有 用 了 。 因 此 ， 在 每 一 个 关卡 中 都 需要 死亡 区 域 的 设 
置 ， 因 为 到 现在 为 止 的 每 个 天 卡 的 地 面 都 有 一 些 坊 和 洞 。 为 了 实现 这 
个 功能 ， 需 要 在 场景 (无所谓 哪个 场景 ， 因 为 会 将 它 创 建 为 一 个 可 以 
到 处 复 用 的 预 设 体 ) 中 创建 一 个 新 的 空 游戏 对 象 。 如 前 面 所 述 ， 可 以 
通过 单 击 菜 单 处 的 “GameObject | Create Empty” 来 创建 一 个 新 的 游戏 对 
象 ， 然 后 将 这 个 对 象 命 名 为 “KilZone”， 它 的 初始 位 置 为 游戏 世界 的 原 
点 (0,0,0); 。 最 后 依次 单 击 菜单 选项 “Component | Physics 2D | Box 
Collider 2D* 来 创建 一 个 二 维 盒 子 碰撞 体 (Box Collider 2D) ， 并 将 这 个 
磁 撞 体 附加 到 “KlZone” 对 象 上 。 这 个 盒子 人 页 撞 体 就 定义 了 死亡 区 域 。 
另外 要 记 住 ， 在 对 象 检 查 (Inspector) 面板 处 为 “Box Collider 2D” 组 件 
勾 选 上 “Is Trigger” 复 选 框 ， 这 样 这 个 对 象 瓯 被 配置 成 为 了 一 个 触发 器 

(Trigger) ， 如 图 6.7 所 示 。 触 发 器 和 碰撞 体 是 不 同 的 ， 磁 撞 体 是 不 允 
许 对 象 出 现 穿越 其 他 物体 这 种 情况 的 ， 但 是 触发 器 确实 专门 检测 对 象 
是 否 穿越 ， 并 人 允许 以 此 为 依据 实现 目 定义 的 行为 


-SC Xil 4 
I MBox Collider 2D 
a edt corider 
‘None (Physics Material © 


图 6.7 ”创建 一 个 死亡 区 域 和 触发 器 


接 下 来 ， 将 这 个 新 的 脚本 命名 为 KillZone.cs”， 然 后 将 这 个 脚本 附 
加 到 场景 中 的 “Kil Zone” 对 象 上 。 这 个 脚本 的 作用 就 是 在 玩家 和 角色 一 旦 
进入 死亡 区 域 之 后 ， 对 玩家 角色 造成 伤害 。 现 在 有 多 个 方式 来 在 场景 
中 实现 死亡 区 域 。 例 如 ， 一 种 利用 的 方式 殉 是 当 玩 家 角色 一 旦 进入 死 
亡 区 域 ， 就 会 立刻 被 破坏 ， 男 外 也 可 以 设计 为 当 玩家 角色 人 处 于 死亡 区 
域 时 ， 持 续 受 到 伤害 。 考 虚 到 功能 的 多 样 性 和 代码 的 可 复 用 性 ， 第 二 
种 方法 是 最 佳 的 选择 。 具 体 来 说 ， 束 是 玩家 角色 的 生命 值 会 按照 一 个 
特定 的 速度 减少 ， 直 到 玩家 角色 死亡 为 止 , 看 看 下 面 给 出 的 代码 示例 
6.2° 


代码 示例 6.2: 


using UnityEngine; 
using System.Collections; 
/ 


//Amount to damage player per second 
public float Damage = 100f; 


void OnTriggerStay2D(Collider2D other) 


// 如 果 player 不 存在 则 退出 
if(!other.CompareTag("Player"))return; 


// 按 指定 的 速度 对 玩家 造成 伤害 
if(PlayerControl.PlayerIinstance!=null) 
PlayerControl.Health -= Damage * Time.deltaTime; 


下 面 对 代 码 示例 6.2 进 行 总 结 。 


一 个 Tag 属 性 为 Player 的 对 象 进 入 并 停留 在 触发 区 域 时 ，KillZone 类 
负责 实现 持续 地 对 这 个 对 象 造成 伤害 。 

当 一 个 具有 刚体 (RigidBody) 组 件 的 对 象 进 入 到 触发 区 域 之 后 ， 
Unity 就 会 目 动 调用 OnTriggerStay2D 琴 数 ， 频 率 为 每 帧 一 次 。 
此 ， 当 一 个 物理 对 象 进入 到 了 死亡 触发 区 域 时 ，Unity 会 按照 
Update 函 数 相 同 的 频率 调用 OnTriggerStay2D 函 数 。 关 于 
OnTriggerStay2D 函 数 的 更 多 详细 信息 ， 可 以 访问 Unity 的 在 线 文档 
http://docs. 
unity3d.com/ScriptReference/MonoBehaviour.OnTriggerStay2D.html 


Damage 变 量 实现 对 玩家 的 伤害 的 编码 ， 这 个 值 会 通过 修改 
PlayerControl 类 中 的 Health 静 态 变 量 来 实现 对 玩家 的 伤害 ， 当 
Health 值 为 0 时 ， 玩 家 角色 残 被 销毁 了 。 
现在 对 这 个 游戏 进行 测试 ， 在 场景 中 标记 出 一 块 死 亡 区 域 ， 然 后 
在 游戏 模式 中 让 玩家 走 进 这 块 死 亡 区 域 ， 当 玩家 角色 走 进 时 ， 瓯 
会 受到 伤害 ， 甚 至 被 销毁 。 为 了 能 确保 玩家 角色 被 立刻 销毁 ， 应 
该 将 伤害 设置 成 一 个 非常 大 的 值 ， 如 90001 测试 完成 之 后 ， 将 死 
亡 区 域 制作 成 一 个 预 设 体 ， 方 法 很 简单 ， 只 需要 从 层次 
(Hierarchy) 面板 处 将 ‘Kil Zone” 拖 虑 到 项 目 面 板 的 “Prefab” 文 件 
夹 中 。 当 需要 将 “Kill Zone” 预 设 体 添加 到 各 个 关卡 中 时 ， 对 碰撞 体 
进行 修改 ， 如 图 6.8 所 示 。 
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图 6.8 配置 一 个 接触 以 后 就 会 毁灭 的 死亡 区 域 


6.4 用 户 界 面 中 的 生命 值 条 


上 一 市 介绍 了 游戏 中 的 第 一 个 危险 和 威胁 。 也 束 是 说 ， 一 个 死亡 
区 域 可 以 破坏 甚至 杀 死 玩家 角色 。 因 此 ， 玩 家 角色 的 生命 值 有 可 能 初 
始 状态 逐渐 减少 。 对 于 玩家 和 开发 者 来 说 ， 生 命 值 的 可 视 化 是 非常 有 
用 的 ， 基 于 这 个 原因 ， 将 玩家 的 生命 值 以 一 个 条 的 形式 在 屏幕 上 显示 
出 来 。 这 个 配置 好 的 对 象 也 可 以 被 制作 成 一 个 预 设 体 ， 然 后 在 更 多 的 
场景 中 对 其 进行 复 用 ， 这 将 是 一 个 非常 有 用 的 功能 。 图 6.9 所 示 为 一 个 


预 响 ， 展 示 工 作 的 成 果 。 
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图 6.9 准备 创建 玩家 生命 值 


可 以 在 应 用 程序 菜单 中 依次 选中 “GameObject | UI| Canvas” 来 在 场 
景 任意 一 个 场景 ) 中 创建 一 个 新 的 GUI 画布 (Canvas) 。 完 成 这 个 操 
作 以 后 ， 如 果 当 前 场景 中 不 存在 Event System 对 象 ， 就 会 自动 地 创建 出 
一 个 EventSystem 对 和 象 ， 该 对 象 对 于 UI 系统 的 正确 使 用 至 天 重要 。 如 果 
不 小 心 删 掉 了 这 个 对 象 ， 可 以 通过 在 应 用 程序 菜单 依次 单 
击 “GameObject | UI | EventSystem” 来 重新 创建 。 这 个 新 创建 的 画布 对 象 
束 古 用 来 绘制 GUI 的 表面 的 ， 如 图 6.10 所 示 。 
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图 6.10 ”创建 一 个 GUI 画布 和 一 个 “EventSystem” 


接 下 来 ， 为 UI 创建 一 个 新 的 、 专 用 的 摄像 机 对 象 ， 并 将 其 添加 成 
为 新 创建 画布 的 子 对 象 。 通 过 创建 一 个 单独 的 UI 泻 染 摄 像 头 ， 可 以 将 
所 需 的 摄像 机 的 特效 以 及 其 他 的 图 像 调整 选项 应 用 到 UI 上 。 如 果 想 要 
创建 一 个 作为 子 对 象 的 相机 ， 只 需要 在 层次 结构 (Hierarchy) 面板 上 
的 画布 对 象 上 单 击 鼠标 右键 ， 然 后 在 弹出 来 的 上 下 文 莱 单 中 选中 摄像 
机 ， 这 样 就 为 在 场景 中 选中 的 对 象 添 加 了 一 个 作为 子 对 象 的 摄像 机 ， 
如 图 6.11 所 示 。 
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图 6.11 创建 一 个 摄像 机 子 对 象 


现在 将 UI 摄 像 机 设置 成 一 个 正 交 (Orthographic) 类 型 的 摄像 机 ， 

在 上 一 章 中 已 经 学 习 过 了 设置 方式 。 图 6.12 所 示 为 如 何 将 相机 设置 为 正 
交 相 机 。 记 住 ， 一 个 正 交 相机 是 一 个 真正 的 二 维 相 机 ， 因 为 它 消除 了 
所 有 的 透视 和 视角 的 泻 染 效果 ， 这 一 点 十 分 适合 应 用 在 GUI 以 及 其 他 在 
屏幕 中 显示 的 对 象 中 。 此 外 ， 摄 像 机 的 Depth 值 可 以 从 对 象 检 查 

(Inspector) 面板 处 找到 ， 应 该 设置 为 一 个 比 主 游戏 相机 (Main 
Camera) 更 大 的 值 ， 以 确保 它 呈 现在 其 他 一 切 事物 的 顶部 。 否 则 ， 
GUI 可 能 会 被 履 兰 ， 从 而 在 游戏 中 无 法 正确 显示 。 
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图 6.12 ”为 GUI 演 染 配置 一 个 正 交 相机 


现在 创建 好 的 摄像 机 已 经 差不多 准备 好 了 ， 不 过 ， 当 前 它 和 其 他 
的 摄像 机 一 样 ， 会 对 场景 中 的 所 有 事物 进行 演 沪 。 这 也 就 是 说 ， 在 当 
前 的 场景 中 所 有 的 事物 会 被 两 个 独立 的 摄像 机 泻 染 两 次 。 这 样 不 仅 少 
费 了 系统 的 资源 ， 导 致 系统 性 能 变 差 ， 而 且 其 中 的 第 二 人 台 摄 像 机 是 完 
全 不 需要 的 。 相 反 ， 硕 望 的 是 初始 的 摄像 机 泻 染 场景 中 的 一 切 ， 也 就 
征 游 戏 中 的 角色 和 环境 ， 但 是 不 要 泻 染 GUI 对 象 。 同 样 ， 新 创建 的 GUI 
摄像 机 应 该 只 渔 染 GUI 对 象 。 为 了 实现 这 个 功能 ， 首 移 选 中 游戏 的 主 摄 


像 机 ， 然 后 在 对 象 检 查 


拉 列 表 中 可 以 指 


@ Inspector | 


(Inspector) 面板 处 单 击 “Camera” 组 件 处 
a Mask” 下 拉 列 表 框 ， 单 击 去 掉 对 “UI” 选 项 的 勾 选 。 在 这 
定 哪些 图 层 不 进行 泻 染 ， 如 图 6.13 所 示 。 
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图 6.13 ”在 3 
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FE 摄 像 机 指定 UI 层 不 进行 泻 染 
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选择 GUI 摄 像 机 ， 按 照 同 样 操作 在 Camera 组 件 处 选择 “Culling 
Mask” 下 拉 列 表 框 ， 首 先 选 中 “Nothing” 以 取消 所 有 的 选项 ， 然 后 选中 
UI 屋 ， 如 图 6.14 所 示 。 


项 ， 这 样 束 可 以 只 泻 染 
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图 6.14 让 GUI 摄像 机 忽略 除了 UI 以 外 的 所 有 层 


默认 情况 下 ， 任 何 新 创建 的 画布 对 象 都 是 被 配置 在 屏幕 空间 的 县 
加 模式 下 工作 的 ， 这 就 意味 着 它 将 位 于 场景 中 所 有 没有 关联 到 其 他 相 
机 的 对 象 的 最 上 层 。 此 外 ， 所 有 的 GUI 元 素 都 将 在 这 个 基础 上 进行 缩 
放 。 因 此 ， 为 了 让 工作 更 简单 ， 需 要 对 画布 对 象 进行 配置 ， 以 配合 新 
创建 的 GUI 相 机 。 首 先 选中 画布 对 象 ， 然 后 在 对 象 检 查 (Inspector) 面 
板 中 的 Canvas 组 件 处 ， 将 “Render Mode” 的 值 由 原来 的 “Screen Space - 
Overlay” 更 改 为 “Screen Space - Camera”， 最 后 将 GUI 摄像 机 对 象 拖 蝶 
到 “Camera" 槽 位， 如 图 6.15 所 示 。 
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图 6.15 ”配置 用 于 摄像 机 泻 染 的 画布 组 件 


接 下 来 配置 Canvas Scaler 组 件 ， 它 是 附加 在 画布 对 象 上 的 。 这 个 组 
件 负 责 当 屏 人 幕 大 小 发 生 改变 时 GUI 的 显示 效果 。 简 而 言 之 ， 对 于 这 个 游 
戏 ，GUI 以 该 跟随 屏幕 的 尺寸 变化 而 变化 。 基 于 这 个 需求 ， 将 “UI Scale 
Mode” 下 拉 列 表 框 的 值 设 定 为 “<Scale With Screen Size”， 然 后 
在 “Reference Resolution” 处 设 定 游戏 的 分 辨 率 为 1024x600， 如 图 6.16 所 
示 。 
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图 6.16 修改 画布 的 缩放 参数 以 便 实现 响应 式 UI 设计 


将 GUI 组 件 添加 a 到 游戏 中 ， 当 它们 添加 a 到 场景 时 ， 束 会 正常 显示 。 
为 了 显示 生命 值 ， 玩 家 的 表示 将 会 是 十 分 有 用 的 。 在 层次 面板 处 的 
Canvas 对 象 上 单 击 鼠 标 右键 ， 然 后 在 弹出 来 的 上 下 文人 菜单 选中 “UI | 
Image”， 这 样 束 可 以 创建 一 个 新 的 mage” 对 象 。 创 建成 功 之 后 ， 选 中 
这 个 “Image” 对 象 ， 从 项 目 面 板 处 将 玩家 头 部 图 像 精灵 拖 动 到 对 象 检查 

(Inspector) 面板 中 的 “Source Image” 区 域 处 。 然 后 ， 使 用 “Rect 

Transform” (键盘 上 的 T 快 捷 键 ) 来 改变 位 于 屏幕 左上 角 的 图 像 的 大 
小 ， 如 图 6.17 所 示 。 
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如 果 没 看 到 添加 的 头 部 图 像 ， 就 将 UI 层 分 配给 U1 摄像 机 进行 泻 染 。 此 
外 ， 可 能 需要 将 GUI 摄像 机 沿 着 Z 轴 向 后 移动 ， 将 头 部 图 像 精 灵 移 至 摄像 机 
的 可 视 区 域 中 。 


最 后 要 将 头 部 图 像 精 灵 销 定 在 屏幕 的 左上 方 ， 在 对 象 检查 
(Inspector) 面板 处 的 “Rect Transform” 组 件 处 单 击 *Anchor Preset” 按 
钮 ， 然 后 选中 左上 的 对 齐 方式 。 这 样 就 可 以 将 头 部 图 像 精灵 锁定 在 屏 
幕 的 左上 方 ， 确 保 无 论 哪 种 分 辨 率 下 ， 用 户 界 面 看 起 来 都 是 一 致 的 ， 
如 图 6.18 所 示 。 
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图 6.18 ” 锚 定 头 部 的 位 置 


接 下 来 创建 一 个 生命 条 ， 首 先 向 GUI 画 布 上 添加 一 个 新 的 图 像 ， 添 
加 的 方法 是 在 画布 上 单 击 鼠 标 右键 ， 在 弹出 的 上 下 文 染 单 中 依次 选 


中 “UI| Image”。 接 着 对 这 个 对 象 进 行 如 下 操作 : 将 “Source Image” 属 性 
的 值 设 为 空 ， 将 Color 属 性 的 值 设 为 RGB(255,0,0)。 它 们 分 别 表 示 了 背 
景 ， 以 及 当 生 命 值 完 全 耗 尽 时 的 红色 状态 。 最 后 ， 使 用 "Rect 
Transform” 工 具 来 将 矩形 条 的 大 小 调整 为 所 需 的 尺寸 ， 然 后 将 它 销 定 到 
屏幕 的 左上 方 ， 如 图 6.19 所 示 。 
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图 6.19 ”创建 一 个 红色 的 生命 值 状态 条 


为 了 完成 状态 条 的 制作 ， 还 需要 编写 脚本 。 具 体 来 说 ， 就 是 创建 
ae 其中 = 证 外， 个 证 引 
的 。 开 始 处 于 上 面 的 是 绿色 的 生命 值 条 ， 当 玩家 角色 的 生命 值 下 降 的 
时 候 ， 它 下 面 的 红色 生命 值 条 就 显示 出 来 了 。 在 为 此 功能 进行 编程 之 
前 ， 需 要 进行 进一步 的 配置 。 具 体 来 说 ， 就 是 将 生命 值 条 的 轴 心 由 整 
个 轴 中 心 转移 到 中 心 靠 左 的 位 置 。 为 了 完成 这 个 操作 ， 需 要 首先 选 
中 “Health Bar”， 然 后 在 对 象 检查 (Inspector) 面板 处 将 Pivot 属 性 中 的 X 
的 值 设置 为 0，Y 的 值 设置 为 0.5， 如 图 6.20 所 示 。 
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图 6.20 ”重新 定位 生命 值 条 的 轴 心 


要 创建 一 个 代表 生命 值 的 绿色 覆盖 层 ， 可 以 选中 红色 的 生命 值 条 
进行 复制 。 将 复制 出 来 的 这 个 生命 值 条 命名 为 “Health_Green”， 并 将 其 
拖 忠 到 层次 面 的 红色 生命 值 条 的 下 面 ，GUI 元 素 的 绘制 顺序 与 对 象 的 层 
次 序号 有 关 ， 序 号 低 的 对 象 会 出 现在 序号 高 的 对 象 的 顶部 ， 如 图 6.21 所 
示 。 
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图 6.21 创建 一 个 复制 的 绿色 条 


需要 创建 一 个 将 绿色 生命 值 条 的 宽度 与 玩家 角色 生命 值 相 关联 的 
脚本 文件 。 当 玩家 生命 值 下 降 时 ， 绿 色 生 命 值 条 的 长 度 就 会 变 短 ， 露 
出 下 面 的 红色 条 。 创 建 一 个 新 的 脚本 文件 并 为 其 命名 
为 “HealthBarcs”， 然 后 将 它 附 加 到 绿色 生命 值 条 上 。 


代码 示例 6.3: 


using UnityEngine 
using System,Collections ; 


public class HealthBar : MonoBehaviour 


// 对 transform 组 件 的 引用 
private RectTransform ThisTransform = null; 


// 速 度 
public float MaxSpeed = 10f; 


void Awake() 


// 获 取 transform 组 件 
ThisTransform = GetComponent<RectTransform>( ) 


void Start() 


{ 
// 设 置 初始 的 生命 值 
if(PlayerControl.PlayerIinstance!=null) 
ThisTransform.sizeDelta = new 
Vector2(Mathf .clamp(PlayerControl. 
Health, 0,100),ThisTransform.sizeDelta.y); 


// _ Update 函数 在 每 一 帧 调用 一 次 
void Update () 
{ 
// 更 新 生命 值 属性 
float HealthUpdate = Of; 


if(PlayerControl.PlayerIinstance!=null) 
HealthUpdate = 
Mathf .MoveTowards(ThisTransform.rect.width, 
PlayerControl.Health, MaxSpeed); 


ThisTransform.sizeDelta = new 
Vector2(Mathf .clamp(HealthUpdate, 0,100),ThisTransform. 
sizeDelta.y); 


} 


} 


下 面 对 代 码 示例 6.3 进 行 总 结 。 


。 HealthBar 类 负责 根据 玩家 角色 的 生命 值 来 减少 绿色 生命 值 条 (位 
于 顶部 ) 的 长 度 。 

。 RectTransform 对 和 象 的 SizeDelta 属 性 决定 了 这 个 对 象 的 长 度 。 关 于 
这 个 属性 的 详细 信息 ， 可 以 访问 Unity 的 在 线 文档 
http://docs.unity3d.com/462/Documentation/ScriptReference/RectTrans 
form-sizeDelta.html 获 取 。 

。 函数 Mathf.MoveTowards 用 来 将 生命 值 条 随 着 时 间 从 当前 的 长 度 平 
请 、 渐 进 地 转换 到 目标 长 度 。 也 就 是 说 ， 当 玩家 角色 生命 值 下 降 


时 ， 生 命 值 条 将 会 逐渐 减少 ， 而 不 是 一 下 子 束 降 低 。 关 于 这 个 画 
数 的 详细 信息 ， 可 以 访问 Unity 的 在 线 文档 http:/docs. 
unity3d.com/ScriptReference/Mathf.MoveTowards.html 获 取 。 


最 后 将 UI 对 象 制作 成 一 个 预 设 体 ， 从 层次 面板 上 将 最 顶端 的 
Canvas 对 象 拖 电 到 项 目 面板 的 Prefab 文 件 夹 中 ， 这 样 就 可 以 在 多 个 场景 
中 对 UI 系统 进行 复 用 。 


6.5 ”炮弹 和 伤害 


天 卡 2 是 一 个 充满 危险 的 地 方 。 在 这 个 关卡 中 不 仅仅 有 深 志 和 洞 之 
类 的 死亡 区 域 ， 另 外 还 有 一 些 例如 炮塔 之 类 的 会 对 玩家 角色 造成 念 害 
的 危险 物体 。 如 何 创建 这 些 危 险 物 体 将 会 是 这 一 节 的 主要 内 容 。 下 面 
先 来 创建 一 个 炮塔 。 本 书 的 配套 文件 中 并 不 包含 一 个 炮塔 的 贴图 或 者 
图 像 ， 但 是 可 以 使 用 黑色 剪影 风格 来 创建 出 一 个 基于 基本 图 形 的 炮塔 
道具 。 首 移 创 建 一 个 新 的 立方 体 对 象 (方法 是 依次 单 击 “GameObject | 
3DObject | Cube”) ， 然 后 将 它 的 大 小 调整 到 与 炮塔 的 尺寸 相仿 ， 并 定 
位 到 场景 中 靠 上 的 基 上 良 上 ， 使 它 成 为 场景 的 一 部 分 ， 如 图 6.22 所 示 “。 注 
意 ， 也 可 以 使 用 “Rect Transform” 工 具 来 调整 基本 图 形 的 大 小 。 


图 6.22 ”创建 一 个 炮塔 道具 


到 现在 为 止 所 创建 的 炮塔 外 观 还 是 一 种 明显 的 灰色 。 为 了 改善 这 

个 外 观 ， 需 要 创建 一 个 新 的 黑色 材质 。 在 项 目 面板 上 单 击 鼠 标 右键 ， 
然后 在 弹出 来 的 上 下 文 菜单 中 依次 选中 “Create | Material”。 在 对 象 检查 

(Inspector) 面板 处 为 “Albedo” 设 置 一 个 黑 颜色 ， 然 后 从 项 目 面 板 处 将 
这 个 材质 拖 忠 到 场景 中 的 炮塔 上 。 确 保 黑 色 材质 “Smoothness” 的 值 已 经 
调整 为 0， 从 而 避免 材质 变 得 光亮 。 在 为 炮塔 分 配 了 材质 之 后 ， 炮 塔 就 
能 更 好 地 融合 到 整个 场景 之 中 ， 整 个 天 卡 的 配色 方案 也 就 更 加 合理 
了 ， 如 图 6.23 所 示 。 


图 6.23 ”将 这 个 黑色 的 材质 分 配给 炮塔 


二 


此 时 的 炮塔 可 以 发 射 炮弹 了 ， 还 需要 创建 一 个 空 的 游戏 对 象 来 产 
生 炮 弹 。 首 先 依次 选择 “GameObject | Create Empty”， 然 后 将 层次 面板 
中 的 对 象 拖 上 忠 到 立方 体 炮 塔 上 ， 使 其 成 为 炮塔 的 一 个 子 对 象 。 然 后 ， 
将 这 个 空 对 象 定位 到 炮塔 的 顶部 。 安 放 到 指定 位 置 之 后 ， 为 这 个 空 对 
象 分 配 一 个 图 标 ， 这 样 才 能 在 视图 中 看 到 这 个 对 象 。 确 保 这 个 空 对 象 
被 选中 之 后 ， 从 对 象 检 查 (Inspector) 面板 处 单 击 立方 体 图 标 (就 在 对 
象 名 字 的 劳 边 ) ， 为 其 分 配 一 个 图 形 化 的 表示 ， 如 图 6.24 所 示 。 
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图 6.24 为 炮塔 的 发 射 点 分 配 一 个 图 标 


在 进一步 深入 研究 炮弹 的 产生 之 前 ， 需 要 设计 一 些 炮弹 。 也 就 是 
说 ， 这 个 炮塔 必须 发 射 些 什么 ， 现 在 就 是 创造 这 个 物体 的 时 候 。 炮 弹 
的 外 观 应 该 是 一 个 发 光 并 且 闪 烁 的 球 。 首 先 在 应 用 程序 菜单 依次 选 
择 “<GameObject | Particle System”* 来 创建 一 个 新 的 粒子 系统 。 在 Unity 
中 ， 使 用 粒子 系统 去 创建 璀 、 火 、 灰 全 、 烟 筋 、 闪 光 等 特殊 效果 是 十 
分 有 效 的 。 当 从 主 菜 单 处 创建 一 个 新 的 粒子 系统 时 ， 就 会 自动 在 场景 
中 创建 一 个 对 象 ， 而 且 这 个 对 象 处 于 选中 状态 。 当 对 象 被 选中 时 ， 就 
可 以 在 Scene 视图 中 对 这 个 粒子 系统 进行 预览 。 在 默认 情况 下 ， 这 个 系 
统 会 产生 一 些小 型 斑点 一 样 的 粒子 ， 如 图 6.25 所 示 。 
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图 6.25 ”创建 一 个 例子 系统 


有 时 ， 在 为 二 维 游 戏 创 建 粒 子 系统 之 后 会 发 现 根 本 无 法 看 见 
这 是 因为 粒子 系统 可 能 被 场景 中 的 其 他 二 维 对 象 挡住 了 ， ea 
者 游戏 中 的 角色 。 可 以 在 对 象 检查 (Inspector) 面板 处 控制 例子 系统 的 
深度 序号 。 向 下 滑动 对 象 检查 (Inspector) 面板 的 滚动 条 ， 然 后 单 
击 “Renderer” 选 项 前 方 的 展开 按钮 来 显示 更 多 的 选项 。 了 “Renderer” 组 
中 ， 将 “Order In Layer” 的 值 设 置 成 为 一 个 更 大 的 值 ， 这 个 值 要 比 其 他 对 
象 的 值 都 大 ， 这 样 粒子 就 会 显示 在 最 前 面 ， ns 
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图 6.26 ”调整 粒子 的 泻 染 顺序 


现在 已 经 可 以 在 视图 中 看 到 产生 的 粒子 了 。 不 过 要 想 粒 和子 系统 如 
同 构想 的 那样 工作 ， 还 需要 做 出 一 些 调整 和 改进 ， 包 括 测试 设置 ， 在 
视图 中 对 效果 进行 预览 ， 对 需求 进行 判断 ， 然 后 按 需 进行 调整 和 修 
改 。 接 下 来 创建 一 个 更 真实 的 炮弹 对 象 ， 希望 粒子 是 慢 慢 地 向 四 面 八 
方 产 生 ， 而 不 是 向 一 个 方向 产生 。 在 对 象 检查 (Inspector) 面板 处 展 
开 “Shape” 选 项 来 控制 产生 炮弹 的 形状 。 然 后 将 “Shape” 的 值 由 “Cone”* 修 
改 为 “Sphere”， 将 Radius 修 改 为 0.01°。 完成 之 后 ， 交 子 将 会 产生 ， 并 从 
一 个 球面 向 各 个 方 同 飞行 ， 如 图 6.27 所 示 。 
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图 6.27 ”修改 粒子 系统 发 射 器 (Particle System Emitter) 的 形状 


对 粒子 系统 的 属性 进行 修改 ， 使 它 出 现 一 个 能 量 球 的 效果 ， 在 对 
象 检 查 (Inspector) 面板 中 将 “Start Lifetime” 的 值 修改 为 0.19， 将 “Start 
Speed” 的 值 修改 为 0.88， 将 “Start Size” 的 值 修 改 为 0.59， 然 后 ， 将 “Start 
Color” 的 值 修改 为 “Teal”( 浅 蓝 色 ) ， 如 图 6.28 所 示 。 
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图 6.28 配置 粒子 系统 的 主要 属性 


现在 粒子 系统 看 起 来 和 预期 的 没有 什么 区 别 了 。 不 过 ， 如 采 单 击 
工具 条 上 的 “Play” 进 入 游戏 模式 以 后 ， 束 会 发 现 这 些 粒子 根本 不 会 动 。 
炮弹 应 该 在 空中 飞 过 并 攻击 目标 ， 所 以 还 需 编 写 一 个 名 为 “Mover” 的 脚 
本 ， 并 将 这 个 脚本 附加 到 对 象 上 ， 下 面 给 出 了 Mover 中 的 脚本 内 容 ， 详 
见 代码 示例 6.4。 


代码 示例 6.4: 


using UnityEngine 

using System,.Collections 

// 

public class Mover : MonoBehaviour 


public float Speed = 10f; 
private Transform ThisTransform = null; 


// 初始 化 函数 


void Awake() 


ThisTransform = GetComponent<Transform>( ) ; 


// Update 函 数 在 每 一 帧 调用 


void Update () 


// 更 新 对 象 的 位 置 
ThisTransform.position += ThisTransform,forward * Speed * 
Time.deltaTime; 


对 于 Mover 脚 本 中 的 所 有 内 容 ， 我 们 可 以 说 是 都 了 如 指 掌 了 。 它 负 
责 让 一 个 对 象 (炮弹 ) 按照 其 前 进 方向 矢量 移动 。 基 于 这 个 原因 ， 再 
加 上 游戏 是 二 维 的 ， 需 要 对 例子 系统 对 象 进行 旋转 操作 ， 保 证 其 前 向 
回 量 治 着 X 轴 的 方向 ， 如 图 6.29 所 示 。 
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图 6.29 ”将 前 向 矢量 对 齐 到 X 轴 


接 下 来 ， 这 些 炮弹 除了 在 关卡 中 运动 之 外 ， 还 必须 可 以 同 玩家 角 
色 发 生 碰 撞 ， 并 且 对 玩家 造成 伤害 。 要 实现 这 个 功能 ， 还 需要 几 个 步 
台 ， 首 先 要 向 炮弹 对 象 上 添加 一 个 刚体 组 件 ， 这 样 炮弹 就 可 以 和 其 他 
的 对 象 发 生 碰撞 了 。 首 移 在 场景 中 选中 炮弹 对 象 ， 然 后 在 应 用 程序 菜 
单 中 依次 选中 “Component | Physics | Rigidbody2D”， 添 加 成 功 之 后 ， 在 
对 和 象 Inspector 铭 板 上 的 “Rigidbody” 组 件 处 ， 人 义 选 上 “Is Kinematic” 复 选 
框 。 这 样 就 确保 了 对 象 可 以 按照 脚本 移动 ， 并 且 仍 然 不 受 重力 的 影 
响 ， 可 以 和 其 他 物理 对 象 进行 互动 ， 如 图 6.30 所 示 。 
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图 6.30 ”为 Rigidbody 人 勾 选 上 “Is Kinematic” 复 选 杠 


现在 为 炮弹 对 象 添 加 一 个 圆 形 碰 撞 体 ， 这 个 碰撞 体会 决定 炮弹 的 
E 状 和 大 小 等 物理 上 的 形态 ， 添 加 了 这 个 碰撞 体 之 后 ， 就 可 以 检测 炮 
蚤 和 目标 之 间 的 碰撞 。 在 应 用 程序 染 单 上 依次 选中 *Component | Physics 
2D CircleCollider”， 成 功 添加 之 后 ， 将 这 个 础 撞 体 标记 为 触发 器 ( 选 
中 “Is Trigger”) ， 然 后 修改 Radius 值 直到 它 接近 炮弹 的 大 小 为 止 ， 如 图 
6.31 所 示 。 
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图 6.31 为 炮弹 对 象 配置 圆 形 碰撞 体 


现在 炮弹 还 缺乏 两 个 最 后 的 功能 ， 百 和 爷 ， 炮 弹 应 该 可 以 破坏 甚至 
毁灭 它 所 伴 到 的 目标 ， 其 次 ， 炮 弹 应 该 可 以 目 我 妈 灰 。 它 们 都 应 该 发 
生 在 炮弹 与 目标 发 生 碰 撞 之 后 的 一 段 时 间 。 为 了 实现 这 两 个 功能 ， 需 
要 编写 两 段 新 的 代码 ， 分 别 起 名 为 “CollideDestroy.cs” 和 “Ammo.cs”。 下 
面 给 出 的 就 是 Ammo.cs 中 的 代码 ， 详 见 代 码 示例 6.5。 


代码 示例 6.5: 


using UnityEngine; 
using System.Collections; 
// 


public class Ammo : MonoBehaviour 
// 对 玩家 造成 的 伤害 
public float Damage = 100f; 


// 炮 弹 的 生命 周期 
public float LifeTime = 1f; 


void Start() 


Invoke ("Die", LifeTime); 


void OnTriggerEnter2D(Collider2D other) 


{ 
// 如 果 玩 家 对 象 不 存在 ， 则 退出 游戏 
if(!other.CompareTag("Player"))return; 


// 造 成 伤害 
PlayerControl.Health -= Damage 


public void Die() 


Destroy(gameObject); 


下 面 的 代码 列 出 了 CollideDestroy.cs 的 内 容 


using UnityEngine; 
using System.Collections; 


public class CollideDestroy : MonoBehaviour 


{ 


具有 相关 tag 属 性 的 对 象 之 后 就 会 销毁 
public string TagCompare = string.Empty; 


void OnTriggerEnter2D(Collider2D other) 


if(!other.CompareTag(TagCompare))return; 


Destroy(gameObject); 


这 些 代 码 所 实现 的 功能 与 之 前 的 双 摇 杆 守 宙 设 计 游 戏 基本 相同 。 
这 两 个 文件 都 应 该 附加 到 场景 中 的 炮弹 对 象 上 去 。 当 完成 以 后 ， 就 从 
场景 视图 中 将 这 个 炮弹 对 象 拖 息 到 项 目 面板 上 的 “Prefabs” 文 件 夹 中 ， 


这 样 操 作 之 后 ， 就 将 这 个 炮弹 制作 成 了 一 个 预 设 体 ， 可 以 在 任何 场景 
中 再 次 应 用 ， 如 图 6.32 所 示 。 
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图 6.32 将 添加 了 Destory 和 Ammo 
脚本 的 炮弹 制作 成 一 个 预 设 体 


现在 已 经 拥有 了 一 个 可 以 开火 、 移 动 以 及 和 玩家 对 象 碰撞 的 炮弹 
对 象 。 将 它 的 Damage 值 设置 成 一 个 足够 大 的 值 ， 就 可 以 毁 炎 玩家 对 
象 。 现 在 向 场景 中 添加 一 个 炮弹 对 象 ， 然 后 按 下 键盘 上 的 “Play” 图 标 。 
当然 ， 现 在 场景 中 还 没有 任何 东西 可 以 发 射 炮弹 ， 接 下 来 就 开发 这 个 
功能 。 


6.6 ”炮塔 和 炮弹 


现在 已 经 创建 了 一 个 炮弹 对 象 (发射 物 ) ， 而 且 完 成 了 炮塔 对 象 
的 设计 ， 但 是 它 还 不 能 产生 炮弹 。 下 面 就 来 实现 这 个 功能 ， 已 经 在 炮 
塔 的 前 方 设置 了 一 个 炮弹 的 产生 点 ， 并 且 把 它 作 为 了 炮塔 的 子 对 象 。 
现在 为 这 个 对 象 添 加 一 段 新 的 脚本 ， 将 这 个 脚本 命名 


为 “AmmoSpawnercs”， 这 个 脚本 用 来 负责 在 固定 的 时 间 里 产生 炮弹 ， 
详 见 代码 示例 6.6。 


代码 示例 6.6: 


using UnityEngine; 
using System.Collections; 


public class AmmoSpawner : MonoBehaviour 


{ 


// 对 炮弹 预 设 体 的 引用 
public GameObject AmmoPrefab = null; 


// 对 transform 的 引用 
private Transform ThisTransform = null; 


// 时 间 范 围 向 量 
public Vector2 TimeDelayRange = Vector2.zero; 


// 炮 弹 的 生命 周期 
public float AmmoLifeTime = 2f; 
// 炮 弹 的 速度 

public float AmmoSpeed = 4f; 


// 炮 弹 的 伤害 值 
public float AmmoDamage = 100f; 


void Awake() 


ThisTransform = GetComponent<Transform>(); 


void Start() 


FireAmmo( ); 


public void FireAmmo() 
{ 
GameObject 0bj = Instantiate(AmmopPrefab, 
ThisTransform.position, ThisTransform.rotation) as 
GameObject; 
Ammo AmmoComp = 0bj.GetComponent<Ammo>(); 
Mover MoveComp = 0bj.GetComponent<Mover>(); 
AmmoComp .LifeTime = AmmoLifeTime; 


AmmoComp .Damage = AmmoDamage; 
MoveComp.Speed = AmmoSpeed ; 


// 等 待 直到 下 一 个 周期 开始 


Invoke("FireAmmo", Random.Range(TimeDelayRange.x, 
TimeDelayRange.y)); 


前 面 的 代码 主要 实现 了 使 用 Invoke 函 数 在 场景 中 对 炮弹 预 设 体 的 实 
例 化 ， 这 段 代码 会 在 Random.Range 产 生 一 个 随机 的 时 间 ， 每 经 过 这 样 
的 一 个 随机 时 间 残 会 调用 Invoke 函 数 一 次 。 可 以 使 用 上 一 章 炮弹 实例 中 
讲解 过 的 对 象 池 (Object Pooling) 技术 实现 对 这 段 代码 的 改进 ， 但 是 
在 当前 的 这 个 例子 中 ， 这 段 代 码 即 使 不 做 修改 也 是 可 以 接受 的 ， 如 图 
6.33 所 示 。 


现在 已 经 创建 了 一 个 炮塔 ， 就 像 之 前 的 炮弹 一 样 ， 应 该 将 炮塔 也 
转换 成 一 个 预 设 体 。 首 先 要 确认 “Time Delay Range”( 也 就 是 炮弹 产生 
的 时 间 间 隔 ) 中 的 X、Y 值 设置 为 比 0 大 的 值 。 否 则 ， 炮 弹 就 会 一 直 不 断 
地 产生 出 来 ， 从 而 导致 玩家 无 法 县 避 。 如 有 果 需 要 ， 咕 继续 布置 更 多 的 
炮塔 来 平衡 游戏 的 难度 。 
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图 6.33 ”设置 “Time Delay Range” 的 X、Y 值 


6.7 NPC 和 任务 系统 


NPC 是 非 玩 家 角色 (Non-player Character) 的 缩写 ， 通 党 指 的 是 那 
些 友好 的 、 中 立 的 非 玩 家 控制 角色 。 在 冒险 游戏 中 ， 关 卡 3 应 该 有 一 个 
NPC， 这 个 NPC 吏 站 在 他 的 房子 外 面 ， 他 会 提供 一 个 任务 。 具 体 来 
说 ， 在 关卡 2 收集 一 个 宝石 ， 要 面 对 很 多 危险 ， 例 如 坑 和 炮塔 。 为 了 创 
建 NPC 和 角色 ， 可 以 对 玩家 角色 进行 复制 ， 然 后 修改 这 个 角色 的 颜色 ， 
这 样 NPC 角 色 和 玩家 角色 看 起 来 就 不 太一 样 了 。 现 在 只 需要 从 项 目 面 
板 拖 点 “Player” 预 设 体 到 关卡 2 的 场景 中 ， 将 其 放置 在 房屋 区 域 附 近 。 
然后 将 所 有 后 添加 的 组 件 (例如 玩家 控制 器 冬 撞 体 ， 都 去 除 ， 这 个 
角色 现在 束 变 回 了 一 个 标准 的 不 受 玩家 控制 的 图 像 精 灵 ， 如 图 6.34 所 
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图 6.34 ”从 玩家 角色 预 设 体 创建 一 个 NPC 


现在 将 这 个 角色 的 “Scale”* 属 性 中 的 X 值 修改 为 原 值 (0.8) 的 相反 
数 (-0.8) ， 这 样 这 个 角色 的 脸 将 会 面向 左面 ， 而 不 是 右面 。 注 意 ， 这 
里 要 选择 整个 NPC 对 和 象 ， 而 不 是 这 个 NPC 的 组 成 部 分 ， 例 如 手 和 手 
臂 。 否 则 所 有 的 子 对 象 都 会 翻转 方向 ， 如 图 6.35 所 示 。 
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图 6.35 ”将 NPC 角 色 的 Scale 属 性 的 X 值 取 相 反 


还 需要 改变 NPC 的 颜色 ， 把 原来 的 绿色 修改 为 红色 ， 这 样 NPC 看 
起 来 就 和 玩家 角色 不 一 样 了 。 现 在 ， 这 个 角色 是 由 几 个 图 像 精灵 对 象 
共同 组 成 的 。 分 别 选中 每 个 对 象 ， 然 后 在 对 象 检 查 (Inspector) 面板 处 
修改 颜色 。 不 过 如 采 一 次 性 选中 所 有 对 象 一 起 修改 它们 的 颜色 ， 会 更 
加 简单 。 从 Unity 5 之 后 ， 就 可 以 一 次 对 多 个 对 象 的 共同 属性 进行 编 
辑 ， 如 图 6.36 所 示 。 


图 6.36 ”设置 NPC 颜 色 


NPC 应 该 能 通过 某 种 途径 和 玩家 进行 交流 。 这 表示 当 玩 家 角色 靠 
近 一 个 NPC 时 ， 这 个 NPC 应 该 展示 一 个 文本 对 话 框 。 这 个 对 话 框 中 的 
内 容 应 该 是 变化 的 ， 这 种 变化 是 根据 玩家 完成 任务 的 状态 决定 的 。 当 
玩家 第 一 次 访问 NPC 时 ，NPC 应 该 给 予 玩家 一 个 任务 。 当 玩家 第 二 次 
访问 NPC 时 ，NPC 的 回应 应 该 与 第 一 次 不 同 ， 但 是 回答 的 内 容 会 根据 
玩家 当前 是 否 完成 了 任务 而 不 同 。 要 实现 功能 : 当 玩 家 接近 NPC 时 ， 
必须 可 以 检测 到 ， 可 以 使 用 碰撞 体 来 实现 。 首 移 选 中 场景 中 的 NPC， 
然后 在 应 用 程序 菜单 处 选中 “Component | Physics 2D | Box Collider 
2D”， 注 意 ， 这 一 次 的 磁 撞 体 不 应 该 与 NPC 大 小 一 样 ， 而 是 一 个 环绕 在 


类 


NPC 外 部 的 区 域 ， 当 玩家 进入 到 这 个 区 域 时 ， 就 会 与 NPC 进 行 交 谈 。 
将 这 个 碰撞 器 设置 为 一 个 触发 器 (Trigger) 对 象 ， 这 样 玩家 才能 进 
入 ， 并 且 可 以 罕 过 ， 如 图 6.37 所 示 。 
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图 6.37 ”配置 一 个 NPC 的 碰撞 体 


在 这 个 阶段 ， 需 要 一 个 GUI 元 件 作 为 展示 NPC 讲 话 内 容 的 载体 。 这 
个 功能 只 需要 一 个 包含 了 文本 作为 子 对 象 的 GUI 画布 对 象 。 通 过 依次 在 
应 用 程序 菜单 处 单 击 “GameObject | UI| Canvas and GameObject | UI 
IText" 来 添加 这 些 对 象 。 这 里 的 画布 对 象 需要 一 个 画布 组 (Canvas 
Group) 组 件 ， 可 以 使 用 “Component | Layout | Canvas Group” 选 项 来 添 
加 ， 这 样 束 可 以 将 所 有 的 子 对 象 作为 一 个 整体 来 设置 Alpha 属 性 。 从 对 
象 检 查 (Inspector) 面板 中 修改 Alpha 的 值 ， 当 值 为 1 时 ， 表 示 这 个 对 象 
完全 可 见 ， 值 为 0 时 ， 表 示 完 全 透明 ， 如 图 6.38 所 示 。 
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图 6.38” 问 GUI 会 话 面板 添加 一 个 画布 组 组 件 


现在 已 经 能 实现 面板 的 淡 入 淡出 效果 了 ， 只 需要 将 Alpha 值 逐渐 由 
0 调整 到 1 即 可 。 不 过 ， 仍 然 需要 一 个 保存 任务 信息 的 功能 ， 这 样 才能 
确定 任务 是 否 已 经 分 配 ， 以 及 根据 任务 完成 状态 确定 哪些 文本 应 该 显 
示 在 对 话 框 中 。 为 了 实现 这 个 效果 ， 需 要 添加 一 个 新 的 类 ， 将 这 个 类 
命名 为 “QuestManager.cs”。 这 个 类 可 以 用 来 创建 和 保存 任务 信息 ， 详 见 
代码 示例 6.7。 


代码 示例 6.7: 


using UnityEngine; 
using System.Collections; 


[System.Serializablel] 
public class Quest 


// 任 务 完 成 状态 
public enum QUESTSTATUS {UNASSIGNED=0,ASSIGNED=1,COMPLETE=2}; 


public QUESTSTATUS Status = QUESTSTATUS ,UNASSIGNED ， 
public string QuestName = string.Empty; 


public class QuestManager : MonoBehaviour 


{ 


// 游 戏 中 的 所 有 任务 

public Quest[] Quests ; 

private static QuestManager SingletonInstance = null; 
public static QuestManager ThisInstance 


{ 


get{ 
if(SingletonInstance==null) 


GameObject QuestObject = new GameObject 
("Default" ); 

SingletonInstance = QuestObject. 
AddComponent<QuestManager>(); 


return SingletonInstance,; 


} 
} 
//---- 
void Awake() 
{ 
/如 果 这 里 已 经 有 了 一 个 存在 的 实例 ， 就 销毁 游戏 对 象 
If(SingletonInstance ) 
DestroyImmediate(gameobject ) ; 
return 
} 与 
// 只 有 一 个 实例 的 情况 
SingletonInstance = this,; 
DontDestroyOnLoad(gameObject); 
} 
//--- 


public static Quest.QUESTSTATUS GetQuestStatus(string 
QuestName ) 


foreach(Quest Q in ThisInstance.Quests) 


If(Q.QuestName,.Edquals(QuestName ) ) 
return Q.Status 


} 


return Quest.QUESTSTATUS ,UNASSIGNED ， 


public static void SetQuestStatus(string QuestName, Quest. 
QUESTSTATUS NewStatus) 


foreach(Quest Q in ThisInstance.Quests) 
if(Q.QuestName.Equals (QuestName)) 


Q.Status = NewStatus; 
return; 


// 将 任务 重 置 回 到 未 分 配 的 状态 


public static void Reset() 


if(ThisInstance==null)return,; 


foreach(Quest Q in ThisInstance.Quests) 
Q.Status = Quest .QUESTSTATUS ,UNASSIGNED ， 


下 面 对 代 码 示例 6.7 进 行 总 结 。 


QuestManager 类 中 维护 了 一 个 包含 所 有 任务 的 列表 ， 也 残 是 说 ， 
这 个 列表 中 包含 的 是 游戏 中 所 有 的 任务 ， 而 不 仅仅 是 那些 已 经 分 
配 的 或 者 完成 的 任务 。Quest 类 中 定义 了 一 个 任务 的 名 字 和 状态 。 
所 有 的 任务 都 有 一 个 状态 ， 这 个 状态 可 以 是 以 下 3 种 之 一 : 
UNASSIGNED ( 指 还 没有 分 配给 玩家 的 任务 ) ，ASSIGNED (已 
经 分 配给 玩家 ， 但 是 玩家 还 没有 完成 ) ，COMPLETE (已 经 分 配 
给 玩家 ， 而 且 玩家 已 经 完成 了 的 任务 ) 。 

函数 GetQuestStatus 用 来 检测 一 个 指定 任务 的 完成 情况 。 函 数 
SetQuestStatus 用 来 为 一 个 指定 任务 分 配 新 的 状态 ， 这 些 都 是 静态 
函数 ， 因 此 ， 任 何 脚本 都 可 以 在 任何 地 方 对 数据 进行 获取 或 者 修 
改 。 


如 果 想 使 用 这 个 对 象 ， 需 要 在 场景 中 (游戏 中 的 第 一 个 场景 ) 创 
建 一 个 实例 ， J (Inspector) 面板 处 定义 所 有 可 以 完成 的 
任务 。 在 游戏 中 ， 这 里 只 有 一 个 任务 ， 也 束 症 NPC 和 角色 给 的 任务 ， 在 
Level2 中 的 危险 场景 中 目 着 他 卉 的 雹 人 收集 宝 五 。 如 图 6.39 所 示 ， 这 里 
给 出 了 如 何 使 用 “Quest Manager” 来 配置 任务 。 
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图 6.39 使 用 “Quest Manager" 来 配置 游戏 中 的 任务 


“Quest Manager 定 义 了 游戏 中 所 有 可 能 的 任务 ， 不 管 它们 是 不 是 
已 经 由 玩家 领取 。 不 过 ，NPC 仍 然 需 要 为 玩家 分 配 任务 。 这 一 点 可 以 
使 用 脚本 来 实现 ， 下 面 编写 一 个 名 为 “QuestGiver.cs” 的 脚本 。 代 码 示例 

给 出 了 这 个 脚本 的 内 容 ， 它 应 该 附加 到 所 有 人 能 提供 任务 的 对 象 上 ， 
el 


代码 示例 6.8: 


using UnityEngine; 
using System.Collections; 
using UnityEngine.UI; 


public class QuestGiver : MonoBehaviour 


{ 


于 理解 的 任务 名 称 


public string QuestName = string.Empty; 
// 对 UI 文 本 盒 的 引用 
public Text Captions = null; 
// 要 说 的 话 列 表 

public string[] CaptionText; 


void OnTriggerEnter2D(Collider2D other) 
if(!other.CompareTag("Player"))return,; 
Quest .QUESTSTATUS Status = QuestManager. 


GetQuestStatus (QuestName); 
Captions.text = CaptionText[(int) Status]; //Update GUI text 


void OnTriggerExit2D(Collider2D other) 


Quest .QUESTSTATUS Status = QuestManager. 
GetQuestStatus(QuestName ) ， 
if(Status == Quest.QUESTSTATUS ,UNASSIGNED ) 
QuestManager .SetQuestStatus (QuestName, Quest .QUESTSTATUS. 
ASSIGNED); 


if(Status == Quest .QUESTSTATUS .COMPLETE ) 
Application.LoadLevel(5); //Game completed, go to win 
screen 


将 这 段 脚本 附加 到 NPC 上 之 后 ， 束 可 以 开始 对 这 个 游戏 进行 测试 
了 。 当 玩家 走 近 NPC 时 ，GUI 文 本 应 该 改变 为 在 对 象 检查 (Inspector) 
面板 中 的 QuestGiver 组 件 中 指定 的 任务 对 应 的 选项 。 这 里 
的 “QuestName” 的 值 应 该 与 QuestManager 类 中 定义 的 相 匹配 ， 如 图 6.40 
所 示 。 
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图 6.40 ”定义 QuestGiver 组 件 


现在 分 配 的 任务 是 收集 宝石 ， 但 是 关卡 中 没有 宝石 ， 下 面 添 加 一 
个 宝石 来 让 玩家 收集 。 将 一 个 宝石 贴图 从 项 目 面板 〈 贴 图 文件 夹 ) 拖 
点 到 场景 2 上 面 的 平台 上 ， 所 以 玩家 必须 仆 到 上 面 才能 取得 宝石 (这 也 
是 一 个 挑 成 ) ， 如 图 6.41 所 示 。 给 对 象 添 加 一 个 圆 形 础 撞 体 (触发 
器 ) ， 这 样 就 可 以 与 玩家 发 生 一 个 碰撞 。 
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图 6.41 ”创建 一 个 任务 对 象 


最 后 ， 需 要 一 段 新 的 QuestItem 肢 本 ， 当 宝石 被 收 集 后 ， 这 个 脚本 
可 以 更 改 Quest Manager 类 中 的 任务 状态 ， 当 玩家 再 次 访问 NPC 时 ， 人 多 
许 QuestGiver 检 测 宝 石 是 否 已 经 税收 集 。QuestItem 脚 本 应 该 附加 到 宝石 
对 象 上 ， 代 码 示例 6.9 是 QuestItem 脚 本 的 内 容 。 


代码 示例 6.9: 


using UnityEngine ; 
using System,Collections ; 


public class QuestItem : MonoBehaviour 


{ 


public string QuestName ; 

private AudioSource ThisAudio = null; 
private SpriteRenderer ThisRenderer = null; 
private Collider2D ThisCollider = null; 

//---- 

void Awake() 


ThisAudio = GetComponent<AudioSource>(); 
ThisRenderer = GetComponent<SpriteRenderer>(); 
ThisCollider = GetComponent<Collider2D>( ); 


// 初始 化 画 数 
void Start () 


// 隐 藏 对 象 
gameObject.SetActive(false); 


// 如 果 任 务 已 经 分 配 就 显示 对 象 
if(QuestManager .GetQuestStatus(QuestName) == Quest. 
QUESTSTATUS .ASSIGNED) 
gameObject .SetActive(true); 


// 如 果 物 品 是 可 见 而 且 可 收集 的 
void OnTriggerEnter2D(Collider2D other ) 


if(!other.CompareTag("Player"))return; 

if(!gameObject.activeSelf)return,; 

// 收 集成 功 ， 任 务 完成 

QuestManager .SetQuestStatus (QuestName, Quest .QUESTSTATUS. 
COMPLETE ) ， 


ThiIsRenderer .enabled=ThisCcollider.enabled=false， 


if(ThisAudio!=null)ThisAudio.Play(); // 如 果 有 音效 就 播放 
attached 


前 面 的 代码 负责 在 玩家 角色 进入 到 了 触发 区 域 并 将 宝石 收集 之 后 
修改 任务 的 状态 ， 这 一 过 程 发 生 在 QuestManager 类 中 。 


9 已 经 完成 了 一 个 完整 的 任务 系统 ， 也 设计 好 了 一 个 NPC 角 
色 。 这 个 项 目的 完整 文件 可 以 在 we 
a 在 这 里 作者 强烈 建议 你 对 这 个 文件 进行 检测 ， 并 开始 试 玩 这 
个 游戏 ， 图 6.42 束 给 出 了 游戏 进行 的 界面 。 
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图 6.42 已 经 完成 的 游戏 


6.8 “人 小结 


很 了 不 起 吧 ! 我 们 现在 已 经 完成 了 二 维 冒险 游戏 。 注 意 一 点 ， 为 
te a 本 章 中 省 略 了 一 些小 的 细节 ， 这 些 细 市 在 前 
面 的 章 廊 已 经 讲解 过 。 所 以 ， 打 开 教 程 的 文件 并 对 已 经 完成 的 项 目 进 
行 检测 ， Eee 一 点 十 分 重要 。 本 书 到 现在 为 止 已 


经 完成 了 3 个 Unity 项 目 。 所 以 ， 以 前 所 有 的 内 容 都 已 经 结束 ， 在 下 一 章 
中 将 迎 来 最 后 的 大 结局 一 一 第 四 个 项 目 。 


第 7 章 ”有 智慧 的 敌人 (1) 


这 一 章 将 创建 最 后 一 个 项 目 ， 这 个 项 目 中 包含 一 个 广阔 的 地 面 。 
不 同 于 之 前 的 3 个 项 目 ， 这 个 项 目 将 不 会 彻底 完结 ， 也 没有 明确 的 胜利 
和 失败 条 件 ， 只 是 一 个 用 来 实现 功能 原型 和 概念 验证 的 项 目 ， 在 游戏 
中 突出 了 一 系列 的 重要 编码 技术 和 思想 。 具 体 来 说 ， 创 建 一 个 具有 地 
形 的 世界 、 第 一 人 称 视角 角色 以 及 一 些 天 人。 这 些 敌 人 部 拥有 人 工 关 
能 ， 它 们 在 场景 中 进行 巡逻 并 搜索 玩家 ， 如 末 发 现 玩 家 束 会 发 起 攻 
击 。 在 这 一 章 中 ， 将 就 以 下 主题 进行 探讨 : 


。 如 何 使 用 地 形 工具 来 构建 关卡 和 地 形 
。 如 何 生成 以 及 使 用 导航 网 格 
。 如 何 为 人 工 智能 的 开发 做 准备 


本 章 所 需要 的 项 目 文件 和 资源 可 以 在 本 书 的 配套 文件 Chapter07/Start 文 
件 夹 中 找到 ， 如 果 没 有 建立 自己 的 项 目 ， 那 么 就 可 以 使 用 这 里 面 的 文件 。 


7.1 项 目 概览 


要 创建 的 项 目 是 一 个 第 一 人 称 视 和 角 游 戏 ， 游 戏 实现 了 一 个 第 一 视 
角 的 玩家 角色 原型 在 地 形 环 境 中 进行 漫游 和 探索 。 这 个 地 形 中 包括 了 
丘陵 、 沟 合 以 及 其 他 地 形 。 在 这 个 起 伏 不 平 的 地 形 中 还 分 布 着 一 些 敌 


人 的 角色 (NPC) ， 每 个 夏 人 都 有 自己 的 人 工 智能 。 具 体 来 说 ， 每 个 
敌人 都 症 四 处 游荡 (巡逻 模式 ) 去 搜索 玩家 。 如 采 玩 家 进入 了 敌人 的 
视线 内 ，NPC 将 会 开始 追逐 玩家 (人 退 捕 模式 ) 。 如 果 在 追逐 过 程 中 ， 

玩家 逃 出 了 NPC 的 视线 ， 它 们 将 重新 开始 巡逻 模式 。 另 一 方面 ， 如 果 
敌人 在 追逐 过 程 中 接近 了 玩家 ， 那么 它们 就 会 对 玩家 发 起 攻击 (攻击 
模式 ) 。 所 有 的 AI (人 工 智能 ) 都 具有 3 个 状态 : 巡逻 模 式 、 追 捕 模 式 
和 攻击 模式 。 这 就 构成 了 敌人 的 AI， 也 是 在 这 个 项 目 中 对 玩家 的 主要 
威胁 。 图 7.1 所 示 为 已 经 完成 的 完整 项 目 。 


图 7.1 构建 一 个 包含 了 具有 智能 NPC 的 游戏 世界 


7.2 ”入门 指南 


仍然 以 创建 一 个 新 的 项 目 作 为 本 章 的 开始 ， 这 个 过 程 在 以 前 的 章 
廊 中 已 经 有 过 详细 的 介绍 。 在 整个 项 目 中 ， 将 会 使 用 到 3 个 Unity 内 置 的 
资源 包 ， 即 角色 (Characters) 资源 包 、 特 效 (Effect) 资源 包 、 环 境 
(Environment) 资源 包 。 这 些 资源 包 可 以 通过 单 击 应 用 程序 菜单 上 
的 “Assets |Import Packages” 来 实现 ， 如 图 7.2 所 示 。 


图 7.2 ”导入 资源 包 


首先 创建 游戏 世界 (陆地 ) ， 这 个 世界 是 一 个 室外 环境 ， 即 一 个 
由 草原 、 丘 陵 和 山脉 共同 构成 的 游戏 世界 。 可 以 使 用 3D 建 模 软件 比如 
说 3DS MAX、Maya 或 者 Blender 来 创建 一 个 这 样 的 景观 ， 再 将 这 样 的 景 


观 导 入 到 Unity 中 。 不 过 ， 在 Unity 中 内 置 了 地 形 设计 工具 ， 虽 然 在 很 多 
方面 (如 即将 看 到 的 ) 还 很 有 限 ， 但 是 仍然 不 失 为 一 款 强 大 而 通用 的 
工具 。 在 应 用 程序 荣 单 处 依次 选择 “GameObject | 3D Object | Terrain” 来 
创建 一 个 新 的 地 形 ， 如 图 7.3 所 示 。 


> 


图 7.3 创建 一 个 新 的 地 形 


在 成 功 完成 创建 操作 之 后 ， 一 个 地 形 (Terrain) 对 象 就 被 添加 到 了 
场景 中 的 原点 (0,0,0) 位 置 。 注 意 ， 由 于 这 个 地 形 的 大 小 原因 ， 它 可 
能 不 会 立刻 出 现在 视窗 里 。 接 下 来 解决 这 个 问题 ， 首 先 在 层次 面板 中 
选中 场景 中 的 地 形 对 象 ， 然 后 按 下 键盘 上 的 “F"” 键 ， 这 样 就 可 以 让 这 个 
对 象 处 于 视图 的 中 心 位 置 。 这 个 对 象 看 起 来 就 像 是 一 个 平面 对 象 ， 如 
图 7.4 所 示 。 但 是 与 平面 对 象 不 同 的 是 ， 可 以 改变 这 个 对 象 的 形状 ， 也 
可 以 改变 它 的 造型 ， 这 一 点 接 下 来 融会 看 到 。 


图 7.4 ”向 场景 中 添加 一 个 地 形 对 象 


在 对 地 形 进行 形状 和 造型 的 改变 之 前 ， 应 该 在 对 象 检查 
(Inspector) 面板 处 进行 一 些 初始 的 地 理 设置 ， 以 确保 这 个 地 理 结构 支 
持 所 需要 的 地 形 类 型 ， 而 且 大 小 也 合适 。 首 先 在 视图 中 选中 这 个 地 形 
对 象 ， 然 后 在 对 和 象 检查 (Inspector) 面板 上 单 击 齿轮 图 标 ， 这 样 就 可 以 
显示 出 地 形 的 设置 ， 如 图 7.5 所 示 。 


图 7.5 查看 并 编辑 地 形 的 设置 


默认 情况 下 ， 针 对 大 多 数 的 目的 地 形 都 显得 有 些 太 大 (500m x 
500m) 了 ， 现 在 将 其 缩小 为 256 x 256， 可 以 调整 的 更 小 。 有 具体 的 操作 
是 ， 将 “Width” 和 “Length” 的 值 都 设置 成 256。Height 值 表示 整个 地 形 中 
所 有 区 域 中 的 顶点 或 者 山峰 所 能 到 达 的 最 大 高 度 。 出 于 优化 的 角度 来 
考虑 ， 地 形 的 大 小 够 用 就 可 以 了 ， 无 需 做 得 过 大 ， 因 为 地 形 对 象 往往 
是 高 度 细 化 并 且 性 能 密集 的 ， 如 图 7.6 所 示 。 在 对 地 面 的 造型 进行 改变 
之 前 ， 首 先 要 确认 对 地 形 的 面积 进行 设置 ， 以 避免 做 一 些 无 用 功 。 


图 7.6 ”设置 地 形 分 辩 率 的 宽度 《Width) 和 长 度 (Length) 


7.3 地形 的 构建 


现在 来 塑造 地 形 。 甫 先 选 择 好 地 形 对 象 ， 然 后 在 对 象 检查 
(Inspector) 面板 处 单 击 地 形 组 件 最 左边 的 选项 板 图 标 〈 这 是 抬 高 和 降 
低地 形 的 工具 ) 。 这 样 就 可 以 选择 各 种 刷子 形状 来 绘制 地 形 细节 。 选 
择 一 个 软 的 圆 形 大 刷 《可 以 使 用 刷 大 小 的 滑动 条 来 调节 大 小 ) ， 并 使 
用 透明 度 来 设置 刷子 的 强度 ， 然 后 在 地 形 上 单 击 并 拖 动 这 个 刷子 来 绘 
制 地 形 的 细 证 。 在 地 形 上 创建 一 些 丘 陵 和 山脉 ， 如 图 7.7 所 示 。 记 住 ， 
如 采 需 要 ， 就 按 下 “Shift* 键 ， 这 样 当 单 击 时 就 会 反 转 (降低 ) 地 形 。 


图 7.7 查看 和 编辑 地 形 设 置 


如 有 果 现 在 的 地 形 看 起 来 太 过 粗 焰 ， 显 得 不 够 目 然 ， 可 以 使 用 抚 平 
高 度 (Smooth Height) 工具 将 地 面 上 的 细节 进行 平滑 处 理 ， 具 体 的 操 
作 是 ， 按 下 Terrain 组 件 上 的 第 三 个 按钮 ， 如 图 7.8 所 示 。 当 选择 了 这 个 
工具 之 后 ， 束 可 以 跟 以 前 一 样 设置 刷子 的 形状 、 大 小 以 及 透明 度 ， 当 
在 地 形 上 单 击 之 后 ， 就 可 以 实现 地 形 高 度 变 化 的 平滑 。 


图 7.8 ”启用 抚 平 高 度 (Smooth Height) 工具 


现在 已 经 设置 好 了 地 面 的 形状 和 造型 ， 而 且 也 对 其 进行 了 平滑 处 
理 ， 接 下 来 该 给 它 上 色 了 “。 目前 的 地 形 是 灰色 的 、 沉 问 的 、 没 有 进行 
任何 修饰 的 。 整 个 地 形 没有 明确 的 贴图 或 者 景物 ， 例 如 草 或 者 宕 石 。 
现在 使 用 “Paint Texture” 工 具 来 修正 这 个 问题 ， 在 对 象 检 查 
(Inspector) 面板 上 的 “Terrain” 组 件 处 单 击 “Paint Texture” 按 钮 (第 四 个 
按钮 ) 。 如 果 是 第 一 次 执行 这 个 操作 ， 就 需要 准备 和 加 载 一 组 用 于 着 
色 的 贴图 ， 如 图 7.9 所 示 。 


图 7.9 ”为 地 形 着 色 准 备 贴图 


单 击 “Edit Textures” 按 钮 ， 在 出 现 的 上 下 文 沫 单 中 选中 “Add 
Texture...” 选 项 ， 然 后 束 会 出 现 一 个 贴图 配置 对 话 框 ， 人 允许 在 选项 板 上 
添加 新 的 贴图 ， 如 图 7.10 所 示 。 


图 7.10 ”向 选项 板 中 添加 贴图 


可 以 使 用 项 目 面板 来 查找 本 地 的 Unity 环 境 资源 包 地 形 贴图 ， 
在 “Texture Selection” 对 话 框 打开 并 准备 加 载 第 一 个 贴图 。 这 些 地 图 可 
以 在 “Standard Assets | Environment |TerrainAssets | SurfaceTextures” 文 件 
夹 中 找到 。 基 于 这 个 案例 的 特点 ， 选 择 一 个 长 满 青 草 的 贴图 ， 它 将 被 
用 来 作为 一 个 基础 贴图 来 填充 整个 地 面 。 从 项 目 面板 中 将 长 满 青 草 的 
贴图 拖 电 到 “Texture Selection” 对 话 框 的 “Albedo” 槽 位 中 ， 后 面 
的 “Normal”* 槽 位 保持 为 空 即 可 ， 如 图 7.11 所 示 。 


图 7.11 选择 一 个 基础 贴图 


当 问 “Texture Selection” 对 话 框 中 添加 完 第 一 个 贴图 之 后 ， 一 定 要 
设置 贴图 的 大 小 。 这 里 指 的 是 贴图 的 大 小 〈 单 位 为 米 ) ， 一 个 单独 的 
贴图 覆盖 的 面积 。 想 要 获得 一 个 准确 的 平 铺 值 ， 需 要 一 个 不 断 尝试 的 
过 程 ， 需 要 不 断 地 进行 设置 、 预 览 、 再 调整 ， 直 到 看 起 来 合适 。 对 于 
这 个 例子 ， 使 用 的 值 为 75 x 75， 然 后 单 击 添加 按钮 ， 如 图 7.12 所 示 。 


图 7.12 ”设置 贴图 平 铺 尺寸 


当 单 击 “Add” 按 钮 之 后 ， 基 本 贴图 束 会 平 铺 在 地 面 上 。 从 远 处 看 ， 
这 些 场景 视图 中 平 铺 的 贴图 显得 十 分 明显 ， 而 且 看 起 来 也 很 不 舒服 。 
你 可 能 布 望 在 此 基础 上 对 平 铺设 置 重新 进行 调试 。 不 过 从 一 个 第 一 人 
称 视角 来 看 ， 效 有 果 吏 完全 不 一 样 了 。 基 于 这 个 原因 ， 使 用 一 个 第 一 人 
称 控 制 器 预 设 体 (从 内 置 的 资源 包 ) ， 以 第 一 人 称 的 视角 来 预览 这 个 
地 形 ， 看 看 这 些 贴图 是 如 何平 铺 在 地 面 上 的 ， 如 图 7.13 所 示 。 


图 7.13 ”预览 地 面 上 平 铺 的 贴图 


如 果 需 要 对 现在 的 贴图 平 铺 选 项 进行 编辑 ， 可 以 在 对 象 检查 
(Inspector) 面板 上 选中 “Terrain” 组 件 中 贴图 选项 板 中 的 贴图 预览 图 ， 
然后 选择 “Edit Textures” 按 钮 ， 如 图 7.10 所 示 。 


在 现在 这 个 阶段 ， 地 形 对 象 由 一 个 长 满 青 草 的 贴图 作为 基础 贴 

图 ， 无 颖 地 平 铺 在 整个 表面 。 虽 然 看 起 来 很 棒 了 ， 但 是 如 果 地 形 中 包 
舍 更 多 的 贴图 ， 例 如 和 草 、 奉 石 ， 甚 至 沙漠 风格 的 地 表 ， 形 态 束 更 好 了 

( 见 图 7.14) 。 这 一 点 可 以 通过 向 地 形 选 择 对 话 框 中 添加 更 多 的 贴图 来 
实现 ， 只 需 单 击 “Edit Textures” 按 钮 ， 从 弹出 的 上 下 文 荣 单 中 选 
中 “AddTexture”。 然 后 将 一 个 新 的 不 同 贴图 拖 动 到 贴图 选择 对 话 框 中 的 
Albedo 槽 位 中 ， 重 复 这 个 过 程 ， 将 所 有 需要 的 贴图 都 添加 进来 。 当 关 
闭 这 个 对 话 框 时 ， 所 有 添加 进来 的 贴图 就 都 会 显示 在 对 象 检查 

(Inspector) 面板 上 的 贴图 选项 板 (“Textures Palette”) 处 。 


图 7.14 将 贴图 添加 到 贴图 工具 板 上 


分 配给 绘图 刷 的 贴图 会 在 对 象 检查 (Inspector) 面板 里 以 高 亮 的 蓝 
色 边 框 表 示 。 可 以 通过 单 击 缩 略 图 来 选择 不 同 的 贴图 ， 当 这 样 操 作 
时 ， 选 中 的 贴图 就 被 应 用 到 了 绘图 刷 上 ， 可 以 通过 单 击 它 来 应 用 到 地 
形 上 。 单 击 绘图 刷 并 在 地 形 上 拖 动 ， 束 可 以 在 上 面 顺 绘 贴图 。 还 可 以 
设置 “Brush Shape”“Brush Size”Opacity”Target Strength” 的 值 来 控制 应 
用 贴图 的 程度 ， 以 及 如 何 将 其 融合 到 地 形 表 面 ， 如 图 7.15 所 示 。 


图 7.15 “分 层 绘制 和 贴图 融合 


继续 完成 地 形 的 绘制 ， 直 到 创建 出 一 个 赏心悦目 的 外 观 和 感觉 。 
地 形 绘制 完成 以 后 ， 在 层次 面板 上 选中 场景 中 的 定向 光源 (Directional 
Light) ， 调 整 它 的 “Rotation” 属 性 使 它 如 同 场景 中 的 太阳 一 样 。 请 注 
意 ， 可 通过 将 光源 完成 一 个 360 度 的 旋转 来 模拟 一 个 完整 的 朋 夜 周期 
( 束 照 明和 外 观 而 言 ) 。 因 此 ， 可 以 通过 使 用 动画 窗口 来 轻松 为 游戏 
模拟 出 黑夜 和 日 重 的 交 蔡 ， 正 如 前 面 的 章 市 中 介绍 过 的 一 样 ， 如 图 7.16 
所 示 。 


图 7.16 ”完成 的 地 形 


最 后 使 用 第 一 人 称 控制 器 资源 来 对 地 形 进行 探索 。 按 下 工具 栏 上 
的 “Play” 图 标 ， 开 始 整个 关卡 的 环 游 。 现 在 已 经 拥有 了 一 个 包含 地 形 的 
游戏 世界 了 ， 如 图 7.17 所 示 。 


图 7.17 第 一 人 称 视角 进行 地 形 探索 


在 开始 新 的 内 容 之 前 ， 先 来 考虑 一 下 Unity 地 形 工具 的 拉 术 限制 ， 
以 及 这 可 能 对 游戏 产生 的 有 影响。 具体 而 言 ，Unity 地 形 是 一 种 基于 高 度 
的 地 图 ， 这 意味 着 地 形 的 高 度 (起 伏 ) 是 基于 图 像 文件 (高 度 图 ) 中 
的 灰 度 像素 来 产生 的 。 当 使 用 检查 (Inspector) 面板 上 的 笔 刷 绘制 地 形 
时 ， 实 际 上 是 在 高 度 图 上 绘制 用 来 映射 地 形 的 像素 点 。 这 是 一 个 聪明 


又 有 趣 的 方法 ， 但 是 这 种 方法 有 一 个 重要 的 限制 ， 高 度 图 实际 上 是 一 
个 二 维 地 形 贴图 ， 这 样 就 导致 了 Unity 地 形 并 不 是 真正 意义 上 的 三 维 ， 
它 并 不 包 舍 洞穴、 黎 颖 、 洲 洞 或 者 任何 鸭 有 裂口 ， 玩 家 不 能 进入 到 地 面 
之 下 。 高 度 图 由 上 下 两 个 部 分 组 成 ， 两 个 部 分 都 没有 内 部 空间 。 在 许 
多 情况 下 ， 这 都 并 不 会 引起 问题 。 但 是 有 时 可 能 会 需要 使 用 内 部 空 
则 ， 如 果 这 样 做 ， 束 会 需要 一 个 Unity 自 带 地 形 系统 的 替代 软件 ， 可 以 
是 手工 三 维 软 件 (例如 3DS Max、Maya 和 Blender 等 ) ， 也 可 以 是 资源 
商店 里 的 各 种 插件 。 


7.4 ”导航 与 导航 网 格 


整个 游戏 世界 的 地 形 已 经 完成 了 ， 现 在 必须 开始 考虑 整个 项 目的 
主要 目标 了 。 具 体 来 说 ， 这 个 关卡 应 该 是 一 个 人 工 六 能 实验 ， 要 创造 
可 以 自由 地 在 地 形 漫游 的 敌 方 NPC 人 物 ， 当 玩家 进入 他 们 的 视野 时 就 
会 退 逐 和 攻击 玩家 。 为 了 实现 这 个 目标 ， 必 须要 适当 地 配置 寻 路 操 
作 。 当 考虑 到 NPC 人 工 智能 和 NPC 在 关卡 中 的 运动 时 ， 就 必须 要 考虑 
到 关卡 中 地 形 的 崎 虑 ， 在 这 个 地 形 中 充满 了 了 丘陵、 山脉、 和 斜坡 以 及 坑 
洼 等 问题 。 如 采 一 个 NPC 角 色 想 要 在 这 个 地 形 中 顺利 漫游 ， 融 不 得 不 
考虑 到 很 多 复杂 的 问题 。 例 如 ，NPC 就 不 能 简单 地 沿 着 直线 从 A 点 直接 
到 达 B 点 ， 因 为 这 样 直接 过 去 ， 有 可 能 会 穿 过 一 些 实体 对 象 或 者 地 形 。 
NPC 和 角色 需要 像 一 个 有 智 茵 的 人 一 样 ， 会 绕 过 障碍 物 ， 可 以 上 坡 ， 也 
可 以 下 披 ， 这 一 点 对 于 创造 出 一 个 真实 的 角色 是 十 分 重要 的 。 为 NPC 
寻找 合适 路 径 的 计算 过 程 被 称 为 寻 路 操作 ， 让 玩家 角色 按照 这 些 找到 
的 路 径 移 动 的 过 程 被 称 为 导航 。Unity 中 内 置 了 寻 路 和 导航 功能 ， 所 以 
在 为 NPC 计 算 路 径 和 导航 时 束 变 得 简单 了 很 多 。 


为 此 ， 必 须 生 成 导航 网 格 。 导 航 网 格 是 场景 中 的 一 个 特殊 的 网 格 
资源 ， 它 是 一 条 不 进行 泻 染 的 几何 曲线 ， 这 条 曲线 沿 着 地 形 表面 。 使 
用 这 个 导航 网 格 来 实现 对 一 个 角色 移动 的 寻 路 和 导航 操作 ， 可 以 在 应 
用 程序 菜单 处 选中 “Window | Navigation” 来 产生 一 个 导航 网 格 ， 如 图 
7.18 所 示 。 


图 7.18 访问 导航 窗口 


导航 窗口 的 目的 是 生成 一 个 实际 上 贴近 地 面 (Floor) 层 的 低 通 真 
度 的 地 形 网 格 。 为 了 让 这 个 过 程 正确 工作 ， 场 景 中 的 所 有 不 可 以 移动 
的 “Floor” 网 格 都 必须 标注 为 导航 静态 (Navigation Static) ， 只 需要 在 
层次 面板 处 选中 地 形 ， 然 后 在 对 象 检 查 (Inspector) 面板 处 单 
击 “Static” 下 拉 列 表 框 ， 然 后 局 用 “Navigation Static” 选 项 ， 如 图 7.19 所 
示 。 


图 7.19 ”将 不 能 移动 的 “floor”* 对 象 设置 为 静态 


现在 来 访问 “Navigation” 窗 口 〈 通 消停 放 在 “Inspector" 面 板 的 劳 
边 ) ， 单 击 “Bake” 选 项 卡 访问 主要 的 “Navigation”* 设 置 。 在 这 个 选项 卡 
中 ， 可 以 控制 一 系列 影响 导航 网 格 生 成 的 设置 选项 ， 如 图 7.20 所 示 。 


图 7.20 Bake 选 项 卡 中 包含 了 生成 导航 网 格 的 主要 


水 
叫 


生成 一 个 初始 的 导航 网 格 作 为 开始 ， 以 此 来 查看 系统 默认 设置 下 
导航 网 格 的 样子 。 如 果 需 要 ， 可 以 使 用 新 的 设置 来 轻易 地 清除 和 再 次 
生成 导航 网 格 。 首 先 在 对 象 检 查 (Inspector) 面板 处 单 击 “Bake” 按 钮 ， 
当 单 击 完 成 后 ， 一 个 默认 的 导航 网 格 就 产生 了 ， 它 会 在 场景 视图 中 以 
监 闫 色 显 示 出 来 ， 如 图 7.21 所 示 。 


图 7.21 默认 的 导航 网 格 


不 过 默认 的 导航 网 格 是 有 问题 的 ， 它 表示 关卡 中 全 部 可 以 行走 的 
区 域 。 所 以 从 本 质 上 来 说 ， 它 是 NPC 们 被 限制 只 能 在 其 中 行走 ， 而 不 
能 超出 的 范围 。 从 上 面 的 图 像 可 以 看 出 ， 这 个 导航 网 格 在 许多 地 方 断 
裂 和 破碎 ， 有 些 区 域 与 其 他 区 域 隅 离 和 断 开 了 “。 这 一 点 通常 是 不 可 取 
的 ， 因 为 这 将 意味 着 所 有 的 NPC 都 只 能 行走 在 一 个 孤立 的 区 域 ， 不 能 
走 到 男 一 个 区 域 ， 因 为 两 个 区 域 之 间 没 有 连通 的 供 NPC 行 走 的 导航 网 
格 。 要 修正 这 个 问题 ， 必 须 对 两 个 设置 进行 调整 。 第 一 个 束 古 “Agent 
Radius” 设 置 ， 它 表示 代理 (NPC) 的 平均 大 小 ， 会 直接 影响 到 导航 网 
格 在 地 面 网 格 上 展开 时 的 宽度 。 将 “Agent Radius” 的 值 减 小 ， 然 后 再 一 
次 单 击 “Bake” 按 钮 来 查看 结 采 ， 如 图 7.22 所 示 。 


图 7.22 ”使 用 代理 半径 (Agent Radius) 来 重新 定义 网 相 


通过 这 个 操作 明显 改 畴 了 网 格 ， 但 是 现在 地 图 仍然 有 一 些 断 忽 和 
破 肆 的 区 域 。 这 是 由 “Max Slope” 设 置 造 成 的 ， 它 用 来 控制 当 表面 的 陡 
峭 程 度 (例如 山 的 斜坡 ) 为 多 大 时 ， 对 于 一 个 NPC 来 说 是 不 可 以 行走 


的 ， 增 大 这 个 值 束 可 以 将 导航 网 格 要 得 更 大 ， 然 后 单 击 “Bake” 按 钮 ， 
如 图 7.23 所 示 。 


图 7.23 将 NPC 所 能 翻越 的 最 大 坡度 增加 ， 以 扩大 导航 网 格 


现在 已 经 在 关卡 中 创建 好 了 一 个 导航 网 格 。 这 个 导航 网 格 资源 将 
被 保存 在 一 个 与 场景 名 称 相 匹 配 的 文件 夹 中 。 当 在 项 目 面板 中 选中 这 
个 资源 时 ， 束 可 以 对 导航 网 格 中 的 各 种 只 读 属性 ， 例 
如 “Height”“Wwalkable Radius” 等 进行 预 顺 ， 如 图 7.24 所 示 。 


图 7.24 从 项 目 面板 中 对 各 种 导航 网 格 属性 进行 预览 


7.5 ”构建 一 个 NPC 


现在 开始 构建 一 个 能 展示 人 工 智能 的 NPC 角 色 。 首 先 要 使 用 Unity 
本 号 目 沉 资源 中 的 “Ethan” 网 格 。 这 个 食 源 可 以 在 项 目 面板 上 
的 “Standard Assets | Characters |ThirdPerson Character | Models” 文 件 夹 中 
找到 ， 将 “Ethan" 网 格 模型 拖 动 到 场景 中 ， 然 后 将 其 放置 在 地 面 上 。 对 
这 个 模型 进行 细 化 和 编辑 ， 最 终 使 用 它 创 建 一 个 预 设 体 来 表示 一 个 
NPC 和 角色， 如 图 7.25 所 示 。 


图 7.25 开始 创建 一 个 NPC 角 色 


当 问 关卡 中 添加 了 一 个 Ethan 模 型 之 后 ， 要 确保 角色 的 蓝 色 前 癌 向 
量 的 确 指 向 前 方 ， 面 向 着 角色 实际 上 正在 看 着 的 方向 。 如 采 这 个 前 向 
向 量 没有 前 对 齐 ， 可 以 创建 一 个 空 对 象 ， 然 后 将 它 作 为 一 个 模型 的 子 
对 象 与 角色 模型 对 齐 ， 这 样 作 为 父 对 象 的 角色 模型 的 前 向 向 量 就 会 沿 
着 角色 模型 的 视线 向 前 。 也 就 是 说 ， 蓝 色 的 前 向 向 量 应 该 与 角色 模型 
眼睛 注视 的 方向 对 齐 (与 视线 对 齐 ) ， 如 果 希 望 这 个 角色 走路 时 有 真 
实感 ， 那 么 这 一 点 十 分 重要 ， 如 图 7.26 所 示 。 


图 7.26 ”位 于 角色 脚 部 的 指向 前 方 的 前 向 向 量 〈 蓝 色 箭 头 ) 


NPC 角 色 应 该 可 以 利用 导航 网 格 来 智能 地 在 关卡 中 行走 。 为 此 ， 
应 该 为 角色 附加 一 个 导航 网 格 代理 组 件 。 在 关卡 中 选中 “Ethan”， 然 后 
在 应 用 程序 荣 单 选择 “Component | Navigation NavMesh Agent”。 导 航 网 
格 代理 (NavMeshAgent) 组 件 中 包括 了 寻 路 和 引路 〈 导 航 ) 功能 ， 可 
以 帮助 一 个 游戏 对 象 在 导航 网 格 中 移动 ， 如 图 7.27 所 示 。 


图 7.27 ”将 一 个 导航 网 格 代理 组 件 附 加 到 NPC 上 


默认 情况 下 ， 导 航 网 络 会 为 每 个 代理 ， 也 就 是 导航 和 行走 的 对 
象 ， 分 配 一 个 圆柱 页 撞 体 。 这 不 是 一 个 具有 物理 行为 的 真 碰 撞 体 ， 而 
是 一 个 用 来 检测 代理 是 否 走 近 导航 网 格 边 缘 的 伪 人 碰撞 体 。 选 中 使 用 
Ethan 创 建 的 NPC， 在 对 象 检查 (Inspector) 面板 里 的 “Nav Mesh 
Agent” 组 件 处 将 “Height* 设 置 为 1.66， 并 将 “Radius” 设 置 为 0.22， 这 样 可 
以 使 碰撞 体 与 网 格 对 象 的 体型 更 加 接近 ， 如 图 7.28 所 示 。 


图 7.28 重新 设置 代理 碰 接 器 


移动 网 格 对 象 进行 测试 ， 查 看 是 否 一 切 都 能 正常 工作 。 对 此 ， 需 

要 创建 一 个 新 的 脚本 。 首 先 ， 创 建 一 个 新 的 空 对 象 ， 它 将 作为 一 个 目 
的 地 ， 也 就 是 一 个 NPC 应 该 到 达 的 目标 位 置 ， 具 体操 作 是 在 应 用 程序 
菜单 中 依次 选中 “Game Object | Create Empty”， 将 这 个 对 象 命名 
为 “Destination”。 然后 为 它 分 配 一 个 小 图 标 ， 这 古 为 了 使 它 在 视图 中 可 
见 ， 如 图 7.29 所 示 。 当 这 个 对 象 处 于 选中 状态 时 ， 在 对 象 检 查 

(Inspector) 面板 单 击 左 上 方 的 方块 图 标 ， 然 后 在 显示 出 来 的 图 标 中 选 
二 全 H's 


图 7.29 创建 一 个 目标 对 象 


接 下 来 ， 创 建 一 个 新 的 C# 脚 本 文件 (FollowDestination.cs) ， 然 后 
将 这 个 脚本 添加 到 场景 中 的 NPC 对 象 。 所 有 的 代码 都 包含 在 代码 示例 
7.1 中 。 


代码 示例 7.1: 
using UnityEngine; 
using System.Collections; 
public class FollowDestination : MonoBehaviour 


private NavMeshAgent ThisAgent = null; 
public Transform Destination = null; 


// 初始 化 画 数 
void Awake () 


ThisAgent = GetComponent<NavMeshAgent>( ); 


} 
// Update 函 数 会 在 每 一 帧 调用 一 次 
void Update () 


ThisAgent.SetDestination(Destination.position); 


下 面 对 代 码 7.1 示 例 进 行 总 结 。 


。 FollowDestination 类 可 以 附加 到 任何 具有 导航 网 格 代 理 组 件 的 对 象 
上 。 这 个 对 象 在 移动 时 应 该 跟随 目标 对 象 。 
。 Destination 变 量 中 保存 了 要 跟随 的 目标 对 象 。 


当 将 脚本 附加 到 NPC 对 象 上 之 后 ， 束 将 目标 空 对 象 拖 暇 到 对 象 检 
查 (Inspector) 面板 里 的 *FollowDestination” 组 件 处 的 “Destination” 模 位 
处 ， 这 样 就 会 为 脚本 设 定 一 个 目的 地 ， 如 图 7.30 所 示 。 


图 7.30 配置 一 个 跟随 目标 的 对 象 


现在 对 游戏 进行 一 个 测试 。 在 游戏 期 间 ， 在 场景 选项 卡 中 移动 目 
标 物 体 并 查看 NPC 的 反应 ， 会 发 现 NPC 不 断 地 追逐 着 目标 对 象 。 此 
外 ， 如 果 在 对 象 检查 (Inspector) 面板 中 打开 的 导航 窗口 中 游戏 ， 并 且 
在 层次 面板 中 选中 了 NPC， 场 景 视图 中 就 会 显示 一 些 诊断 信息 选项 ， 
通过 这 些 选 项 就 可 以 实现 NPC 计 算 路 线 的 可 视 化 ， 如 图 7.31 所 示 。 


图 7.31 对 NPC 导 航 进行 测试 


7.6 创建 巡逻 的 NPC 


现在 已 经 有 了 一 个 可 以 跟随 目标 对 象 移 动 的 NPC 了 ， 这 是 一 个 很 
有 意义 的 练习 ， 但 是 我 们 仍 需要 比 这 更 复杂 的 功能 。 上 有 具体 来 说 ， 需 要 
NPC 能 巡逻 ， 也 吏 是 说 ， 要 通过 一 个 路 径 点 的 系统 来 到 达 多 个 目的 
地 ， 按 照 顺序 从 一 个 目的 地 到 另 一 个 目的 地 。 有 很 多 种 方法 来 实现 这 
个 目标 ， 一 种 方法 就 是 通过 脚本 实现 ， 利 用 这 种 方法 创建 一 系列 的 路 
径 点 对 象 ， 然 后 循环 裔 历 这 些 对 象 ， 就 是 当 NPC 到 达 一 个 对 象 之 后 ， 
再 移动 到 下 一 个 对 象 。 这 个 方法 是 相当 有 效 的 ， 不 过 这 里 还 有 为 一 种 
选择 。 具 体 而 言 ， 就 是 不 使 用 脚本 ， 创 建 一 个 动画 来 将 一 个 单独 的 目 
标 对 和 象 随 着 时 间 移 动 到 不 同 的 路 径 点 ， 因 为 NPC 会 一 直 跟 随 着 这 个 不 
断 移动 的 目标 ， 所 以 也 就 实现 了 在 关卡 中 不 断 的 巡逻 。 


现在 采取 第 二 种 方法 ， 首 先 在 应 用 程序 菜单 处 依次 单 击 “Window 
Animation” 打 开动 画 窗口 ， 如 图 7.32 所 示 。 如 果 愿 意 ， 出 于 便于 浏览 的 


目的 ， 可 以 将 动画 窗口 以 横向 视图 的 方式 显示 在 项 目 面板 上 。 


图 7.32 访问 动画 窗口 


接 下 来 ， 从 层次 面板 上 选中 要 做 成 动画 的 对 象 (目标 对 象 ，， 然 
后 在 动画 窗口 中 ， 单 击 “Create” 按 钮 。 在 这 里 ， 系 统 将 会 询问 是 否 保 存 
这 个 动画 ， 以 及 要 为 这 个 动画 起 个 名 字 ， 这 里 为 这 个 动画 命名 
为 “anim_DestPatrol”， 如 图 7.33 所 示 “。 


> 


图 7.33 ”创建 一 个 新 的 动画 


当 动 画 创建 完成 以 后 ， 就 可 以 继续 定义 动画 频道 了 。 对 于 目标 对 
象 ， 需 要 为 对 象 的 位 置 字段 添加 一 个 频道 ， 因 为 对 象 的 位 置 在 场景 中 
是 变化 的 。 在 动画 窗口 中 单 击 “Add Property” 按 钮 ， 然 后 依次 单 
击 “Transform | Position” 来 添加 一 个 新 的 位 置 频道 ， 这 样 就 会 自动 在 时 
间 线 上 创建 起 始 的 关键 帧 ， 同 时 也 对 应 着 对 象 的 位 置 ， 如 图 7.34 所 示 。 


> 


图 7.34 ”创建 一 个 新 的 动画 


单 击 动画 窗口 时 间 线 上 那 条 红色 的 耸 线 ， 并 拖 暇 它 到 0 和 1 之 间 ， 
然后 将 场景 选项 卡 中 的 目标 对 象 移动 到 一 个 新 的 位 置 。 当 完成 这 个 操 
作 之 后 ，Unity 束 会 目 动 记 下 目标 对 象 在 这 个 关键 帧 时 的 位 置 。 在 时 间 
线 上 不 断 重 复 这 个 过 程 ， 并 在 每 次 都 移动 目标 对 象 到 不 同 的 位 置 ， 这 
样 束 会 创建 一 个 完整 的 这 逻 动 画 出 来 ， 如 图 7.35 所 示 。 


图 7.35 ”创建 一 个 巡逻 动画 


在 动画 窗口 或 者 工具 栏 上 按 下 “Play” 按 钮 播放 动画 。 默 认 情 况 下 ， 
动画 的 播放 速度 太 快 (正如 我 们 即将 看 到 的 ， 这 个 问题 很 容易 解 
决 ) ， 但 是 也 要 注意 到 ， 目 标 对 象 正如 我 们 预期 的 一 样 ， 逐 渐 改 变 它 
的 位 置 。 也 束 是 Unity 动 画 引 擎 会 目 动 在 时 间 轴 上 关键 帧 之 间 插 入 动 
画 ， 使 得 目标 对 象 在 路 径 点 之 间 平 滑 的 移动 。 不 过 ， 现 在 只 希望 看 到 
目标 如 何在 路 径 点 之 间 传 送 ， 不 需要 其 中 的 任何 过 渡 ， 这 就 需要 修改 
动画 曲线 (Animation Curve) 中 的 差 值 模式 (Interpolation Mode) 。 单 
击 动画 窗口 左下 方 的 “Curves” 按 钮 。 默 认 情 况 下 ， 动 画 窗口 是 处 
于 “DopeSheet” 模 式 ， 这 种 模式 下 可 以 轻易 地 看 到 关键 帧 并 改变 它们 。 
而 “Curve” 模 式 可 以 修改 关键 帧 之 间 的 插值 ， 如 图 7.36 所 示 。 


ASS 


发 


图 7.36 访问 动画 


现在 ， 框 选择 ( 单 击 并 拖 动 选择 框 ) 图 表 视 图 中 所 有 的 关键 帧 ， 
然后 单 击 鼠标 右键 ， 会 显示 出 关键 帧 的 上 下 文 菜单 ， 在 沫 单 中 选 
中 “Right Tangent | Constant”， 这 时 所 有 关键 帧 的 句柄 都 变 成 了 委 形 ， 这 
表示 所 有 关键 帧 的 值 都 会 一 直 保 持 不 变 直 到 下 一 巾 为 止 ， 如 图 7.37 所 
示 。 


图 7.37 ”修改 关键 帧 的 句柄 


当 在 采 单 上 克 中 “Constant” 选 项 之 后 ， 关 键 帧 之 间 的 曲线 看 起 来 整 
会 完全 不 同 ， 现 在 是 直线 来 连接 两 个 点 ， 如 图 7.38 所 示 。 


图 7.38 ”常数 差 值 


按 下 工具 条 上 的 “Play” 按 钮 ， 之 后 目标 束 会 按照 动画 的 进展 在 路 径 
点 上 跳跃 前 进 ，NPC 会 不 断 地 向 着 目标 移动 和 前 行 。 由 于 动画 的 默认 
速度 ，NPC 可 能 会 对 迅速 改变 位 置 的 目标 感到 困惑 ， 显 得 无 所 适 从 。 
为 了 解决 这 个 问题 ， 在 层次 面板 上 选中 目标 对 象 ， 双 击 动画 组 件 的 控 
制 器 区 域 ， 打 开 附 加 在 对 象 上 的 动画 图 ， 它 控制 在 何 时 执行 指定 的 动 
画 ， 如 图 7.39 所 示 。 


图 7.39 ”访问 动画 资源 


你 也 可 以 在 应 用 程序 羔 单 手动 的 选择 “Window |Animator”， 在 动画 
窗口 中 ， 默 认 忆 点 以 桶 黄色 高 亮 显 示 。 这 个 节点 将 会 在 关卡 中 的 对 象 
第 一 次 局 动 时 播放 ， 如 图 7.40 所 示 。 


图 7.40 “DestPatrol" 动 画 是 动画 窗口 中 的 默认 动画 


选中 图 中 的 “DestPatroJ* 节 点 ， 然 后 在 对 象 检查 (Inspector) 面板 中 
减 小 “Speed” 的 值 。 在 本 案例 中 ， 使 用 了 0.2 作 为 “Speed” 的 值 ， 这 样 游 
戏 工 作 起 来 很 顺利 。 当 对 这 个 值 进行 修改 时 ， 一 定 要 记得 再 对 游戏 进 
行 测试 来 得 看 它 的 效果 ， 如 图 7.41 所 示 。 


图 7.41 减 小 动画 的 速度 


当 按 下 “Play” 按 钮 时 ，NPC 束 会 在 多 个 目的 地 之 间 以 一 个 看 起 来 比 
较真 实 的 速度 从 一 个 路 径 点 移动 到 男 一 个 路 径 点 。 如 采 NPC 在 路 径 点 
之 间 移 动 得 太 快 或 者 太 慢 ， 束 可 以 通过 增加 或 者 减少 速度 来 获得 所 需 
要 的 结 采 。 现 在 已 经 拥有 了 一 个 完整 的 动画 路 径 点 系统 ， 如 图 7.42 所 
本 


图 7.42 ”运作 中 的 路 径 点 系统 


7.7 小结 


干 得 不 错 ， 我 们 现在 已 经 完成 了 第 一 个 人 工 智 能 的 第 一 部 分 : 建 
立 了 一 个 地 形 ， 产 生 了 一 个 导航 网 格 ， 并 创建 了 一 个 基本 的 路 径 点 系 
统 ， 角 色 可 以 在 目的 地 之 间 移 动 。 这 坪 模 拟人 工 稚 能 的 一 个 很 好 的 开 
始 ， 但 是 如 果 想 要 达到 预期 的 效果 ， 还 需要 做 更 多 添加 代码 方面 的 工 
作 。 这 些 内 容 将 集中 在 下 一 半 也 束 是 最 后 一 章 中 进行 。 


第 8 章 ”有 吞 车 的 敌人 (I)) 


本 章 是 最 后 一 章 ， 将 会 继续 上 一 章 的 内 容 ， 专 注 于 创造 一 个 有 智 
慧 政 人 的 相关 理论 和 编码 技术 。 这 些 政 人 将 会 表现 出 3 种 主要 行为 :这 
逻 、 退 击 和 进攻 。 本 章 将 深入 讨论 以 下 主题 : 


。 如 何 对 敌人 的 人 工 稚 能 系统 进行 设计 和 编码 
。 如 何 编码 有 限 状 态 机 
。 如 何 创建 视野 范围 功能 


本 章 所 需要 的 项 目 文件 和 资源 可 以 在 本 书 的 配套 文件 的 Chapter08/Start \ 
本 章 。 


8.1 敌人 的 人 工 智能 一 一 视野 范围 


现在 根据 游戏 的 功能 要 求 来 开发 政 人 的 人 工 知 能。 场景 中 的 政 人 
将 会 以 一 个 巡逻 模式 开始 ， 从 一 个 地 方 徘徊 到 另 一 个 地 方 不 断 地 搜索 
玩家 角色 。 如 琳 栈 人 发 现 了 玩家 和 角色， 束 会 改变 巡逻 并 开始 追逐 ， 试 
图 接近 玩家 并 发 起 攻击 。 如 时 玩 家 进入 了 敢 人 的 攻击 范围 内 ， 敢 人 将 
会 从 追逐 变 为 攻击 。 如 果 玩 家 成 功 地 摆脱 了 敌人 人， 那么 政 人 就 会 停止 


追逐 并 再 次 开始 巡逻 ， 就 像 它们 一 开始 那样 。 以 上 描述 了 我 们 所 需 
的 敌人 的 人 工 智能 行为 。 


为 了 实现 这 些 功能 ， 需 要 对 敌人 的 视野 范围 功能 进行 编码 ， 敌 人 
需要 能 够 看 到 玩家 角色 ， 或 者 时 刻 检测 玩家 有 是否 在 敌人 的 视线 中 ， 这 
将 帮助 敌人 决定 它们 应 该 继续 巡逻 ， 还 是 开始 奶 逐 玩家 角色 。 实 现 这 
个 功能 最 好 使 用 源 文 件 的 LineSight.cs 脚 本 。 下 面 的 代码 示例 8.1 中 的 脚 
本 文件 应 该 添加 到 上 一 章 中 创建 的 敌人 角色 身上 。 


代码 示例 8.1: 


using UnityEngine ， 
using System,.Collections 


public class LineSight : MonoBehaviour 


{ 


// 我 们 视野 的 敏感 度 
public enum SightSensitivity {STRICT, LOOSE}; 


// 瞄 准 具 灵敏度 
public SightSensitivity Sensitity = SightSensitivity.STRICT; 


// 我 们 能 看 到 目标 吗 ? 
public bool CanSeeTarget = false; 


// 视 野 
public float FieldofView = 45f; 


// 对 目标 的 引用 


private Transform Target 


// 对 眼睛 的 引用 


public Transform EyePoint = null; 


null; 


// 对 “transform” 组 件 的 引用 
private Transform ThisTransform = null; 


// 对 球状 碰撞 体 的 引用 
private Spherecollider ThisCollider = null; 


// 对 最 后 对 象 视野 的 引用 


public Vector3 LastKnowSighting = Vector3.zero; 


void Awake() 

{ 
ThisTransform = GetComponent<Transform>(); 
ThisCollider = GetComponent<SphereCollider>(); 
LastKnowSighting = ThisTransform.position; 


Target = GameObject.FindGameObjectwithTag("Player"). 
GetComponent<Transform>(); 


bool InFOV( ) 


// 获 取 到 目标 的 方向 


Vector3 DirToTarget = Target.position - EyePoint .position， 


// 获 取 正 前 方 和 目标 之 间 的 角度 
float Angle = Vector3.Angle(EyePoint.forward, DirToTarget); 


// 我 们 在 视野 中 吗 ? 
if(Angle <= FieldofView) 
return true; 


// 不 在 视野 中 
return false， 


bool ClearLineofSight() 


RaycastHit Info; 


if(Physics.Raycast(EyePoint.position, (Target.position - 
EyePoint. 
position).normalized, out Info, ThisCollider.radius)) 


// 如 果 看 到 Player 了 
if(Info.transform.CompareTag("Player")) 
return true; 


} 


return false， 


void UpdateSight() 


switch(Sensitity) 
{ 
case SightSensitivity.STRICT: 


CanSeeTarget = InFOV() && ClearLineofSight(); 
break; 


case SightSensitivity.LOOSE: 
CanSeeTarget = InFOV() || ClearLineofSight() ， 
break 


void OnTriggerStay(Collider Other ) 
UpdateSight() ; 
// 更 新 最 后 的 视野 


if(CanSeeTarget) 
LastknowSighting = Target.position,; 


void OnTriggerExit(Collider Other) 


if(!0Other.CompareTag("Player"))return; 


CanSeeTarget = false; 


下 面 对 代 码 进行 儿 点 总 结 。 


。 LineSight 类 应 该 附加 到 所 有 的 敌人 角色 对 象 上 ， 目 的 是 为 了 计算 
在 玩家 和 敌人 之 间 是 否 存 在 一 个 可 用 的 直 视 视线 。 

。 变量 CanSeeTarget 是 一 个 Boolean 类 型 (true/false) ， 这 个 值 会 在 每 
一 帧 更 新 一 次 ， 描 述 敌 人 现在 是 否 可 以 看 到 玩家 (当前 
帧 ) 。*true” 表 示 玩 家 在 敌人 的 视野 中 , “false” 表 示 玩 家 不 在 敌人 
的 视野 中 。 

。 变量 Field of View 是 一 个 浮 点 数值 ， 它 表示 敌人 眼睛 所 能 看 到 的 两 
侧 之 间 的 角度 ， 在 这 个 范围 内 的 对 象 (如 玩家 ) 是 可 以 看 到 的 。 
这 个 值 设 定 得 越 大 ， 敌 人 发 现 玩 家 的 概率 就 越 大 。 


。 InNFOV 函 数 将 会 返回 true 或 者 false， 这 个 值 表示 玩家 是 否 处 于 敌人 
的 视 丢 范围 内 。 但 是 这 个 值 忽略 了 玩家 是 否 被 播 或 者 其 他 实体 
(如 支柱 ) 挡住 的 情况 ， 它 只 是 简单 地 考虑 了 敌人 眼睛 的 位 置 ， 
确定 一 个 到 玩家 的 向 量 ， 并 测量 前 向 向 量 和 玩家 之 间 的 角度 。 然 
后 将 这 个 值 与 变量 FieldofView 进 行 比较 ， 如 有 末 玩 家 与 敌人 之 间 的 
角度 小 于 变量 Field of View， 就 返回 true。 简 而 言 之 ， 如 果 有 一 个 
明确 的 视线 ， 这 个 函数 可 以 告诉 你 敌人 是 否 可 以 看 到 玩家 。 

函数 ClearLineOfSight 返 回 值 也 是 true 或 者 false， 这 个 值 表示 在 敌人 
的 眼睛 和 玩家 之 间 是 否 存在 任何 物理 的 障碍 (碰撞 体 ) ， 例 如 墙 
或 者 道具 。 这 个 函数 并 不 考虑 玩家 是 否 在 敌人 的 视野 范围 内 。 将 
这 个 函数 与 mnFOV 瑟 数 结合 使 用 ， 融 可 以 判断 玩家 是 否 处 在 敌人 的 
无 谴 挡 的 视野 范围 内 ， 因 此 可 以 认为 玩家 是 可 见 的 。 

函数 OnTriggerStay 和 OnTriggerExit 文 两 个 函数 分 别 表示 玩家 进入 
到 了 敌人 的 触发 区 域 和 玩家 离开 了 敌人 的 触发 区 域 。 正 如 我 们 所 
看 到 的 ， 一 个 球状 的 碰撞 右 可 以 附加 到 敌人 角色 号 上 代表 它 的 视 
野 。 这 意味 着 在 一 定 距离 或 者 半径 内 ， 敌 人 可 以 看 见 里 面 的 玩 
家 ， 只 要 视野 清晰 且 没 有 泪 挡 即 可 。 


现在 将 LineSight.cs 脚 本 附加 到 场景 中 的 敌人 角色 上 ， 将 球形 伴 撞 
体 组 件 (标记 为 触发 器 ) 设置 成 近似 于 敌人 的 视野 范围 大 小 ， 如 图 8.1 
所 示 ， 保 留 “Field of View” 的 值 为 45， 这 个 值 可 以 增加 ， 如 果 需 要 ， 设 
置 到 90 左 右 ， 以 此 来 调整 敌人 的 视野 范围 。 
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图 8.1 向 NPC 添 加 一 个 视野 范围 


“Eye Point” 的 值 默认 设置 为 "None”， 表 示 一 个 空 值 。 这 应 该 指向 一 
个 充当 笋 人 角色 视点 的 特定 位 置 ， 这 个 位 置 就 是 敌人 角色 眼睛 的 位 
置 。 可 以 利用 应 用 程序 沫 单 来 创建 一 个 新 的 空 游戏 对 象 ， 方 法 是 依次 
单 击 “GameObject | CreateEmpty”， 将 这 个 对 象 命 名 为 “Eye Point”*。 在 对 
象 检查 (Inspector) 面板 中 使 用 “Gizmo” 图 标 来 激活 它 的 可 见 性 ， 然 后 
把 它 添加 到 敌人 对 象 上 作为 一 个 子 对 象 。 接 着 将 这 个 对 象 定位 到 角色 
的 视点 位 置 上 ， 确 认 前 向 向 量 朝 向 同一 方向 ， 如 图 8.2 所 示 。 
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图 8.2 ”添加 一 个 视点 


现在 从 “Hierarchy” 面 板 上 将 “Eye Point 对 和 象 都 拖 电 到 对 象 检 查 
(Inspector) 面板 中 的 “LineSight* 组 件 处 的 Eye Point* 后 面 的 槽 位 里 。 
这 样 操作 之 后 ，“Eye Point* 对 象 就 成 为 了 敌人 的 视点 。 利 用 这 个 视点 可 
以 判断 和 政 人 是 否 能 看 到 玩家 。 使 用 这 样 一 个 单独 的 视点 而 不 是 使 用 敌 
人 角色 的 位 置 是 十 分 有 效 的 ， 因 为 敌人 角色 的 位 置 实际 上 是 敌人 脚 的 

位 置 ， 而 不 是 眼睛 的 位 置 ， 如 图 8.3 所 示 。 


“WY sphere collider 次 ， 
Edit Collider 


= Is Trigger 
el el None (Physic M © 
Center 
X 0 Yo0.96 2z0 k 
Radius [931 ?5 


了 |g Line Sight (Script) 浆 ， 
Script LineSight [ey] 
Sensitity 


Can See Target [| 


图 8.3 为 NPC 定 义 一 个 视点 


最 后 ， 脚 本 LineSight 会 通过 Player 标 签 来 在 场景 中 寻找 Player 对 
象 ， 从 而 对 Player 定 位 。 因 此 ， 必 须要 确保 玩家 对 象 上 使 用 了 Player 标 
签 ， 如 图 8.4 所 示 。 
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图 8.4 为 玩家 对 象 打上 Player 标 签 
现在 来 测试 一 下 游戏 ， 当 接近 NPC 对 象 时 , “Can See Target” 区 域 


就 会 被 启用 ， 如 图 8.5 所 示 。 干 得 不 错 ， 视 线 功 能 已 经 完成 了 ， 让 我 们 
继续 前 进 ! 
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图 8.5 ”对 视线 功能 进行 测试 


8.2 有限 状态 机 概述 


如 果 为 NPC 对 象 创建 一 个 AI (人 工 智 能 ) ，， 刚 刚 创建 的 视线 功能 
还 不 够 ， 还 需要 使 用 有 限 状 态 机 (Finite State Machines，FSMs) 。 有 


限 状 态 机 并 不 是 Unity 中 的 内 容 ， 也 不 是 C# 语 言 的 组 成 部 分 。 有限 状态 
机 是 一 个 概念 、 框 架 或 者 说 是 想法 ， 将 有 限 状 态 机 应 用 在 编码 中 可 以 
实现 特定 的 人 工 稼 能 行为 。 它 来 日 于 智能 角色 的 一 种 具体 思维 方式 。 
我 们 总 结 了 一 下 NPC 在 任意 时 刻 可 能 处 于 的 全 部 3 种 状态 ， 分 别 是 巡 光 
模式 〈 当 敌人 没有 目标 而 徘徊 时 ) 、 人 退 逐 模式 ( 当 敌 人 在 追赶 玩家 
时 ) 以 及 攻击 模式 〈 当 敌人 已 经 接近 玩家 并 开始 攻击 时 ) 。 这 些 模式 
征 一 种 具有 独特 行为 而 且 唯 一 的 状态 ， 敌 人 在 任何 时 间 都 必须 且 只 能 
处 于 这 3 种 状态 之 一 。 例 如 ， 敌 人 不 能 同时 巡逻 和 追逐 ， 也 不 能 同时 巡 
逻 和 攻击 ， 因 为 这 不 符合 游戏 中 设计 的 逻辑 。 


除了 这 些 状态 之 外 ， 还 有 一 个 状态 连接 的 规则 集 ， 其 决定 了 一 个 
状态 在 何 时 转换 成 男 一 个 状态 。 例 如 ，NPC 可 以 看 到 玩家 但 是 并 不 具 
备 攻 击 条 件 的 时 候 ， 它 只 能 从 巡逻 状态 切换 到 追逐 状态 。 同 样 ， 如 采 
敌人 在 攻击 状态 时 失去 玩家 的 路 影 ， 它 们 应 该 从 进攻 切换 到 这 逻 状 
仿 。 因 此 ， 这 些 状 态 和 它们 的 连接 规则 的 组 合 形成 了 一 个 有 限 状 态 
机 ， 任 何 实现 了 这 个 功能 的 代码 其 实 束 是 一 个 有 限 状 态 机 。 编 码 实 现 
有 限 状态 机 的 方法 本 喘 并 没有 什么 正确 或 者 错误 之 分 ， 这 里 有 很 多 们 
单方 法 ， 对 于 特定 的 目的 来 说 ， 其 中 有 一 些 是 合适 的 ， 为 一 些 是 不 合 
适 的 。 这 一 节 将 使 用 Coroutines 来 实现 有 限 状 态 机 的 编码 。 从 创建 一 个 
主要 结构 开始 ， 代 码 示例 8.2 给 出 的 AL_Enemy.cs 脚 本 中 的 代码 就 是 这 样 
的 一 个 主要 结构 : 


代码 示例 8.2: 


using UnityEngine; 
using System.Collections; 


public class AI_Enemy : MonoBehaviour 
{ 


//--- 
public ENEMY_STATE CurrentState 


get{return currentstate;} 
set 


{ 
// 更 新 当前 状态 


currentstate = value; 


// 停 止 当前 运行 的 所 有 coroutines 
StopAllCoroutines(); 


switch(currentstate) 
{ 
case ENEMY_STATE.PATROL: 
StartCoroutine(AIPatrol()); 
break; 


case ENEMY_STATE ,CHASE : 
StartCoroutine(AIChase( )); 
break; 


case ENEMY_STATE.ATTACK: 
StartCoroutine(AIAttack( )); 
break; 


[SerializeField] 
private ENEMY_STATE currentstate = ENEMY_STATE.PATROL; 


// 对 视线 组 件 的 引用 
private LineSight ThisLineSight = nullil; 


// 对 导航 网 格 代 理 的 引用 
private NavMeshAgent ThisAgent = null; 


// 对 玩家 transform 的 引用 
private Transform PlayerTransform = null; 


void Awake() 


ThisLineSight = GetComponent<LineSight>(); 

ThisAgent = GetComponent<NavMeshAgent>(); 

PlayerTransform = GameObject.FindGameObjectwithTag("Player"). 
GetComponent<Transform>(); 


void Start() 
{ 


// 配 置 起 始 状 态 
CurrentState = ENEMY_STATE.PATROL; 


public IEnumerator AIPatrol() 


yield break ; 


public IEnumerator AIChase() 


yield break ; 


public IEnumerator AIAttack() 


yield break; 


关于 Coroutines 的 更 多 信息 可 以 在 Unity 的 在 线 文档 
http://docs.unity3d.com/Manual/Coroutines.html 处 查看 。 


下 面 对 代 码 示例 中 的 内 容 进行 几 点 忌 结 。 


。 AIl_Enemy 类 创建 到 现在 并 没有 完全 地 实现 一 个 完整 的 有 限 状 态 
机 ， 而 只 是 实现 了 一 个 开始 的 框架 。 它 说 明了 整体 的 结构 ， 其 中 
每 一 个 状态 对 应 一 个 单独 的 coroutine 。 


。 CurrentState 变 量 定 义 了 当前 选中 的 激活 状态 ， 终 止 所 有 当前 的 
coroutine 并 局 动 相 关 的 coroutine 。 

。 每 个 状态 coroutine 将 会 运行 在 一 个 框架 安全 (Frame-safe) 的 无 限 
循环 中 ， 只 要 有 限 状 态 机 是 活动 的 ， 这 个 循环 就 不 停止 。 这 将 人 允 
许 和 畴 人 对 象 更 新 它 的 行为 ， 下 面 很 快 会 看 到 。 


在 下 一 步 开 始 之 前 ， 要 确保 将 AL Enemy 脚本 附加 到 了 NPC 对 象 
上 ， 如 图 8.6 所 示 。 
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图 8.6 将 AIL_Enemy 脚 本 附加 到 NPC 角 色 上 


8.3 ”巡逻 状态 


NPC 人 工 智 能 3 个 状态 中 的 第 一 个 状态 是 巡逻 状态 。 在 前 面 的 章 市 
中 ， 已 经 配置 了 动画 的 巡逻 对 象 ，NPC 处 在 了 巡 远 状态 时 ， 会 一 直 跟 随 
着 这 些 巡 逻 对 象 移动 。 巡 逻 对 象 会 根据 预 匈 定义 好 的 动画 资源 从 一 个 
位 置 移动 到 另 一 个 位 置 ， 不 断 地 在 场景 中 巡逻 。 不 过 ， 在 此 之 前 ， 
NPC 只 是 简单 地 跟随 这 个 对 象 没 有 尽头 ， 而 巡逻 状态 需要 NPC 都 能 
见 玩家 是 否 在 它 的 路 线 上 。 如 果 看 见 ， 状 态 束 需要 改变 。 为 了 文 持 这 
个 功能 ， 需 要 对 巡逻 状态 和 AL Enemy 的 Start 函 数 进行 编码 ， 下 面 的 代 
码 示例 8.3 出 了 具体 的 代码 内 容 。 


代码 示例 8.3: 


void Start() 


// 获 得 一 个 随机 的 目的 地 

GameObject[] Destinations = GameObject. 
FindGameObjectswithTag("Dest"); 

PatrolDestination = Destinations[Random.Range(0, Destinations. 
Length)].GetCcomponent<Transform>(); 


// 配 置 起 始 状态 


CurrentsState = ENEMY_STATE.PATROL ， 


public IEnumerator AIPatrol() 


{ 
// 在 巡逻 的 时 候 一 直 循 环 
while(currentstate == ENEMY_STATE .PATROL) 


// 设 置 搜索 为 STRICT 
ThisLineSight ,Sensitity = LineSight.SightSensitivity.STRICT; 


// 追 逐 到 巡逻 位 置 
ThisAgent .ReSsume( ) 
ThisAgent.SetDestination(PatrolDestination.position); 


// 等 待 直到 路 径 计算 完成 
while(ThisAgent.pathPending) 
yield return null; 


// 当 可 以 看 到 目标 的 时 候 就 启动 追逐 模式 


If(ThisLineSight,.CanSeeTarget ) 
{ 


ThisAgent.Stop(); 
CurrentState = ENEMY_STATE.CHASE,; 
yield break ; 


//Wait until next frame 
yield return null; 


下 面 对 代 码 示例 8.3 进 行 儿 点 总 绪 


Start 函 数 将 敌人 的 初始 状态 设置 为 巡逻 模式 ，CoroutineAIPatrol 操 
作 这 个 模式 。 

AIPatrol Coroutine 在 巡逻 状态 激活 时 会 一 直 循 环 。 > 全 人 
Coroutine 与 一 个 yield 组 合 下 ， 无 限 循环 不 一 定 是 坏事 ， 这 可 以 实 
现 对 长 期 行为 进行 简 单 整 齐 的 编码 。 

。 SetDestination 函 数 用 来 调用 es 指定 目的 地 。 
后 面 跟 随 一 个 pathPending 控 制 ， 它 是 NavMeshAgent 中 的 一 个 变 
量 。 这 个 控制 会 一 直 持 名 ee oe 
时 意味 着 已 经 计算 完了 从 源 地 址 到 目的 地 的 整个 路 径 。 对 于 简单 
的 或 者 短 的 旅程 ， 路 径 几 乎 可 以 立刻 计算 出 来 ， 但 是 对 于 复杂 的 
路 径 ， 可 能 需要 很 长 的 时 间 。 

在 巡逻 状态 时 ， 需 要 不 断 地 对 LineSight 组 件 进行 检查 ， 以 便 知 道 
敌人 是 否 具有 到 玩家 的 一 个 直 视 视线 ， 如 有 果 具 有 ， 那 么 敌人 立刻 
由 巡逻 状态 转 为 妃 逐 状态 。 

记 住 ，yield 返 回 的 空 语 句 将 会 暂停 一 个 Coroutine 直 到 下 一 帧 。 


现在 ， 将 AIEnemy 脚 本 拖 鼻 到 场景 中 的 NPC 角 色 上 “。 巡 逻 模 式 下 
NPC 将 跟随 一 个 移动 的 物体 而 运动 ， 也 吏 是 说 敌人 会 一 直 跟 随 一 个 移 


动 的 目的 地 。 在 上 一 章 中 已 经 使 用 Animation 窗 口 在 场景 中 创建 了 一 个 
随 着 时 间 移 动 的 对 象 ， 这 个 对 象 会 从 一 个 地 方 跳 到 另 一 个 地 方 ， 如 图 
8.7 所 示 。 


图 8.7 ”创建 可 移动 的 对 象 


为 了 获得 可 移动 的 对 象 ， 可 以 在 场景 中 创建 一 个 或 者 更 多 的 目的 
地 对 象 ， 将 它们 的 “Tag” 属 性 设置 为 "Dest”。AIEnemy 对 象 的 Start 函 数 会 
搜索 所 有 场景 Tag 属 性 为 "Dest” 的 对 象 ， 这 些 对 象 将 会 被 当 作 目的 地 
点 ， 如 图 8.8 所 示 。 
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图 8.8 ”对 目的 地 对 象 进行 标记 
8.4 追逐 状态 


逐 状 态 是 敌人 有 限 状态 机 3 种 状态 中 的 第 二 种 ， 这 个 状态 直接 关 
We 罗 和 攻击 状态 ， 它 可 以 转换 到 两 种 状态 之 一 。 如 果 一 个 正在 这 
逻 的 NPC 建 立 了 一 个 到 玩家 的 直接 视线 ， 那 么 NPC 束 会 由 这 逻 模 式 转 
为 追逐 模式 。 相 反 ， 如 果 一 个 正在 攻击 的 NPC 落 在 了 玩家 的 范围 之 外 

(也 许 因 为 玩家 逃跑 了 ) ，NPC 会 再 次 转 入 追逐 模式 。 从 追逐 状态 本 
身 ， 它 可 以 转换 成 巡逻 状态 或 者 攻击 状态 ， 相 反 ， 台 会 进入 追逐 状 


仿 。 如 条 NPC 与 玩家 的 距离 接近 到 了 可 以 攻击 的 距离 内 ， 束 会 切换 到 
攻击 模式 ， 下 面 的 代码 示例 8.4 进 行 了 修改 ， 实 现 了 追逐 行为 。 


代码 示例 8.4: 


public IEnumerator AIChase() 


// 循 环 追 逐 状 态 
while(currentstate == ENEMY_STATE.CHASE) 


{ 
// 将 查找 模式 设置 为 100sSe” 
ThisLineSight.Sensitity = LineSight.SightSensitivity.LOOSE; 


// 追 踩 的 最 后 一 个 位 置 
ThisAgent.Resume( ); 
ThisAgent.SetDestination(ThisLineSight.LastkKnowSighting); 


// 等 待 直 到 路 径 计算 完成 
while(ThisAgent ,pathPending ) 
yield return null; 


// 我 们 是 否 到 达 目 的 地 ? 


if(ThisAgent.remainingDistance <= ThisAgent.stoppingDistance) 


// 停 止 代理 
ThisAgent.Stop(); 


// 到 达 目 的 地 但 是 无 法 看 到 玩家 
if(!ThisLineSight.CanSeeTarget) 
CurrentState = ENEMY_STATE,PATROL ， 
else //Reached destination and can see player. Reached 
attacking distance 
CurrentState = ENEMY_STATE,ATTACK， 


yield break ; 


} 
// 等 待 到 下 一 帧 
yield return null; 
} 
} 


下 面 对 代 码 示例 8.4 进 行 几 点 总 结 。 


当 进 入 到 追逐 状态 以 后 ， 就 会 启动 AIChasecoroutine， 跟 巡 逮 状态 
一 样 ， 只 要 它 处 于 激活 状态 ，Coroutine 就 会 无 限 循环 。 
NavMeshAgent 的 成 员 变 量 remainingDistance 用 来 检测 NPC 是 否 进 入 
了 攻击 玩家 的 范围 。 

LineSight 类 中 的 CanSeeTarget 布 尔 型 变量 表示 玩家 是 否 可 见 ， 并 会 
影响 到 NPC 有 是 否 返 回 到 巡逻 模式 。 


现在 来 运行 一 下 这 上段 代码 ， 此 时 已 经 拥有 了 一 个 可 以 巡逻 和 姐 逐 
的 敌人 角色 。 


8.5 ”攻击 状态 


第 三 个 也 是 最 后 一 个 NPC 的 状态 是 攻击 状态 ， 在 此 期 间 NPC 会 不 
断 地 攻击 玩家 。 只 能 从 追逐 状态 转换 到 攻击 状态 。 在 追逐 过 程 中 ， 
NPC 必 须 检 测 是 否 进 入 了 攻击 距离 ， 如 果 进 入 了 ， 束 必须 将 退 逐 状态 
切换 到 攻击 状态 。 在 攻击 状态 中 ， 如 末 玩 家 远离 NPC 并 超出 了 攻击 距 
离 ，NPC 束 必须 从 攻击 状态 转换 为 退 逐 模式 ， 下 面 的 代码 示例 8.5 包 合 
了 EnemyAfI 类 及 全 部 的 代码 。 


代码 示例 8.5: 


using UnityEngine; 
using System.Collections; 
/ 


public class AI_Enemy : MonoBehaviour 


public enum ENEMY_STATE {PATROL, CHASE, ATTACK}; 
//--- 
public ENEMY_STATE CurrentState 


get{return currentstate;} 


Set 


// 更 新 当前 状态 


currentstate = value; 


// 停 止 所 有 正在 运行 的 coroutines 
StopAllCoroutines(); 


switch(currentstate) 


case ENEMY_STATE.PATROL: 
StartCoroutine(AIPatrol( )); 
break; 


case ENEMY_STATE ,CHASE : 
StartCoroutine(AIChase( )); 
break; 


case ENEMY_STATE.ATTACK: 
StartCoroutine(AIAttack( )); 
break; 


[SerializeField] 
private ENEMY_STATE currentstate = ENEMY_STATE.PATROL; 


// 对 视线 组 件 的 引用 
private LineSight ThisLineSight = null; 
// 对 导航 网 络 代理 的 引用 
private NavMeshAgent ThisAgent = null; 


// 对 玩家 生命 值 的 引用 
private Health PlayerHealth = null; 


// 对 玩家 transform 的 引用 
private Transform PlayerTransform = null; 


// 对 巡逻 目的 的 引用 
private Transform PatrolDestination = null; 


// 每 秒 钟 的 伤害 值 
public float MaxDamage = 10f; 

//--- 
void Awake() 


ThisLineSight = GetComponent<LineSight>(); 
ThisAgent = GetComponent<NavMeshAgent>( ); 


PlayerHealth = GameObject.FindGameObjectwithTag("Player"). 
GetComponent<Health>( ); 
PlayerTransform = PlayerHealth.GetComponent<Transform>(); 


void Start() 
// 获 取 随 机 的 目的 地 


GameObject[] Destinations = GameObject. 
FindGameObjectswithTag("Dest"); 


PatrolDestination = Destinations[Random.Range(0, Destinations. 
Length)].Getcomponent<Transform>(); 

// 配 置 初始 状态 

CurrentState = ENEMY_STATE,PATROL ， 


public IEnumerator AIPatrol() 


{ 
// 巡 还 的 时 候 不 断 循 环 
while(currentstate == ENEMY_STATE,PATROL ) 


{ 
// 将 查找 模式 设置 为 “strict” 
ThisLineSight.Sensitity = LineSight.SightSensitivity.STRICT; 
// 追 逐 到 巡逻 位 置 
ThisAgent.Resume( ) 
ThisAgent.SetDestination(PatrolDestination.position); 


// 等 得 路径 计算 完成 
while(ThisAgent ,pathPending ) 
yield return null; 


// 如 果 我 们 看 到 目标 就 开始 追逐 
if(ThisLineSight.CanSeeTarget) 


ThisAgent.Stop(); 
CurrentState = ENEMY_STATE,CHASE ， 
yield break ; 


} 
// 等 待 直到 到 下 一 帧 


yield return null; 


public IEnumerator AIChase() 

{ 
// 追逐 的 时 候 不 断 循环 
while(currentstate == ENEMY_STATE.CHASE) 
{ 


// 将 查找 模式 设置 为 1oose 
ThisLineSight.Sensitity = LineSight.SightSensitivity.LOOSE; 


// 追 逐 到 最 后 一 个 目的 地 
ThisAgent.Resume( ); 
ThisAgent.SetDestination(ThisLineSight.LastKnowSighting); 


// 等 待 路 径 计算 完成 
while(ThisAgent ,pathPending ) 
yield return null; 


// 我 们 是 否 到 达 目 的 地 ? 


if(ThisAgent.remainingDistance <= ThisAgent.stoppingDistance) 


// 停 止 代理 
ThisAgent.Stop(); 


// 到 达 目 的 地 但 是 看 不 到 玩家 
if(!ThisLineSight.CanSeeTarget ) 
CurrentState = ENEMY_STATE,PATROL ， 
else //Reached destination and can see player. Reached 
attacking distance 
CurrentState = ENEMY_STATE,ATTACK， 


yield break ; 
} 


// 等 待 直到 到 下 一 帧 
yield return null; 


public IEnumerator AIAttack() 


// 在 追逐 和 攻击 的 时 候 循环 
while(currentstate == ENEMY_STATE.ATTACK) 


{ 


// 等 待 路 径 计 算 完 成 
ThisAgent.Resume( ); 
ThisAgent.SetDestination(PlayerTransform.position); 


//Wait until path is computed 
while(ThisAgent ,pathPending ) 
yield return null; 


// 玩 家 是 不 是 已 经 跑 了 ? 
if(ThisAgent.remainingDistance > ThisAgent.stoppingDistance) 


// 改 变 回 追逐 模式 
CurrentState = ENEMY_STATE.CHASE; 


yield break ; 


else 


// 攻 击 
PlayerHealth.HealthpPoints -= MaxDamage * Time.deltaTime; 


// 等 待 直到 到 下 一 帧 


yield return null; 


} 
yield break; 


下 面 对 代 码 示例 8.5 进 行 几 点 总 结 。 


当 攻 击 状态 (敌人 人 处 于 这 个 状态 之 后 会 进行 攻击 ) 被 激活 以 后 ， 
AIAttack coroutine 就 会 无 限制 地 执行 。 

变量 MaxDamage 用 来 指明 敌人 每 秒 会 对 玩家 造成 的 伤害 。 
AIAttack coroutine 依 徘 Health 来 造成 对 生命 值 的 伤害 。 这 是 一 个 目 
定义 的 生命 值 编码 组 件 。 玩 家 和 敌人 都 应 该 拥有 一 个 表示 他 们 健 
康 情况 的 生命 值 组 件 。 


脚本 Health (Health.cs) 由 AIEnemy 类 所 引用 ， 对 玩家 造成 伤害 。 
基于 这 个 原因 ， 玩 家 需要 附加 一 个 生命 值 组 件 ， 这 个 组 件 的 代码 包含 
在 下 面 的 代码 示例 8.6 中 。 


代码 示例 8.6: 


using UnityEngine; 
using System.Collections; 


public class Health : MonoBehaviour 


public float HealthPoints 


get{return healthPoints;} 
set 


healthPoints = value; 
// 如 果 生 命 值 小 于 6， 就 会 死亡 


if(healthPoints <= 0) 
Destroy(gameObject); 
} 


} 


[SerializeField] 
private float healthPoints = 100f; 


Health 脚 本 十 分 简单 ， 它 负责 维护 一 个 数值 形式 的 生命 值 ， 当 这 个 


生命 值 下 降 到 0 或 者 0 以 下 时 ， 束 会 摧毁 这 个 脚本 附加 的 对 象 。 这 个 肢 
本 必须 附加 到 玩家 角色 上 ， 人 允许 NPC 靠 近 玩 家 时 对 其 造成 伤害 。 同 


这 个 脚本 也 可 以 附加 到 NPC 对 象 上 ， 人 允许 玩家 对 NPC 进 行 攻 击 ， 


如 图 89 所 示 
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图 8.9 配置 玩家 的 生命 值 


现在 已 经 做 好 了 对 这 个 项 目的 测试 准备 。 首 先 ， 把 敌人 对 象 做 成 
一 个 预 设 体 ， 具 体 的 方法 就 是 将 NPC 游 戏 对 象 从 场景 视图 或 者 层次 
(Hierarchy) 面板 拖 动 到 项 目 面板 上 ， 然 后 就 可 以 在 场景 中 创建 任意 
数量 的 敌人 了 ， 如 图 8.10 所 示 。 
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图 8.10 创建 一 个 NPC 预 设 体 


按 下 工具 栏 上 “Play” 图 标 来 测试 这 个 关卡 。 现 在 已 经 开发 好 了 一 个 
完整 的 环境 ， 拥 有 稼 能 的 敌人 可 以 寻找 、 追 逐 并 攻击 玩家 。 在 某 些 情 
况 下 ， 可 能 需要 对 敌人 FOV 进 行 调整 和 改进 ， 以 便 更 好 地 匹配 游戏 环 
境 和 角色 类 型 ， 如 图 8.11 所 示 。 


图 8.11 ”完成 的 关卡 
8.6 ”小结 


干 得 不 错 ! 现在 到 达 了 人 工 知 能 项 目的 结束 部 分 ， 同 时 这 也 是 本 
书 的 尾声 了 。 在 这 个 项 目 完成 之 时 ， 已 经 创建 了 一 个 完整 的 地 形 、 一 
个 NPC 预 设 体 以 及 一 系列 协同 工作 实现 了 人 工 智 能 的 脚本 。 对 于 游戏 
来 说 ， 人 工 智能 指 的 不 过 是 看 起 来 有 智能 的 对 象 以 及 创建 它们 的 技 
术 。 至 此 ， 本 书 完成 了 4 个 项 目 ， 现 在 的 你 已 经 具备 了 多 种 开发 二 维和 
三 维 专业 级 游戏 的 关键 技能 ， 布 望 你 再 接 再 万 ! 


欢迎 来 到 异步 社区 ! 


异步 社区 的 来 历 


异步 社区 (www.epubit.com.cn) 是 人 民 邮 电 出 版 社 旗下 IT 专业 图 书 旗 
舰 社 区 ， 于 2015 年 8 月 上 线 运营 。 


异步 社区 依托 于 人 民 邮 电 出 版 社 20 余 年 的 IT 专业 优质 出 版 资源 和 
编辑 策划 团队 ， 打 造 传 统 出 版 与 电子 出 版 和 上 自 出 版 结合 、 纸 质 书 与 电 
子 书 结合 、 传 统 印 刷 与 POD 按 需 印 刷 结合 的 出 版 平台 ， 提 供 最 新 技术 
资讯 ， 为 作者 和 读者 打造 交流 互动 的 平台 。 
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社区 里 都 有 什么 ? 
购买 图 书 


我 们 出 版 的 图 书 涵盖 主流 芽 技术 ， 在 编程 语言 、 Web 技 术 、 数 据 科 
学 等 领域 有 众多 经 典 畅 销 图 书 。 社 区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 
400 多 种 ， 部 分 新 书 实现 纸 书 、 电 子 书 同步 出 版 。 我 们 还 会 定期 发 布 新 
书 书 讯 。 


下 载 资源 


社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 或 程序 源 代码 。 


男 外 ， 社 区 还 提供 了 大 量 的 免费 电子 书 ， 只 要 注册 成 为 社区 用 户 
束 可 以 免费 下 载 。 


与 作 译 者 互动 


很 多 图 书 的 作 译 者 已 经 入 驻 社区 ， 您 可 以 关注 他 们 ， 咨 询 技术 问 
题 ; 可 以 阅读 不 断 更 新 的 技术 文章 ， 听 作 译 者 和 编辑 畅 聊 好 书 背 后 有 
趣 的 故事 ;还 可 以 参与 社区 的 作者 访谈 栏目 ， 回 您 天 广 的 作者 提出 采 
访 题目 。 


灵活 优惠 的 购书 


您 可 以 方便 地 下 单 购买 纸 质 图 书 或 电子 图 书 ， 纸 质 图 书 直接 从 人 
民 邮 电 出 版 社 书库 发 货 ， 电 子 书 提供 多 种 阅读 格式 。 


对 于 重 磅 新 书 ， 社 区 提供 预 售 和 新 书 首发 服务 ， 用 户 可 以 第 一 时 
间 买 到 心仪 的 新 书 。 


用 户 帐户 中 的 积分 可 以 用 于 购书 优惠 。100 积 分 =1 元 ， 购 买 图 书 
时 ,在 ”PE 里 项 入 可 使 用 的 积分 数值 ， 即 可 扣 减 相应 金额 。 


ess 0 ) 


购买 本 电子 书 的 读者 专 享 异步 社区 优惠 券 。 使 用 方法 ， 注 册 成 为 社区 用 户 ， 在 下 单 购书 
时 输入 “57AWG”， 然 后 点 击 “ 使 用 优惠 码 "， 即 可 享受 电子 书 8 折 优 惠 (本 优惠 券 只 可 使 用 一 
次 ) 。 


纸 电 图 书 组 合 购买 


社区 独家 提供 纸 质 图 书 和 电子 书 组 合 购买 方式 ， 价 格 优惠 ， 一 次 
购买 ， 多 种 阅读 选择 。 


Wireshark 网 络 分 析 的 艺术 本 书 作 灌 省 
者 ; 林 池 滨 
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算 机 科学 > 安全 与 加 密 > 网 站 安 全 
_ 有 上 海 
Wireshark 是 当 蔚 最 流行 的 网 阁 包 分 析 工 具 。 亡 上 手 简单 ,无 雳 培训 极 可 入 门 。 很 名 
全 手 的 网 培 / 问 是 更 到 Wireshark 都 能 迎 刀 而 解 ， 1.0K 经 验 值 
李 书 尝 远 的 网 堵 包 衬 白 真实 场 经 烘 且 接地 气 。 讲 和 解 时 漆 用 了 生活 化 区 更 多 >> rm 
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《Wiresha 水 网 络 分 析 就 这 么 障 
单 》 吧 《Wireshark 刚 络 分 析 的 艺 
术 》 作 者 
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电子 书 策 本 
目录 OO =O 出 版 位 所 
| 伟 下 推荐 
| 者 议 介 ”图 Nmap 梁 和 运 册 二 江南 
| 专业 书评 国 ci  : 次 广 明 
罕 提 要 外 : 


社区 里 还 可 以 做 什么 ? 


提交 勘误 


您 可 以 在 图 书页 面 下 方 提 区 勘误 ， 每 条 勘误 被 确认 后 可 以 获得 100 
积分 。 热 心 勤 误 的 读者 还 有 机 会 参与 书稿 的 审 校 和 翻译 工作 。 


写作 


性 区 提供 基于 Markdown 的 写作 环境 ， 喜 欢 写 作 的 您 可 以 在 此 一 试 
身手 ， 在 社区 里 分 享 您 的 技术 心得 和 读书 体会 ， 更 可 以 体验 目 出 版 的 
乐趣 ， 轻 松 实现 出 版 的 梦想 。 


如 有 果 成 为 社区 认证 作 译 者 ， 还 可 以 享受 异步 社区 提供 的 作者 专 享 
特色 服务 。 


会 议 活 动 早 知道 
您 可 以 掌握 代 圈 的 技术 会 议 资 讯 ， 更 有 机 会 免费 获 赠 大 会 门票 。 


加 入 异步 


扫描 任意 二 维 码 都 能 找到 我 们 : 


微 信服 务 号 


方 微 博 


Et 
三 


QQ 群 : 436746675 


社区 网 址 : www.epubit.com.cn 


异步 社区 


官方 微 信 : 


官方 微 博 : @ 人 邮 有 异步 社区 ，@ 人 民 邮 电 出 版 社 -信息 技术 分 社 


投稿 & 咨 询 : contact@epubit.com.cn 
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内 容 提要 


本 书 不 仅 要 教会 读者 如 何 使 用 Unity Shader， 更 重要 的 是 要 帮助 读 
者 学 习 Unity 中 的 一 些 泻 染 机 制 以 及 如 何 使 用 Unity Shader 实 现 各 种 目 
定义 的 泻 染 效果 ， 硕 望 这 本 书 可 以 为 读者 打开 一 局 新 的 大 | ]， 让 读者 
离 制作 心目 中 优秀 游戏 的 心愿 更 近 一 步 。 


本 书 的 主要 内 容 为 : 第 1 章 讲解 了 学 习 Unity Shader 应 该 从 哪里 着 
手 ; 第 2 章 讲解 了 现代 GPU 是 如 何 实现 整个 演 染 流水 线 鸭 ， 这 对 理解 
Shader 的 工作 原理 有 着 非常 重要 的 作用 ， 第 3 章 讲解 Unity Shader 的 实 
现 原 理 和 基本 语法 ; 第 4 章 学 习 Shader 所 需 的 数学 知识 ， 帮 助 读 者 克服 
学 习 Unity Shader 时 遇 到 的 数学 障碍 ; 第 5 章 通 过 实现 一 个 简单 的 顶点 / 
片 元 着 色 句 案例 ， 讲 解 常用 的 辅助 技巧 等 ， 第 6 章 学 习 如 何在 Shader 中 
实现 基本 的 光照 模型 ;第 7 章 讲述 了 如 何在 Unity Shader 中 使 用 法 线 纹 
理 、 扯 罩 纹理 等 基础 纹理 ;第 8 章 学 习 如 何 实现 透明 度 测 试 和 透明 度 混 
合 等 透明 效果 ; 第 9 章 讲解 复杂 的 光照 实现 ， 第 10 章 讲解 在 Unity 
Shader 中 使 用 立方 体 纹理 、 演 染 纹理 和 程序 纹理 等 高 级 纹理 ;第 11 章 
学 习 用 Shader 实 现 纹理 动画 、 顶 点 动画 等 动态 效果 ;第 12 章 讲解 了 屏 
幕后 处 理 效果 的 屏幕 特效 ， 第 13 划 使 用 深度 纹理 和 法 线 纹理 实现 更 多 
屏幕 特效 ;第 14 革 讲解 非 真 实感 泻 染 的 算法 ， 如 卡通 渲染 、 素 摘 风 格 
的 演 染 等 ， 第 15 革 讲解 噪声 在 游戏 泻 染 中 的 应 用 ; 第 16 章 介绍 了 常见 
的 优化 技巧 ;， 第 17 章 介绍 用 表面 着 色 器 实现 泻 染 ， 第 18 章 讲解 基于 物 
理 泻 染 的 技术 ; 第 19 章 讲解 在 升级 Unity 5 时 可 能 出 现 的 问题 ， 并 给 出 


解决 方法 ， 第 20 章 介绍 许多 非常 有 价值 的 学 习 资料 ， 以 帮助 读者 进行 
更 深入 的 学 习 。 

本 书 适合 Unity 初 学 者 、 游 戏 开发 者 、 程 序 员 ， 也 可 以 作为 大 专 院 
校 相关 专业 师 生 的 学 习 用 书 ， 以 及 培训 学 校 的 培训 教材 。 


= 一 


有 


ll 


2004 年 ， 有 3 位 年 轻 人 在 开发 他 们 的 第 一 款 游戏 失利 后 ， 决 定 在 丹 
麦 首 都 哥本哈根 建立 一 家 游戏 引 警 公司。 最 初 ， 他 们 的 想法 是 要 让 全 
世界 的 开发 人 员 可 以 使 用 最 少 的 资源 来 创建 出 他 们 喜欢 的 游戏 。 谁 也 
不 曾 想 到 ， 十 年 以 后 ， 这 个 起 初 并 不 起 眼 的 公司 已 经 发 展 成 为 游戏 引 
擎 公司 巨头 ， 而 他 们 的 游戏 引擎 也 成 为 世 弄 上 应 用 最 广泛 的 游戏 引 
警 。 没 错 ， 这 个 公司 就 是 Unity Technologies， 这 3 位 年 轻 人 分 别 是 公司 
创始 人 David Helgason (CEO) 、Nicholas Francis (CCO) 和 Joachim 
Ante (CTO) 。 而 这 3 位 创始 人 的 初衷 也 得 以 实现 ， 截 止 到 2014 年 ， 全 
世界 有 超过 300 多 万 的 开发 着 在 使 用 游戏 引擎 Unity 来 开发 游戏 ， 更 有 6 
亿 玩 家 在 玩 由 Unity3 引 | 擎 制作 的 游戏 。 这 股 “Unity 热 "一直 持续 到 现在 。 


虽然 Unity 引 敬 上 手 快 ， 操 作 界 面 们 单 快捷 ， 但 许多 Unity 开 发 者 却 
发 现 ， 当 他 们 需要 在 Unity 中 实现 一 些 特殊 的 画面 效果 时 ， 往 往 无 从 下 
手 。 这 些 画 面 效 果 的 实现 通常 和 渲染 有 关 ， 更 具体 来 说 ， 我 们 通常 需 
要 在 Unity 中 编写 一 些 Unity Shader 文 件 来 实现 它们 。 一 方面 ， 对 泻 染 知 
识 的 缺乏 和 对 Shader 的 不 了 解 导 致 很 多 开发 者 在 这 条 路 上 举步维艰 ; 男 
一 方面 ， 对 游戏 画面 的 提升 是 越 来 越 多 游戏 公司 的 诉求 。 然 而 ，Unity 
官方 文档 中 不 仅 缺 少 对 泻 染 原理 讲解 的 内 容 ， 对 Unity Shader 本 冉 的 一 
些 工 作 机 制 (概括 来 说 ，Unity Shader 是 Shader 上 层 的 一 个 抽象 ) 同样 
缺少 相关 资料 。 同 时 ， 市 面 上 能 适应 初学 者 的 Unity Shader 书 少 之 又 
少 ， 基 于 这 些 原因 ， 使 得 我 想 要 编写 这 样 一 本 书 来 帮助 开发 者 渡 过 困 


境 。 


本 书 旨 在 从 基础 开始 ， 帮 助 读 者 逐渐 了 解 并 掌握 如 何 编写 Unity 
Shader。 本 书 不 仅仅 是 要 教会 读者 “如 何 使 用 Unity Shader”， 更 重要 的 
是 要 帮助 读者 建立 对 泻 染 流程 的 基本 认识 ， 在 此 基础 上 ， 帮 助 读者 学 
习 Unity 中 的 一 些 渲染 机 制 以 及 如 何 使 用 Unity Shader 实 现 各 种 目 定义 的 
泻 染 鸡 果 。 我 相信 ， 让 读者 首先 了 解 原理 再 进行 实践 ， 相 比 于 大 量 堆 
砌 代码 是 更 好 的 学 习 方法 。 因 此 ， 本 书 在 开始 实践 前 ， 均 会 为 读者 讲 
解 大 量 的 原理 ， 计 读者 在 学 习 时 不 再 一 头 盘 水。 


尽管 本 书 专注 于 学 习 Unity Shader， 但 根据 我 的 学 习 经 验 来 看 ， 在 

不 了 解 基 础 的 渔 染 流程 和 基本 的 数学 知识 前 ， 想 要 深入 学 习 Shader 的 编 
写 是 非常 困难 的 。 实 际 上 ，Shader 仅 是 整个 演 染 流程 的 一 个 子 部 分 ， 
此 ， 任 何 脱离 渔 染 流程 的 对 Shader 的 讲解 可 能 会 让 读者 更 加 困惑 。 而 癌 
量 运算 、 和 矩阵 变换 等 数学 知识 在 Shader 的 编写 中 无 处 不 在 ， 因 此 ， 这 些 
数学 知识 往往 也 是 让 初学 者 对 Shader 望 而 却步 的 原因 。 基 于 上 面 的 两 点 
观察 ， 本 书 的 安排 从 易 到 难 ， 由 基础 到 深入 。 我 们 把 全 书 分 为 了 5 篇 ， 
读者 可 以 在 第 1 章 中 看 到 这 些 章 节 的 具体 安排 。 


随 着 硬件 的 发 展 ，Shader 的 能 力也 越 来 越 大 。 如 有 果 问 你 ， 一 个 
Shader 可 以 做 什么 ?你 可 能 会 回答 渔 染 游戏 模型 、 模 拟 波动 的 海面 、 实 
现 各 种 屏幕 特效 等 。 但 如 果 告 诉 你 ， 上 面 所 示 的 3 张 图 片 完全 依靠 一 个 
片 元 着 色 器 来 泻 染 实现 ， 没 有 借助 任何 外 部 模型 和 纹理 ， 你 可 能 会 觉 


得 非常 不 可 思议 ! 读者 可 以 在 Shadertoy 网 站 上 看 到 许多 这 样 的 例子 。 
例如 ， 上 面 的 小 雨 爹 、 五 彩 的 小 方块 ， 以 及 飘动 的 气球 (由 于 本 书 是 
黑白 印刷 ， 一 些 效 果 无 法 显现 ) 。 一 个 简 简 单单 的 Shader 可 以 做 到 什么 
程度 的 效果 ， 我 们 已 经 不 可 预期 。 本 书 的 重点 不 在 于 教 读 者 如 何 单纯 
使 用 Shader 来 实现 上 面 的 效果 ， 而 在 于 如 何 让 Shader 和 其 他 游戏 开发 元 
素 例如， 模型、 纹理 、 脚 本 等 ) 相配 合 ， 实 现 游戏 中 常见 的 泻 染 效 
果 ， 我 们 在 此 只 想 说 明 Shader 可 能 远 比 你 想象 的 要 强大 得 多 。 我 们 真诚 
地 和 硕 望 本 书 可 以 融 领 读者 走 进 Shader 的 世界 ， 让 读者 理解 Shader、 掌 握 
Shader， 和 我 们 一 起 享受 这 样 一 个 奇妙 的 游戏 开发 世界 ! 


读 这 本 书 之 前 你 需要 哪些 知识 


本 书面 向 Unity Shader 初 学 者 和 程序 员 ， 尽 量 在 本 书 的 基础 篇 中 介 
绍 那些 必要 的 基础 知识 ， 但 仍然 硕 望 读 者 可 以 具备 如 下 知识 。 


。 有 一 定 (或 少量 ) 的 编程 经 验 。 尽 管 Unity Shader 的 编写 语言 不 同 
于 C++、C# 这 种 高 级 语言 ， 但 相 比 于 完全 没有 编程 经 验 的 读者 来 
说 ， 学 习 过 这 些 高 级 语言 的 读者 更 加 容易 理解 Shader 的 代码 。 例 

如 ， 什 么 是 变量 、 什 么 是 函数 等 。 对 于 那些 缺少 编程 经 验 但 仍 对 
Shader 有 浓厚 兴趣 的 读者 ， 一 个 好 消息 是 ， 在 Unity 的 帮助 下 ， 编 
写 Unity Shader 的 代码 量 并 不 多 ， 因 此 ， 这 些 读 者 仍然 可 以 阅读 本 
书 o 

对 Unity 引 | 擎 的 操作 界面 比较 熟悉 。 假 定 读 者 曾 使 用 过 一 段 时 间 的 
Unity， 对 其 中 的 一 些 基本 操作 已 经 掌握 。 例 如 ， 如 何 创建 场景 、 
脚本 和 游戏 对 象 等 。 


当 


保持 一 定 的 耐心 。 我 曾 听 到 身边 的 一 些 朋 友 抱 忽 ， 为 什么 目 己 总 
是 看 不 懂 、 学 不 会 Shader， 难 道 是 目 己 学 习 能 力 有 问题 吗 ? 实际 

上 ， 这 些 朋 到 大 多 对 Shader 的 学 习 缺 乏 耐 心 ， 总 是 抱 着 今天 看 一 下 
明天 就 会 的 心情 。 但 不 焉 的 是 ， 与 Ct++、C# 高 级 语言 相 比 来 说 ， 

束 算 我 们 成 功 编写 了 Shader 版 的 “Hello world”， 但 对 于 为 什么 要 这 
么 写 、 它 们 是 怎么 执行 的 等 一 系列 基础 问题 我 们 仍然 并 不 理解 。 

这 正 是 我 之 前 提 到 的 ， 要 想 彻底 理解 Shader， 就 必须 了 解 整个 演 染 
流水 线 的 工作 方式 。 因 此 ， 保 持 耐 心 ， 打 好 基础 ， 是 每 一 个 想 要 
深入 学 习 Shader 的 开发 者 的 必 经 之 路 。 

有 一 定 的 数学 基础 ， 包 括 了 解 基本 的 代数 运算 (如 结合 律 、 交 换 
律 等 ) 、 三 角 运 算 《如 正弦 、 余 弦 计 算 等 ) 。 除 此 之 外 ， 如 果 读 
者 具有 大 学 水 平 的 线性 代数 、 微 积分 等 数学 知识 ， 会 故 现 阅读 本 
书 时 会 更 加 容易 。 为 了 帮助 读者 学 习 Shader 中 常见 的 数学 运算 ， 我 
们 专门 在 本 书 的 第 4 章 为 读者 介绍 癌 量 、 和 矩阵 、 空 间 变 换 等 重要 的 
数学 内 容 。 


如 有 果 你 满足 上 面 几 点 小 小 的 条 件 ， 那 么 恭喜 你 ， 现 在 你 可 以 安心 


地 继续 阅读 本 书 了 ! 


谁 适 合 读 这 本 书 


任何 想 要 了 人 解 渔 染 基 础 或 想 要 目 由 地 使 用 Unity Shader 编 写 泻 梁 效 


果 的 开发 者 均 可 阅读 本 书 。 这 些 开发 者 不 仅 限 于 进行 游戏 开发 的 程序 


和 


也 包括 那些 渴望 更 加 自由 地 在 Unity 中 实现 各 种 画面 效果 的 美工 人 
在 校 学 生 和 爱好 者 等 。 


为 什么 你 需要 这 本 书 


与 国内 市 场 已 有 的 介绍 相关 内 容 的 书籍 和 资料 相 比 来 说 ， 本 书 有 


一 些 独 有 的 特色 。 


内 容 独 特 。 本 书 填补 了 Unity Shader 和 演 染 流水 线 之 间 的 知识 鸿 
沟 ， 帮助 读者 打下 恨 好 的 展 层 基础 。 同 时 ， 我 们 也 会 对 Unity 中 一 
些 洽 染 机 制 的 工作 原理 进行 详细 齐 析 ， 帮 助 读 者 解决 “是 什么 ”为 
什么 “怎么 做 ”这 3 个 基本 问题 。 除 此 之 外 ， 本 书 配合 大 量 实例 ， 让 
读 考 在 实践 中 隶 渐 掌握 Unity Shader 的 编写 。 

结构 连贯 。 由 于 网 络 上 关于 Unity Shader 的 资料 非常 零散 ， 许 多 初 
学 者 总 是 无 法 系统 地 进行 学 习 。 本 书 在 内 容 编 排 上 左 费 心思 ， 从 
基础 到 进 阶 再 到 深入 的 讲解 ， 解 决 读者 长 期 以 来 的 学 习 烦 恼 。 
充分 面向 初学 者 。 在 本 书 的 编写 过 程 中 ， 我 一 直 在 问 自 己 ， 这 人 么 
写 到 底 读 者 能 不 能 看 懂 ? 这 使 得 在 本 书 开 头 的 几 个 章节 中 ， 尤 其 
是 在 基础 篇 和 初级 篇 中 的 章 站 中 ， 我 们 的 学 习 步 调 放 得 很 慢 ， 这 
是 因为 我 非常 了 解 在 学 习 Shader 的 过 程 中 哪些 内 容 比较 难 理解 ， 哪 
些 内 容 非常 容易 让 人 困惑 ， 而 这 些 内 容 正 是 挡 在 初学 者 面前 的 迫 
路 虎 ! 为 此 ， 提 供 了 大 量 的 图 示 并 配合 文字 说 明 ， 且 在 一 些 章节 
最 后 提供 了 “ 管 疑 解 惑 ” 小 方 来 解释 那些 翁 糊 不 清 而 初学 者 义 经 常 
疑问 的 问题 。 考 虚 到 数学 往往 是 让 初学 者 望而却步 的 重要 因素 ， 
我 们 在 第 4 章 数学 一 章 中 特意 安排 了 “农场 游戏 "这 一 背景 案例 ， 以 
这 样 一 个 虚拟 的 场景 来 帮助 读者 理解 数学 在 演 染 中 是 如 何 发 挥 作 
用 的 。 


。 包 含 了 Unity 5 在 泻 染 方面 的 新 内 容 。 例 如 ， 本 书 多 次 介绍 Unity 5 
中 的 新 工具 帧 调试 器 (Frame Debugger) ， 并 借助 该 工具 的 帮助 来 
理解 Unity 中 的 泻 染 过 程 ， 第 18 革 中 介绍 了 Unity 5 的 基于 物理 的 演 
染 (PBR) ， 我 们 较为 详细 地 剖析 了 PBR 的 实现 原理 ， 并 介绍 了 如 
何在 Unity 5 中 使 用 它们 来 实现 一 些 更 加 真实 的 泻 染 效果 。 需 要 注 
意 的 是 ， 在 本 书 编写 时 使 用 的 版 本 为 当时 的 最 新 版 本 Unity 5.2.1 
(人 免费 版 )”， 但 本 书 出 版 时 Unity 可 能 会 发 布 更 新 的 版 本 ， 这 可 能 
会 造成 一 些 操作 界面 与 本 书 内 容 有 所 冲突 。 例 如 ， 在 Unity 5.3 中 ， 
帆 调 斌 絮 的 界面 更 加 丰富 ， 包 仿 了 材质 属性 等 显示 信息 ， 但 这 并 
“影响 阅读 ， 我 们 在 本 书 的 勘误 网 址 上 会 更 新 (https://github.com/ 
candycat1992/Unity_Shaders Book) 。 
补充 了 大 量 延 伸 阅 读 资 料 。 泻 染 领 域 的 博大 精深 绝 不 是 一 本 书 可 
以 涵盖 的 ， 因 此 ， 在 本 书 一 些 章 市 的 最 后 ， 提 供 了 “扩展 阅读 ”小 
方 ， 让 那些 希望 更 加 深入 学 习 的 读者 可 以 在 提供 的 资料 中 找到 更 
多 的 学 习 内 容 。 


总 而 证 之 ， 我 布 望 你 可 以 从 这 本 书 中 学 到 许多 有 价值 的 内 容 ， 并 
能 够 享受 这 个 过 程 。 相 信 我 ， 这 些 内 容 很 有 趣 。 


本 书 源 代码 


读者 可 以 在 开源 网 站 github (https://github.com/ 
candycat1992/Unity_Shaders_Book) 上 下 载 本 书 的 源 代码 。 在 编写 本 书 
时 ， 我 们 使 用 的 是 当时 Unity 的 最 新 版 Unity 5.2.1 (免费 版 ，， 并 在 Mac 
10.9.5 平 台 和 Windows 8 平台 下 验证 了 代码 的 正确 性 。 本 书 源 代 码 的 组 


织 方式 大 多 按 资源 类 型 和 章 廊 进行 划分 ， 主 要 包含 了 以 下 关键 文件 


包含 了 各 章 对 应 的 场景 ， 每 个 章节 对 应 一 个 子 文件 夹 ， 例 如 第 7 章 
所 有 场景 所 在 的 子 文件 夹 为 Assets/Scenes/Chapter7。 每 个 场景 的 命 
名 方式 为 Scene 药 和 号 小 节 号 _ 次 小 六 号 ， 例 如 7.2.3 节 对 应 的 场景 名 为 
Scene_7_2_3。 如 果 同 一 个 小 市 包含 了 多 个 场景 ， 那 么 会 使 用 英文 
字母 作为 后 缀 依次 表示 ， 例 如 7.1.2 市 包含 了 两 个 场景 

Scene 7 1 2 a 和 Scene 7 1 2 b 


Assets/Scenes 


包含 了 各 章 实 现 的 Unity Shader 文 件 ， 每 个 章节 对 应 一 个 子 文件 
来， 例如 第 7 章 实现 的 所 有 Unity Shader 所 在 的 子 文件 夹 为 
Assets/Shaders | Assets/Shaders/Chapter7。 每 个 Unity Shader 的 命名 方式 为 ChapterX- 


功能 ， 例 如 第 7 章 使 用 渐变 纹理 的 Unity Shader 名 为 Chapter7- 


Ramp lexture 


包含 了 各 章 对 应 的 材质 ， 每 个 章节 对 应 一 个 子 文件 夹 ， 例 如 第 7 章 
所 有 材质 所 在 的 子 文件 夹 为 Assets/ Scenes/Chapter7。 每 个 材质 的 命 

Assets/Materials | 名 方式 与 它 使 用 的 Unity Shader 名 称 相 匹配 ， 并 以 Mat 作 为 后 级 ， 例 
如 使 用 名 为 Chapter7-RampTexture 的 Unity Shader 的 材质 名 称 是 
RampTextureMtat 


包含 了 各 章 对 应 的 C# 肢 本， 每 个 章节 对 应 一 个 子 文件 夹 ， 例 如 第 5 
章 所 有 脚本 所 在 的 子 文件 夹 为 Assets/Scripts/Chapter5 


Assets/Scripts 


包含 了 各 章 使 用 的 纹理 贴图 ， 每 个 章节 对 应 一 个 子 文 件 夹 ， 例 如 
第 7 章 使 用 的 所 有 纹理 所 在 的 子 文件 夹 为 Assets/Textures/Chapter7 


Assets/Textures 


除了 上 壕 文件 夹 外 ， 源 代码 中 还 包含 了 一 些 辅助 文件 夹 。 例 如 ， 
Assets/Editor 文 件 夹 中 包含 了 一 些 需 要 在 编辑 器 状态 下 运行 的 脚本 ， 
Assets/Prefabs 文 件 夹 下 包含 了 各 划 使 用 的 预 设 模 型 和 其 他 常用 预 设 模 


av 
型 等 。 


读者 反馈 


尽管 我 们 在 本 书 的 编写 过 程 中 多 次 检查 内 容 的 正确 性 ， 但 书 中 难 
人 免 仍 然 会 出 现 一 些 错误 ， 欢 迎 读者 批评 指正 。 读 者 可 以 将 问题 反映 到 
本 书 源 代码 所 在 的 github 讨 论 页 (https:/ 
github.com/candycat1992/Unity_Shaders_Book/issues) ， 此 网 址 也 是 本 
书 源 代 码 下 载 地 址 ， 该 地 址 中 也 包括 本 书 示例 彩色 图 文档 。 也 可 以 发 
邮件 (lelefeng1992@gmail.com) 联系 作者 ， 本 书 答疑 QQ 群 为 
438103099 。 


编辑 联系 邮箱 为 zhangtao@ptpress.com.cn 。 


首先 ， 我 要 感谢 《Unity 3D ShaderLab 开 发 实战 详解 》 一 书 的 作者 
郭 浩 瑜 老师 ， 是 他 同 出 版 社 的 推荐 才 导 致 了 本 书 的 编写 和 出 版 ， 并 给 
了 我 许多 在 书籍 编写 过 程 中 的 建议 和 帮助 。 


感谢 卢 鹏 先生 ， 在 本 书 编写 过 程 中 ， 我 们 进行 了 很 多 关于 优化 、 
效果 实现 等 方面 的 讨论 ， 这 些 讨论 让 本 书 的 内 容 更 加 丰富 。 户 先生 的 
乐于 分 享 和 好 学 的 精神 让 我 十 分 敬佩 。 


我 也 要 感谢 我 的 家 人 ， 我 的 父母 和 姐姐 ， 是 你 们 在 背后 的 默默 文 
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到 瓶 贷 时 ， 永 远 是 你 的 鼓励 和 支持 让 我 走出 困境 。 也 是 你 的 帮助 ， 让 
本 书 现 在 的 封面 得 以 择 现在 读 着 面前 。 


除 此 之 外 ， 从 开始 编写 本 书 到 完成 之 时 ， 很 多 网 友 给 了 我 莫大 的 
性 励 和 可 贯 的 建议 ， 我 从 未 想到 有 这 人 么 多 素 未 谋面 的 朋友 在 关注 着 本 
书 的 进展 ， 感 谢 你 们 ， 是 你 们 让 我 更 加 有 动力 写 完 本 书 。 


感谢 宣 雨 松 和 罗 盛 誉 老师 在 百 忙 之 中 为 本 书写 推荐 序 ， 谢 谢 你 们 
的 鼓励 和 文 持 。 


最 后 ， 我 要 感谢 人 民 邮 电 出 版 社 的 编辑 张涛 ， 是 您 的 热情 鼓励 让 
我 对 本 书 的 未 来 满怀 希望 。 谢 谢 您 对 本 书 在 内 容 编排 、 封面 设 计 等 方 
面 的 意见 和 建议 ， 让 这 本 书 变 得 更 好 。 感 谢 对 本 书 进行 修改 和 排版 的 
出 版 社工 作 人 员 ， 是 你 们 证 这 本 书 更 完美 地 呈现 在 读者 面前 。 


作者 


第 1 篇 ”基础 篇 


这 是 很 重要 的 一 篇 ， 尽 管 在 本 篇 中 我 们 没有 进行 真正 的 代码 编 
写 , 但 本 篇 会 为 初学 者 普及 基本 的 理论 知识 以 及 必要 的 数学 基础 ， 为 
读者 顺利 步 入 Unity Shader 学 习 打 下 很 好 的 基础 。 


第 1 章 欢迎 来 到 Shader 的 世界 


欢迎 来 到 Shader 的 世界 ! 我 们 曾 不 断 听 到 周围 有 人 提出 类 似 的 问 
题 : “Shader 是 什么 ”我 应 该 看 哪些 书 才能 学 好 Shader”“ 学 习 Unity 
Shader， 我 应 该 从 哪里 着 手 *”。 我 希望 这 本 书 可 以 告诉 你 这 些 问 题 的 答 
案 。 让 你 离 制 作 心 目 中 优秀 游戏 的 心愿 更 近 一 步 。 


第 2 章 演 染 流水 线 


这 一 章 讲解 了 现代 GPU 是 如 何 实现 整个 泻 染 流水 线 的 ， 这 些 内 容 
对 于 理解 Shader 的 工作 原理 有 着 非常 重要 的 作用 。 


第 3 章 Unity Shader 基 础 


这 一 章 将 讲解 Unity Shader 的 实现 原理 和 基本 语法 ， 同 时 也 将 为 读 
答 一 些 第 见 的 困惑 点 。 


第 4 章 学 习 Shader 所 需 的 数学 基础 


数学 回来 是 初学 者 面 对 的 一 大 学 习 障碍 。 然 而 ， 在 初级 阶段 的 渔 
染 学 习 中 ， 我 们 需要 掌握 的 数学 理论 实际 上 并 不 复杂 。 这 一 章 将 为 读 
者 讲解 泻 染 过 程 中 常见 的 数学 知识 。 这 章 内 容 可 以 帮助 读者 理解 
Shader 中 的 数学 运算 ， 我 们 在 讲解 过 程 中 以 一 个 具体 的 例子 来 曾 壕 “一 
头 奶 牛 的 腊 子 是 如 何 一 步 步 被 绘制 到 屏幕 上 的 ”。 


第 1 章 ”欢迎 来 到 Shader 的 世界 


欢迎 来 到 Shader 的 世界 ! 我 们 曾 不 断 听 到 周围 有 人 提出 类 似 的 问 
题 : “Shader 是 什么 ”我 应 该 看 哪些 书 才能 学 好 Shader”“ 学 习 Unity 
Shader， 我 应 该 从 哪里 着 手 ”。 我 们 和 希望 这 本 书 可 以 告诉 你 这 些 问题 的 
答案 。 如 采 本 书 是 你 学 习 Shader 的 第 一 本 书 ， 我 们 希望 这 本 书 可 以 为 
你 打开 一 司 新 的 大 门 ， 让 你 离 制作 心目 中 的 优秀 游戏 的 心愿 更 近 一 
步 ;， 如 果 不 是 ， 我 们 同样 希望 这 本 书 可 以 让 你 更 深入 地 理解 Sshader 的 
方方面面 ， 在 学 习 Shader 的 过 程 中 更 上 一 层 楼 。 


1.1 程序 员 的 三 大 浪漫 


有 人 说 ， 程 序 员 的 三 大 浪漫 是 编译 原理 、 操 作 系统 和 图 形 学 (是 
的 ， 我 已 经 听 到 很 多 人 在 反驳 这 人 句 话 了 ， 不 要 当真 啦 ) 。 不 管 你 是 否 
认同 这 人 句 话 ， 我 们 只 是 想 借 此 说 明 图 形 学 在 程序 员 心 目 中 的 地 位 。 正 
在 看 此 书 的 你 ， 想 必 多 多 少 少 都 对 图 形 学 或 者 演 染 有 一 定 兴 趣 ， 也 许 
你 想 要 通过 此 书 来 学 习 如 何 实现 游戏 中 的 各 种 特效 ， 也 许 你 仅仅 是 好 
奇 那些 绚丽 的 画面 是 如 何 产生 的 。 我 们 有 是 程序 员 中 的 “外 园 协 会 >， 期 
竺 着 用 代码 编写 出 一 个 绚丽 多 姿 的 世界 。 这 就 是 我 们 的 痕 复 。 


我 想 ， 读 者 大 概 都 经 历 过 这 样 的 场景 : 当 你 在 游戏 里 看 到 那些 出 
色 的 画面 时 ， 你 很 好 奇 这 样 的 游戏 是 如 何 制作 出 来 的 ， 更 具体 的 是 ， 
这 样 的 演 染 效果 是 如 何 得 到 的 。 于 是 你 搜索 后 发 现 ， 这 个 游戏 是 Unity 
引擎 开发 的 ， 更 巧 的 是 ，Unity 也 十 你 熟知 的 引擎 ! 于 是 你 继续 搜索 ， 


想 要 知道 如 何在 Unity 里 实现 这 样 的 效果 ， 最 后 ， 你 往往 会 得 到 “要 编 
写 目 己 的 Shader” 这 样 的 答案 。 总 算 有 了 一 些 头 绪 ， 你 继续 在 网 络 上 搜 
索 如 何 学 习 编 写 Shader。 于 是 你 看 到 了 很 多 文章 ， 这 些 文章 告诉 你 
Unity Shader 有 哪些 语法 ， 一 个 普通 的 漫 反 射 或 者 边缘 高 光 的 效果 的 代 
码 是 什么 样子 的 。 然 后 ， 你 把 这 些 代码 粘贴 到 Unity 中 ， 保 存 后 运行 ， 
效果 出 现 了 ! 一 切 看 起 来 好 像 都 很 顺利 ， 可 是 ， 当 你 仔细 阅读 这 些 代 
码 时 ， 却 往往 没有 头绪 。 你 不 知道 为 什么 要 有 一 个 名 为 vert 和 frag 的 函 
数 ， 它 们 是 什么 时 候 调 用 的 ， 为 什么 vert 函 数 里 要 进行 一 些 怎 阵 运 
算 ， 这 些 和 矩阵 是 用 来 做 什么 的 ， 为 什么 当 你 按照 C# 里 面 的 一 些 语法 编 
写 时 Shader 却 报错 了 。 这 些 疑 问 大 大 影响 了 你 学 习 Shader 的 信心 ， 你 
开始 觉得 这 是 一 个 比 学 习 C# 难 许多 倍 的 事情 ， 怀 疑 目 己 是 不 是 还 不 具 
备 学 习 如 何 编写 Shader 的 基础 。 


如 打上 面 的 情景 和 你 的 经 历 有 些 类 似 ， 那 么 相信 我 ， 有 很 多 人 和 
你 有 一 样 的 烦恼 。 事 实 上 ， 我 们 之 所 以 会 觉得 学 习 Shader 比 学 习 C 扩 广 
样 的 编程 语言 更 加 困难 ， 一 个 原因 是 因为 Shader 需 要 率 扯 到 整个 泻 染 
流程 。 当 学 习 C++、C#j 文 样 的 高 级 语言 时 ， 我 们 可 以 在 不 了 解 计算 机 
架构 的 情况 下 仍然 编写 出 实现 各 种 功能 的 代码 ， 这 样 的 高 级 语言 更 符 
合 人 类 的 思维 方式 。 然 而 ，Shader 并 不 是 这 样 的 。 我 们 之 所 以 要 学 习 
Shader， 十 想 要 学 习 如 何 把 物体 按照 目 己 的 意愿 演 染 到 屏幕 上 ， 但 
征 ，Shader 只 走 整 个 演 染 流程 中 的 一 个 子 部 分 。 虽 然 它 很 关键 ， 但 想 
要 学 习 它 ， 我 们 束 需 要 了 解 整 个 演 染 流程 是 如 何 进行 的 。 和 C++ 这 样 
的 高 级 语言 不 同 ， 尽 管 Shader 的 编写 语言 已 经 达到 了 我 们 可 以 理解 的 
程度 ， 但 Shader 更 多 地 是 面向 GPU 的 工作 方式 ， 所 以 它 的 一 些 语法 对 


我 们 来 说 并 不 那么 直观 。 因 此 ， 任 何 一 篇 只 讲 语法 、 不 讲 痊 染 框 架 的 
文章 都 无 法 解决 读者 的 困惑 。 

我 们 希望 通过 本 书 可 以 帮助 读者 建立 一 个 泻 梁 流程 的 整体 体系 ， 
这 些 基础 是 跨越 Sshader 学 习 中 层 层 障碍 的 重要 因素 。 我 们 也 相信 ， 在 
学 习 完 本 书后 ， 读 者 可 以 目 行 回答 本 章 开 头 提 出 的 那些 问题 。 


1.2 ”本 书 结构 


我 们 在 编写 本 书 时 尽量 考虑 到 没有 演 染 基础 的 读者 们 。 因 此 ， 我 
们 把 整 书 分 成 了 五 大 篇 。 


。 基础 篇 


这 是 很 重要 的 一 篇 ， 尽 管 在 本 篇 中 我 们 没有 进行 真正 的 代码 编 
写 ， 但 基 f Wi 从 知识 以 及 必要 的 数学 基础 。 
基础 篇 包括 了 以 下 3 个 章 廊 。 


第 2 章 泻 染 流水 线 这 一 章 讲解 了 现代 GPU 是 如 何 实现 整个 演 染 流 
水 线 的 ， 这 些 内 容 对 于 理解 Sshader 的 工作 原理 有 着 非常 重要 的 作用 。 


第 3 章 ”Unity Shader 基 础 Unity 在 原 有 的 泻 染 流程 上 进行 了 封 

， 并 提供 给 开发 者 新 的 图 像 编程 接口 Unity Shader。 这 一 章 将 讲 
i Shader 的 实现 原理 和 基本 语法 ， 同 时 也 将 为 读者 解答 一 些 常见 
的 困惑 把 。 


第 4 章 学 习 Shader 所 需 的 数学 基础 ”数学 向 来 是 初学 者 面 对 的 一 
大 学 习 障 碍 。 然 而 ， 在 初级 阶段 的 演 染 学 习 中 ， 我 们 需要 掌握 的 数学 


理论 实际 并 不 复杂 。 本 章 将 为 读者 讲解 浑 染 过 程 中 常见 的 数学 知识 ， 
如 矢量 、 和 矩阵 运算 、 坐 标 空间 等 。 本 章 内 容 可 以 大 大 帮助 读者 理 角 
Shader 中 的 数学 运算 。 为 了 帮助 读者 加 深 理解 ， 我 们 在 讲解 过 程 中 以 
一 个 具体 的 例子 来 阐述 "一 头 奶牛 的 鼻子 是 如 何 一 步 步 被 绘制 到 屏幕 上 
的 "。 


。 初级 篇 


在 学 习 完 基础 篇 后 ， 我 们 就 正式 开始 了 Unity Shader 的 学 习 之 旅 。 
初级 篇 将 会 从 最 简单 的 Shader 开 始 ， 讲 解 Shader 中 基础 的 光照 模型 、 
纹理 和 透明 效果 等 初级 泻 染 效果 。 需 要 注意 的 是 ， 我 们 在 初级 篇 中 实 
现 的 Unity Shader 大 多 不 能 直接 用 于 真实 项 目 中 ， 因 为 它们 缺少 了 完整 
的 光照 计算 ， 例 如 阴影 、 光 照 豪 减 等 ， 仅 仅 是 为 了 半 述 一 些 实现 原 
理 。 在 第 9 章 最 后 ， 我 们 会 给 出 包括 了 完整 光照 计算 的 Unity Shader 。 
初级 篇 包含 了 以 下 4 个 章节 。 


第 5 章 开 始 Unity Shader 学 习 之 旅 本 章 将 实现 一 个 简单 的 顶点 / 片 元 
着 色 器 ， 并 详细 解释 其 中 每 个 步骤 的 原理 ， 这 需要 读者 对 之 前 基础 篇 
的 内 容 有 所 理解 。 本 章 还 会 给 出 关于 Unity Shader 的 一 些 常 用 的 辅助 技 
巧 ， 例 如 如 何 调试 、 查 看 内 置 代码 以 及 编写 规范 等 。 


第 6 章 “Unity 中 的 基础 光照 ”本 章 将 学 习 如 何在 Shader 中 实现 基 
本 的 光照 模型 ， 如 误 反射、 高光 反 射 等 。 我 们 首先 解释 如 何 从 无 到 有 
实现 一 个 光照 模型 ， 最 后 给 出 使 用 Unity 提 供 的 内 置 本 数 来 实现 的 版 
本 o 


第 7 章 基 础 纹理 纹理 的 使 用 给 演 染 的 世界 带 来 了 更 多 的 变化 。 这 
一 草 将 会 讲述 如 何在 Unity Shader 中 使 用 法 线 纹理 、 遮 单 纹理 等 基础 纹 
于 :3 


第 8 章 透 明 效 果 ”透明 是 游戏 中 常用 的 泻 染 效果 。 这 一 章 首先 介绍 
了 泻 染 的 实现 原理 ， 并 给 出 了 和 Unity 的 泻 染 顺序 相关 的 重要 内 容 。 在 
了 解 了 这 些 内 容 的 基础 上 ， 我 们 将 学 习 如 何 实现 透明 度 测试 和 透明 度 
混合 等 透明 效 末 。 


。 中 级 篇 


中 级 篇 是 本 书 的 进 阶 篇 章 ， 主 要 讲解 Unity 中 的 泻 染 路 径 、 如 何 计 
算 光 照 衰减 和 阴影 、 如 何 使 用 高 级 纹理 和 动画 等 一 系列 进 阶 内 容 。 中 
级 篇 包含 了 以 下 3 个 章节 。 


第 9 章 更 复杂 的 光照 我 们 在 初级 篇 中 实现 的 光照 模型 没有 考虑 一 
些 重要 的 光照 计算 ， 如 阴影 和 光照 衰减 。 本 章 首 先 讲解 Unity 中 的 3 种 
演 染 路 人 径 和 3 种 重要 的 光源 类 型 ， 再 解释 如 何在 前 向 渲染 路 径 中 实现 包 
舍 了 光照 喜 减 、 阴 影 等 效果 的 完整 的 光照 计算 。 在 本 章 最 后 ， 我 们 会 
给 出 基于 之 前 学 习 内 容 实现 的 包含 了 完整 光照 计算 的 Unity Shader 。 


第 10 章 高 级 纹理 ”这 一 章 将 会 讲解 如 何在 Unity Shader 中 使 用 立方 
体 纹理 、 演 染 纹理 和 程序 纹理 等 高 级 纹理 。 


第 11 章 让 画面 动 起 来 静态 的 画面 往往 是 无 趣 的 。 这 一 章 将 帮助 读 
者 学 习 如 何在 Shader 中 使 用 时 间 变 量 来 实现 纹理 动画 、 顶 点 动画 等 动 


。 高 级 篇 


z 


高 级 篇 狂 兽 了 一 些 Shader 的 高 级 用 法 ， 例 如 如 何 实现 屏幕 特效 、 
利用 法 线 和 深度 缓冲 以 及 非 真 实感 泻 染 等 ， 同 时 ， 我 们 还 会 介绍 一 些 
针对 移动 平台 的 优化 技巧 。 高 级 篇 的 结构 如 下 。 


第 12 章 屏幕 后 处 理 效果 屏幕 特效 是 游戏 中 常用 的 泻 染 手法 之 一 。 
这 一 草 将 介绍 如 何在 Unity 中 实现 一 个 基本 的 屏幕 后 处 理 脚 本 系统 ，3 
给 出 一 些 基本 的 屏幕 特效 的 实现 原理 ， 如 高 斯 模糊 、 边 毕 检 测 等 。 


第 13 章 使 用 深度 和 法 线 纹理 ”使 用 深度 和 法 线 纹理 可 以 帮助 我 们 
实现 很 多 屏 攻 特效。 本 章 将 介绍 如 何在 Unity 中 获取 这 些 特殊 的 纹理 来 
实现 屏幕 特效 。 


第 14 章 非 真实 感 泻 染 很 多 游戏 使 用 了 非 真实 感 泻 染 的 方法 来 演 染 
游戏 画面 。 这 一 章 将 会 给 出 常见 的 非 真实 感 浑 染 的 算法 ， 如 卡通 演 
染 、 素 描 风 格 的 演 染 等 。 本 章 的 扩展 阅读 部 分 可 以 帮助 读者 找到 更 多 
其 他 类 型 的 非 真实 感 痊 染 的 实现 方法 。 


第 15 章 使 用 噪声 ”很 多 时 候 噪声 是 我 们 的 救星 。 本 章 给 出 了 噪声 
在 游戏 泻 染 中 的 一 些 应 用 。 


第 16 章 ”Unity 中 的 泻 染 优化 技术 ”优化 往往 是 游戏 泻 染 中 的 重 
点 。 这 一 革 介 绍 了 Unity 中 针对 移动 平台 使 用 的 常见 的 优化 技巧 。 


。 打 展 篇 


扩展 篇 上 在 进一步 扩展 读者 的 视野 。 本 篇 将 会 介绍 Unity 的 表面 着 
色 器 的 实现 机 制 ， 并 介绍 基于 物理 的 泻 染 的 相关 内 容 。 最 后 ， 我 们 给 
出 了 更 多 的 关于 学 习 渔 染 的 资料 。 扩 展 篇 包含 了 以 下 4 个 章 订 。 


第 17 章 Unity 的 表面 着 色 器 探秘 Unity 提 出 了 一 种 新 颖 的 Shader 形 
式 一 一 表面 着 色 器 。 本 章 将 会 介绍 这 些 表 面 着 色 器 是 如 何 实 现 的 ， 以 
及 如 何 使 用 这 些 表面 着 色 器 来 实现 泻 染 。 


第 18 章 基于 物理 的 泻 染 ”Unity 5 终于 引入 了 基于 物理 的 泻 染 ， 这 
给 Unity 引 警 带 来 了 更 强 的 泻 染 能 力 。 这 一 章 将 介绍 基于 物理 渲染 的 理 
论 基础 ， 并 解释 Unity 是 如 何 实 现 基于 物理 的 泻 染 的 。 我 们 还 会 在 本 章 
实现 一 个 基本 的 场景 来 进一步 前 述 如 何在 Unity 5 中 利用 基于 物理 的 泻 


染 。 


第 19 章 Unity 5 更 新 了 什么 “ 相 较 于 Unity 4.x，Unity 5 在 Shader 方 
面 有 很 多 重要 的 更 新 。 本 章 将 给 出 Unity 5 中 一 些 重要 的 更 新 ， 以 帮助 
读者 解决 在 升级 Unity 5 时 所 面 对 的 各 种 问题 。 


第 20 章 还 有 更 多 内 容 吗 ”图 形 学 的 丰富 多 彩 远 远 超 平 我 们 的 想 
象 ， 我 们 相信 一 本 书 也 远 远 无 法 满足 一 些 读者 强烈 的 求知 欲 。 在 最 后 
一 章 中 ， 我 们 将 给 出 许多 非常 有 价值 的 学 习 资 料 ， 以 帮助 读者 进行 更 
深入 的 学 习 。 


那么 ， 你 准备 好 了 吗 ? 和 我 们 一 起 进入 Shader 的 世界 吧 ! 


第 2 章 ” 演 染 流水 线 


在 开始 一 切 学 习 之 前 ， 我 们 有 必要 了 解 什么 是 Shader， 即 痢 色 髓 。 
与 之 关系 非常 紧密 的 就 是 泻 染 流水 线 。 可 以 说 ， 如 果 你 没有 了 解 过 泻 
染 流 水 线 的 工作 流程 ， 残 水 远 无 法 说 目 己 对 Shader 已 经 入 1]。 


渲染 流水 线 的 最 终日 的 在 于 生成 或 者 说 是 泻 染 一 张 二 维 纹 理 ， 即 
我 们 在 电脑 屏幕 上 看 到 的 所 有 效果 。 它 的 输入 是 一 个 虚拟 摄像 机 、 一 
些 光 源 、 一 些 Shader 以 及 纹理 等 。 


本 半 将 会 给 出 泻 染 流水 线 的 概 哎 ， 同 时 会 尽量 避免 数学 上 的 计 
算 ， 而 仅仅 提供 一 些 全 局 上 的 描述 。 本 书 给 出 的 流水 线 不 仅 适 用 于 
Unity 平 台 ， 如 末 读 者 想 要 深入 了 解 并 学 习 闭 色 絮 的话， 会 发 现下 面 的 
内 容 同 样 是 非常 重要 和 有 价值 的 。 


2.1 综述 


要 学 会 脏 么 使 用 Shader， 我 们 自 先 要 了 解 Shader 是 怎么 工作 的 。 实 
际 上 ，Shader 仅 仅 古 泻 梁 流水线 中 的 一 个 环 记 ， 想 要 让 我 们 的 Shader 发 
挥 出 它 的 作用 ， 我 们 就 需要 知道 它 在 泻 染 流水 线 中 扮演 了 怎样 的 角 
色 。 而 本 市 会 给 出 位 化 后 的 痊 染 流水 线 的 工作 流程 。 


2.1.1 什么 是 流水 线 


我 们 先 来 看 一 下 真实 生活 中 的 流水 线 是 什么 。 在 工业 上 ， 流 水 线 
家 广泛 应 用 在 竣 配 线 上 。 


我 们 来 举 一 个 例子 。 假 设 ， 老 王 有 一 个 生产 洋娃娃 的 工厂 ， 一 个 
洋娃娃 的 生产 流程 可 以 分 为 4 个 步骤 : 第 1 步 ， 制 作 详 娃娃 的 绒 干 ， 第 2 
步 ， 缝 上 眼睛 和 路 巴 ;， 第 3 步 ， 添 加 头发 ;第 4 步 ， 给 洋娃娃 进行 最 后 
的 产品 包 狐 。 


在 流水 线 出 现 之 前 ， 只 有 在 每 个 洋娃娃 完成 了 所 有 这 4 个 工序 后 才 
能 开始 制作 下 一 个 洋娃娃 。 如 果 说 每 个 步骤 需要 的 时 间 是 1 小 时 的 话 ， 
那么 每 4 个 小 时 才能 生产 一 个 详 娃娃 。 


但 后 来 人 们 发 现 了 一 个 更 加 有 效 的 方法 ， 即 使 用 流水 线 。 老 王 把 
流水 线 引 入 工厂 之 后 ， 工 三 发 生 了 很 大 的 变化 。 虽 然 制作 一 个 详 娃娃 
仍然 需要 4 个 步骤 ， 但 不 需要 从 头 到 尾 完成 全 部 步骤 ， 而 是 每 个 步 又 由 
专人 来 完成 ， 所 有 步骤 并 行进 行 。 也 吕 是 说 ， 当 工序 1 完成 了 制作 胱 干 
的 任务 并 把 其 交 给 工序 2 时 ， 工 序 1 又 开始 进行 下 一 个 洋娃娃 的 制作 
了 。 


使 用 流水 线 的 好 处 在 于 可 以 提高 单位 时 间 的 生产 量 。 在 洋娃娃 的 
例子 中 ， 使 用 了 流水 线 技术 后 每 1 个 小 时 就 可 以 生产 一 个 洋娃娃 。 图 2.1 
显示 了 使 用 流水 线 前 后 生产 效率 的 变化 。 


可 以 发 现 ， 流 水 线 系统 中 决定 最 后 生产 速度 的 是 最 慢 的 工序 所 需 
的 时 间 。 例 如 ， 如 果 生 产 洋 娃娃 的 第 二 道 工 序 需 要 的 是 两 个 小 时 ， 其 
他 工序 仍然 需要 1 个 小 时 的 话 ， 那 么 平均 每 两 个 小 时 才能 生产 出 一 个 洋 
娃娃 。 即 工序 2 是 性 能 的 瓶颈 (bottleneck) 。 


理想 情况 下 ， 如 果 把 一 个 非 流水 线 系统 分 成 mn 个 流水 线 阶 段 ， 且 每 
个 阶段 耗费 时 间 相 同 的 话 ， 会 使 整个 系统 得 到 n 倍 的 速度 提升 。 


没有 使 用 流水 线 使 用 流水 线 
工序 2 ”工序 3 工序 2 ”工序 3 工序 4 


和 图 2.1 真实 生活 中 的 流水 线 
2.1.2 ”什么 是 演 染 流水 线 


上 面 的 关于 流水 线 的 概念 同样 适用 于 计算 机 的 图 像 演 染 中 。 演 染 
流水 线 的 工作 任务 在 于 由 一 个 三 维 场景 出 发 、 生 成 (或 者 说 泻 染 ) 一 
张 二 维 图 像 。 换 句 话说 ， 计 算 机 需要 从 一 系列 的 顶点 数据 、 纹 理 等 信 
息 出 发 ， 把 这 些 信息 最 终 转换 成 一 张 人 眼 可 以 看 到 的 图 像 。 而 这 个 工 
作 通 常 是 由 CPU 和 GPU 共同 完成 的 。 


《Real-Time Rendering, Third Edition》D 一 书 中 将 一 个 浑 染 流程 分 
成 3 个 阶段 ， 应 用 阶段 (Application Stage) 、 几 何 阶段 《Geometry 
Stage) 、 光 要 化 阶段 (Rasterizer Stage) 9 


注意 ， 这 里 仅仅 是 概念 性 阶段 ， 每 个 阶段 本 身 通 向 也 是 一 个 流水 


线 系 统 ， 即 包含 了 子 流水 线 阶 段 。 图 2.2 显 示 了 3 个 概念 阶段 之 间 的 联 
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图 2.2 ” 演 染 流水 线 中 的 3 个 概念 阶段 


> 


。 应 用 阶段 


从 名 字 我 们 可 以 看 出 ， 这 个 阶段 是 由 我 们 的 应 用 主导 的 ， 因 此 通 
常 由 CPU 人 负责 实现 。 换 句 话 说 ， 我 们 这 些 开发 者 具有 这 个 阶段 的 绝对 
控制 权 。 


在 这 一 阶段 中 ， 开 发 者 有 3 个 主要 任务 ， 首 先 ， 我 们 需要 准备 好 场 
景 数据 ， 例 如 摄像 机 的 位 置 、 视 锥 体 、 场 景 中 包含 了 哪些 模型 、 使 用 
了 哪些 光源 等 等 ， 其 次 ， 为 了 提高 泻 染 性 能 ， 我 们 往往 需要 做 一 个 粗 
粒度 剔除 (culling) 工作 ， 以 把 那些 不 可 见 的 物体 剔除 出 去 ， 这 样 束 不 


需要 再 移交 给 几何 阶段 进行 处 理 ;， 最后， 我 们 需要 设置 好 每 个 模型 的 

泻 染 状态 。 这 些 泻 染 状 态 包括 但 不 限于 它 使 用 的 材质 〈 漫 反射 颜色 、 

高 光 反 射 颜色 ) 、 使 用 的 纹理 、 使 用 的 Shader 等 。 这 一 阶段 最 重要 的 输 
出 是 泻 染 所 需 的 几何 信息 ， 即 泻 染 图 元 (rendering primitives) 。 通 俗 
来 讲 ， 演 染 图 元 可 以 是 点 、 线 、 三 角 面 等 。 这 些 泻 染 图 元 将 会 被 传递 

给 下 一 个 阶段 一 一 儿 何 阶段 。 


由 于 是 由 开发 者 主导 这 一 阶段 ， 因 此 应 用 阶段 的 流水 线 化 是 由 开 
发 者 决定 的 。 这 不 在 本 书 的 范畴 内 ， 有 兴趣 的 读者 可 以 参考 本 章 的 扩 
展 阅 读 部 分 。 


。 几何 阶段 


几何 阶段 用 于 处 理 所 有 和 我 们 要 绘制 的 几何 相关 的 事情 。 例 如 ， 
决定 需要 绘制 的 图 元 是 什么 ， 怎 样 绘制 它们 ， 在 哪里 绘制 它们 。 这 一 
阶段 通常 在 GPU 上 进行 。 


几何 阶段 负责 和 每 个 泻 染 图 元 打交道 ， 进 行 有 未 顶点 、 逐 多 边 形 的 
操作 。 这 个 阶段 可 以 进一步 分 成 更 小 的 流水 线 阶段 ， 这 在 下 一 章 中 会 
讲 到 。 几 何 阶段 的 一 个 重要 任务 殊 是 把 顶点 坐标 变换 到 屏幕 空间 中 ， 
再 交 给 光栅 此 进行 处 理 。 通 过 对 输入 的 痊 染 图 元 进行 多 步 处 理 后 ， 这 
一 阶段 将 会 输出 屏幕 空间 的 二 维 顶点 坐标 、 每 个 顶点 对 应 的 深度 值 、 
着 色 等 相关 信息 ， 并 传递 给 下 一 个 阶段 。 


。 光栅 化 阶段 


这 一 阶段 将 会 使 用 上 个 阶段 传递 的 数据 来 产生 屏幕 上 的 像素 ， 并 
泻 染 出 最 终 的 网 像 。 这 一 阶段 也 生 在 GPU 上 运行 。 光 栅 化 的 任务 主要 


古 决定 每 个 泻 染 图 元 中 的 哪些 像素 应 该 被 绘制 在 屏幕 上 。 它 需要 对 上 
一 个 阶段 得 到 的 了 逐 顶点 数据 (例如 纹理 坐标 、 顶 点 颜色 等 进行 插 
值 ， 然 后 再 进行 逐 像 素 处 理 。 


和 上 一 个 阶段 类 似 ， 光 概 化 阶段 也 可 以 分 成 更 小 的 流水 线 阶段 。 


读者 需要 把 上 面 的 3 个 流水 线 阶段 和 我 们 将 要 讲 到 的 GPU 流水 线 阶段 区 
分 开 来 。 这 里 的 流水 线 均 是 概念 流水 线 ， 是 我 们 为 了 给 一 个 演 染 流程 进行 
基本 的 功能 划分 而 提出 来 的 。 下 面 要 介绍 的 GPU 流水 线 ， 则 是 硬件 真正 用 
于 实现 上 述 概念 的 流水 线 。 


2.2 CPU 和 GPU 之 间 的 通信 


演 染 流水 线 的 起 点 是 CPU， 即 应 用 阶段 。 应 用 阶段 大 致 可 分 为 下 
面 3 个 阶段 : 


(1) 把 数据 加 载 到 显存 中 。 

(2) 设置 演 染 状态 。 

(3) 调用 Draw Call (在 本 章 的 最 后 我 们 还 会 继续 讨论 它 ) 。 
2.2.1 ”把 数据 加 载 到 显存 中 


所 有 演 染 所 需 的 数据 都 需要 从 硬盘 (Hard Disk Drive，HDD) 中 加 
载 到 系统 内 存 (Random Access Memory，RAM) 中 。 然 后 ， 网 格 和 纹 


理 等 数据 又 被 加 载 到 显卡 上 的 存储 空间 一 一 显存 (Video Random 
Access Memory，VRAM) 中 。 这 是 因为 ,显卡 对 于 显存 的 访问 速度 更 
快 ， 而 且 大 多 数 显 卡 对 于 RAM 没 有 直接 的 访问 权利 。 图 2.3 所 示 给 出 了 
这 样 一 个 例子 。 


和 图 2.3 浑 染 所 需 的 数据 (两 张 纹理 以 及 3 个 网 格 ) 从 硬盘 最 终 加 载 到 显存 中 。 在 演 染 时 ， 
GPU 可 以 快速 访问 这 些 数据 


需要 注意 的 是 ， 真 实 泻 染 中 需要 加 载 到 显存 中 的 数据 往往 比 图 2.3 
所 示 复 杂 许 多 。 例 如 ， 顶 点 的 位 置信 息 、 法 线 方向 、 顶 点 颜色 、 纹 理 
坐标 等 。 


当 把 数据 加 载 到 显存 中 后 ，RAM 中 的 数据 就 可 以 移 除 了 。 但 对 于 
一 些 数据 来 说 ，CPU 仍 然 需要 访问 它们 (例如 ， 我 们 希望 CPU 可 以 访 
问 网 格 数据 来 进行 碰撞 检测 ) ， 那 么 我 们 可 能 就 不 希望 这 些 数据 被 移 
除 ， 因 为 从 硬盘 加 载 到 RAM 的 过 程 是 十 分 耗 时 的 。 


在 这 之 后 ， 开 发 者 还 需要 通过 CPU 来 设置 泻 染 状态 ， 从 而 “ 指 
导 ?”GPU 如 何 进 行 泻 染 工作 。 


2.2.2 ”设置 演 染 状态 


什么 是 泻 染 状态 呢 ? 一 个 通俗 的 解释 就 是 ， 这 些 状 态 定 义 了 场景 
中 的 网 格 是 怎样 被 泻 染 的 。 例 如 ， 使 用 哪个 顶点 着 色 器 (Vertex 
Shader) / 片 元 着 色 器 (Fragment Shader) 、 光 源 属性 、 材 质 等 。 如 果 
我 们 没有 更 改 洽 染 状态 ， 那 么 所 有 的 网 格 都 将 使 用 同一 种 洽 染 状态 。 
图 2.4 显 示 了 当 使 用 同一 种 渔 染 状态 时 ， 泻 染 3 个 不 同 网 格 的 结 
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图 2.4 ”在 同一 状态 下 泻 染 3 个 网 格 。 由 于 没有 更 改 泻 染 状 态 ， 因 此 3 个 网 格 的 外 观看 起 来 像 
是 同一 种 材质 的 物体 


> 


在 准备 好 上 述 所 有 工作 后 ，CPU 就 需要 调用 一 个 渲染 命令 来 告诉 
GPU:“ 咖 ! 老兄 ， 我 都 帮 你 把 数据 准备 好 啦 ， 你 可 以 按照 我 的 设置 来 


开始 泻 染 啦 ! ”而 这 个 泻 染 命令 就 是 Draw Call 。 
2.2.3 ”调用 Draw Call 


相信 接触 过 渔 染 优 化 的 读者 应 该 都 昕 说 过 Draw Call。 实 际 上 ， 
Draw Call 束 是 一 个 命令 ， 它 的 发 起 方 是 CPU， 接 收 方 是 GPU。 这 个 命 
令 仅仅 会 指向 一 个 需要 被 泻 染 的 图 元 (primitives) 列表 ， 而 不 会 再 包 
伟 任 何 材 质 信息 一 一 这 是 因为 我 们 已 经 在 上 一 个 阶段 中 完成 了 ! 图 2.5 
形象 化 地 阐释 了 这 个 过 程 。 


当 给 定 了 一 个 Draw Call 时 ，GPU 就 会 根据 泻 染 状态 (例如 材质 、 
纹理 、 着 色 器 等 ) 和 所 有 输入 的 顶点 数据 来 进行 计算 ， 最 终 输 出 成 屏 
幕 上 显示 的 那些 漂亮 的 像素 。 而 这 个 计算 过 程 ， 就 是 我 们 下 一 节 要 讲 
的 GPU 流 水 线 。 


嘿 GPU, 演 染 
个 ! 


这 


图 2.5 ”CPU 通过 调用 Draw Call 来 告诉 GPU 开始 进行 一 个 演 染 过 程 。 一 个 Draw Call 会 指 癌 本 
次 调用 需要 演 染 的 图 元 列表 


2.3 GPU 流 水 线 


当 GPU 从 CPU 那 里 得 到 泻 染 命令 后 ， 束 会 进行 一 系列 流水 线 操 
作 ， 最 终 把 图 元 泻 染 到 屏幕 上 。 


> 


2.3.1 概述 

在 上 一 节 中 ， 我 们 解释 了 在 应 用 阶段 ，CPU 是 如 何 和 GPU 通 信 ， 
并 通过 调用 Draw Call 来 命令 GPU 进行 泻 染 。GPU 演 染 的 过 程 束 是 GPU 
流水 线 。 


对 于 概念 阶段 的 后 两 个 阶段 ， 即 几何 阶段 和 光栅 化 阶段 ， 开 发 者 
无 法 拥有 绝对 的 控制 权 ， 其 实现 的 载体 是 GPU。GPU 通 过 实现 流水 线 
化 ， 大 大 加 快 了 泻 染 速 度 。 虽 然 我 们 无 法 完全 控制 这 两 个 阶段 的 实现 
细 市 ， 但 GPU 同 开发 者 开放 了 很 多 控制 权 。 在 这 一 太 中 ， 我 们 将 具体 
了 解 GPU 是 如 何 实现 这 两 个 概念 阶段 的 。 


几何 阶段 和 光栅 化 阶段 可 以 分 成 者 干 更 小 的 流水 线 阶段 ， 这 些 流 
水 线 阶段 由 GPU 来 实现 ， 每 个 阶段 GPU 拓 供 了 不 同 的 可 配置 性 或 可 编 
程 性 。 图 2.6 中 展示 了 不 同 的 流水 线 阶段 以 及 它们 的 可 配置 性 或 可 编程 
I 


全 


图 2.6 ”GPU 的 泻 染 流 水 线 实 现 。 颜 色 表示 了 不 同 阶段 的 可 配置 性 或 可 编程 性 : 绿色 表示 该 
流水 线 阶段 是 完全 可 编程 控制 的 ， 黄 色 表 示 该 流水 线 阶段 可 以 配置 但 不 是 可 编程 的 ， 监 色 表 示 
该 流水 线 阶段 是 由 GPU 固定 实现 的 ， 开 发 者 没有 任何 控制 权 。 实 线 表示 该 Shader 必 须 由 开发 者 
编程 实现 ， 虚 线 表示 该 Shader 是 可 选 的 


从 图 中 可 以 看 出 ，GPU 的 泻 染 流水 线 接收 顶点 数据 作为 输入 。 这 
些 顶 点 数据 是 由 应 用 阶段 加 载 到 显存 中 ， 再 由 Draw Call 指 定 的 。 这 些 
数据 随后 被 传递 给 顶点 着 色 句 。 


顶点 着 色 器 (Vertex Shader) 是 完全 可 编程 的 ， 它 通常 用 于 实现 

顶点 的 空间 变换 、 顶 点 着 色 等 功能 。 曲 面 细 分 着 色 器 (Tessellation 
Shader) 是 一 个 可 选 的 着 色 器 ， 它 用 于 细 分 图 元 。 几 何 着 色 器 

(Geometry Shader) 同样 是 一 个 可 选 的 着 色 器 ， 它 可 以 被 用 于 执行 逐 
图 元 (Per-Primitive) 的 着 色 操 作 ， 或 者 被 用 于 产生 更 多 的 图 元 。 下 一 
个 流水 线 阶 段 是 裁剪 (Clipping) ， 这 一 阶段 的 目的 是 将 那些 不 在 摄像 
机 视野 内 的 顶点 裁 况 挥 ， 并 别 除 某 些 三 角 图 元 的 面 厂 。 这 个 阶段 是 可 
配置 的 。 例 如 ， 我 们 可 以 使 用 目 定 义 的 裁剪 平面 来 配置 裁 草 区 域 ， 也 
可 以 通过 指令 控制 裁剪 三 角 图 元 的 正面 还 是 背面 。 几 何 概念 阶段 的 最 
后 一 个 流水 线 阶 段 是 屏幕 映射 《Screen Mapping) 。 这 一 阶段 是 不 可 
配置 和 编程 的 ， 它 负责 把 每 个 图 元 的 坐标 转换 到 屏幕 坐标 系 中 。 


光栅 化 概念 阶段 中 的 三 角形 设置 (Triangle Setup) 和 三 角形 遍历 
(Triangle Traversal) 阶段 也 都 是 固定 函数 (Fixed-Function) 的 阶 
段 。 接 下 来 的 片 元 着 色 器 (Fragment Shader) ， 则 是 完全 可 编程 的 ， 
它 用 于 实现 逐 片 元 (Per-Fragment) 的 着 色 操 作 。 最 后 ， 逐 片 元 操作 
(Per-Fragment Operations) 阶段 负责 执行 很 多 重要 的 操作 ， 例 如 修 
改 颜色 、 深 度 缓冲 、 进 行 混合 等 ， 它 不 是 可 编程 的 ， 但 具有 很 高 的 可 
配置 性 。 


接 下 来 ， 我 们 会 对 其 中 主要 的 流水 线 阶段 进行 更 加 详细 的 解释 。 
2.3.2 ”顶点 着 色 器 


顶点 着 色 器 (Vertex Shader) 是 流水 线 的 第 一 个 阶段 ， 它 的 输入 
来 目 于 CPU。 顶 点 着 色 恬 的 处 理 单位 是 顶点 ， 也 了 束 是 说 ， 输 入 进来 的 
每 个 顶点 都 会 调用 一 次 顶点 着 色 老 。 顶 点 着 色 丹 本 刁 不 可 以 创建 或 者 


销毁 任何 顶点 ， 而 且 无 法 得 到 顶点 与 顶点 之 间 的 天 系 。 例 如 ， 我 们 无 
法 得 知 两 个 顶点 是 否 属于 同一 个 三 角 网 格 。 但 正 是 因为 这 样 的 相互 独 
立 性 ，GPU 可 以 利用 本 身 的 特性 并 行 化 处 理 每 一 个 顶点 ， 这 意味 着 这 
一 阶段 的 处 理 速度 会 很 快 。 


顶点 着 色 圳 需要 完成 的 工作 主要 有 : 坐标 变换 和 逐 顶 点 光照 。 当 
然 ， 除 了 这 两 个 主要 任务 外 ， 顶 点 着 色 器 还 可 以 输出 后 续 阶段 所 需 的 
数据 。 图 2.7 展 示 了 在 顶点 着 色 剧 中 对 顶点 位 置 进行 耸 标 变换 并 计算 顶 
点 颜色 的 过 程 。 


A 图 2.7 ”GPU 在 每 个 输入 的 网 格 顶点 上 都 会 调用 顶点 着 色 器 。 顶 点 着 色 器 必须 进行 顶点 的 从 
标 变换 ， 需 要 时 还 可 以 计算 和 输出 顶点 的 颜色 。 例 如 ， 我 们 可 能 需要 进行 逐 顶 点 的 光照 


。 坐标 变换 。 顾 名 思 义 ， 就 是 对 顶点 的 坐标 《即位 置 ) 进行 某 种 变 
换 。 顶 点 着 色 器 可 以 在 这 一 步 中 改变 顶点 的 位 置 ， 这 在 顶点 动画 
中 是 非 第 有 用 的 。 例 如 ， 我 们 可 以 通过 改变 顶点 位 置 来 模拟 水 
面 、 布 料 等。 但 需要 注意 的 是 ， 无 论 我 们 在 顶点 着 色 器 中 怎样 改 
变 顶 点 的 位 置 ， 一 个 最 基本 的 顶点 着 色 器 必须 完成 的 一 个 工作 


是 ， 把 顶点 坐标 从 模型 空间 转换 到 齐 次 裁剪 空间 。 想 想 看 ， 我 们 
在 顶点 着 色 器 中 是 不 是 会 看 到 类 似 下 面 的 代码 : 


0.pos = mul(UNITY_MVP, v.position); 


类 似 上 面 这 名 代码 的 功能 ， 就 是 把 顶点 坐标 转换 到 齐 次 裁剪 坐标 

系 下 ， 接 着 通常 再 由 硬件 做 透视 除法 后 ， 最 终 得 到 归 一 化 的 设备 坐标 

(Normalized Device Coordinates ，NDC) 。 具 体 数 学 上 的 实现 细节 我 
们 会 在 第 4 章 中 讲 到 。 图 2.8 展 示 了 这 样 的 一 个 转换 过 程 。 


转换 到 齐 次 裁剪 坐标 系 下 


(-1,-1,-1) 


> 


图 2.8 ”顶点 着 色 器 会 将 模型 顶点 的 位 置 变换 到 齐 次 裁剪 坐标 空间 下 ， 进行 输出 
做 透视 除法 得 到 NDC 下 的 坐标 


mh 
-Hn 


了 由 硬件 


需要 注意 的 是 ， 图 2.8 给 出 的 坐标 范围 是 OpenGL 同 时 也 是 Unity 使 
用 的 NDC， 它 的 z 分 量 范围 在 [-1, 1] 之 间 ， 而 在 DirectX 中 ，NDC 的 z 分 
量 范 围 是 [0, 1]。 顶 点 着 色 器 可 以 有 不 同 的 输出 方式 。 最 常见 的 输出 路 
径 是 经 光栅 化 后 交 给 片 元 着 色 器 进行 处 理 。 而 在 现代 的 Shader Model 
中 ， 它 还 可 以 把 数据 发 送 给 曲面 细 分 着 色 器 或 几何 着 色 器 ， 感 兴趣 的 
读者 可 以 自行 了 解 。 


2.3.3 “裁剪 


由 于 我 们 的 场景 可 能 会 很 大 ， 而 摄像 机 的 视野 范围 很 有 可 能 不 会 
覆盖 所 有 的 场景 物体 ， 一 个 很 自然 的 想法 束 是 ， 那 些 不 在 摄像 机 视野 
范围 的 物体 不 需要 被 处 理 。 而 裁剪 (Clipping) 就 是 为 了 完成 这 个 目的 
而 被 提出 来 的 。 


一 个 图 元 和 摄像 机 视野 的 关系 有 3 种 : 完全 在 视野 内 、 部 分 在 视野 
内 、 完 全 在 视野 外 。 完 全 在 视野 内 的 图 元 惑 继续 传递 给 下 一 个 流水 线 
阶段 ， 完 全 在 视野 外 的 图 元 不 会 继续 向 下 传递 ， 因 为 它们 不 需要 被 演 
染 。 而 那些 部 分 在 视野 内 的 图 元 需要 进行 一 个 处 理 ， 这 就 是 裁剪 。 例 
如 ， 一 条 线段 的 一 个 项 扣 在 视野 内 ， 而 为 一 个 顶点 不 在 视野 内 ， 那 么 
在 视野 外 部 的 顶点 应 该 使 用 一 个 新 的 顶点 来 代替 ， 这 个 新 的 顶点 位 于 
这 条 线段 和 视野 边界 的 交点 处 。 


由 于 我 们 已 知 在 NDC 下 的 顶点 位 置 ， 即 顶点 位 置 在 一 个 立方 体 
内 ， 因 此 裁剪 束 变 得 很 简单 : 只 需要 将 图 元 裁 级 到 单位 立方 体内 。 图 
2.9 展 示 了 这 样 的 一 个 过 程 。 


新 的 顶点 


(-1,-1,-1) 


图 2.9 只 有 在 单位 立方 体 的 图 元 才 需 要 被 继续 处 理 。 因 此 ， 完 全 在 单位 立方 体外 部 的 图 元 
红色 三 角形 ) 被 舍弃 ， 完 全 在 单位 立方 体内 部 的 图 元 (绿色 三 角形 ) 将 被 保留 。 和 单位 立方 
体 相交 的 图 元 (黄色 三 角形 ) 会 被 裁剪 ， 新 的 顶点 会 被 生成 ， 原 来 在 外 部 的 顶点 会 被 舍弃 


全 


-一 、 


和 顶点 看 色 厦 不 同 ， 这 一 步 古 不 可 编程 的 ， 即 我 们 无 法 通过 编程 
来 控制 裁 盘 的 过 程 ， 而 是 硬件 上 的 固定 操作 ， 但 我 们 可 以 目 定 义 一 个 
裁 甬 操 作 来 对 这 一 步 进行 配置 。 


2.3.4 ”屏幕 映射 


这 一 步 输入 的 坐标 仍然 是 三 维 坐标 系 下 的 坐标 〈 范 围 在 单位 立方 
体内 ) 。 屏 幕 映射 (Screen Mapping) 的 任务 是 把 每 个 图 元 的 x 和 y 坐 
标 转换 到 屏幕 坐标 系 (Screen Coordinates) 下 。 屏 幕 坐 标 系 是 一 个 二 
维 坐 标 系 ， 它 和 我 们 用 于 显示 画面 的 分 辨 紊 有 很 大 天 系 。 


假设 ,我们 需要 把 场景 演 染 到 一 个 窗口 上 ， 窗 口 的 范围 是 从 最 小 
的 窗口 坐标 (x1,y1) 到 最 大 的 窗口 华 标 (x5,y,)， 其 中 x1< xs 且 y1<y，。 由 于 
我 们 输入 的 坐标 范围 在 -1 到 1， 因 此 可 以 想象 到 ， 这 个 过 程 实际 是 一 个 
缩放 的 过 程 ， 如 图 2.10 所 示 。 你 可 能 会 同 ， 那 么 输入 的 z 坐 标 会 怎么 样 
呢 ? 屏幕 映射 不 会 对 输入 的 z 坐 标 做 任何 处 理 。 实 际 上 ， 屏 幕 坐标 系 和 z 
坐标 一 起 构成 了 一 个 坐标 系 ， 叫 做 窗口 坐标 系 (Window 
Coordinates) 。 这 些 值 会 一 起 被 传递 到 光栅 化 阶段 。 
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A 图 2.10 
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屏幕 4 


(x2， y2) 


E 标 系 中 


屏幕 映射 得 到 的 屏幕 坐标 决定 了 这 个 顶点 对 应 屏幕 上 哪个 像素 以 
及 距离 这 个 像素 有 多 远 。 

有 一 个 需要 引起 注意 的 地 方 是 ， 屏 幕 坐标 系 在 OpenGL 和 DirectX 之 
间 的 差异 问题 。OpenGL 把 屏幕 的 左下 角 当 成 最 小 的 窗口 坐标 值 ， 而 
DirectX 则 定义 了 屏幕 的 左上 角 为 最 小 的 窗口 坐标 值 。 图 2.11 显 示 了 这 
样 的 差异 。 


(512, 512) (0, 0) 


(0, 0) (512, 512) 


OpenGL DirectX 


A 图 2.11 OpenGL 和 DirectX 的 屏幕 坐标 系 差 异 。 对 于 一 张 512*512 大 小 的 图 像 ， 在 OpenGL 中 
其 (0, 0) 点 在 左下 角 ， 而 在 DirectX 中 其 (0, 0) 点 在 左上 角 


产生 这 种 差异 的 原因 是 ， 微 软 的 窗口 都 使 用 了 这 样 的 坐标 系统 ， 
因为 这 和 我 们 的 阅读 方式 是 一 致 的 ;从 左 到 右 、 从 上 到 下 ， 并 且 很 多 
图 像 文 件 也 是 按照 这 样 的 格式 进行 存储 的 。 


不 管 原因 如 何 ， 寻 异 束 这 么 造成 了 。 留 给 我 们 开发 者 的 束 是 ， 要 
时 刻 小 心 这 样 的 差异 ， 如 果 你 发 现 得 到 的 图 像 是 倒转 的 ， 那 么 很 有 可 
能 束 是 这 个 原因 造成 的 。 


2.3.5 三 角形 设置 


由 这 一 步 开 始 束 进入 了 光栅 化 阶段 。 从 上 一 个 阶段 输出 的 信息 是 
屏幕 坐标 系 下 的 顶点 位 置 以 及 和 它们 相关 的 额外 信息 ， 如 深度 值 〈z 坐 
标 ) 、 法 线 方向 、 视 角 方向 等 。 光 栅 化 阶段 有 两 个 最 重要 的 目标 : 计 
算 每 个 图 元 窗 过 了 哪些 像素 ， 以 及 为 这 些 像 聚 计算 它们 的 颜色 。 


光栅 化 的 第 一 个 流水 线 阶 段 是 三 角形 设置 (Triangle Setup) 。 这 
个 阶段 会 计算 光栅 化 一 个 三 角 网 格 所 需 的 信息 。 有 具体 来 说 ， 上 一 个 阶 
段 输 出 的 都 是 三 角 网 格 的 顶点 ， 即 我 们 得 到 的 是 三 角 网 格 每 条 边 的 两 
个 端点 。 但 如 果 要 得 到 整个 三 角 网 格 对 像素 的 履 盖 情况 ， 我 们 就 必须 
计算 每 条 边 上 的 像素 坐标 。 为 了 能 够 计算 边界 像素 的 坐标 信息 ， 我 们 
束 需 要 得 到 三 角形 边界 的 表示 方式 。 这 样 一 个 计算 三 角 网 格 表示 数据 
的 过 程 就 叫做 三 角形 设置 。 它 的 输出 是 为 了 给 下 一 个 阶段 做 准备 。 


2.3.6 ”三 角形 遍历 


三 角形 遍历 (Triangle Traversal) 阶段 将 会 检查 每 个 像素 是 否 被 
一 个 三 角 网 格 所 履 盖 。 如 果 被 覆盖 的 话 ， 就 会 生成 一 个 片 元 
(fragment) 。 而 这 样 一 个 找到 哪些 像素 被 三 角 网 格 履 盖 的 过 程 就 是 
三 角形 遍历 ， 这 个 阶段 也 被 称 为 扫描 变换 (Scan Conversion) 。 


三 角形 遍历 阶段 会 根据 上 一 个 阶段 的 计算 结 采 来 判断 一 个 三 角 网 
格 履 过 了 哪些 像 隶 ， 并 使 用 三 角 网 格 3 个 顶点 的 顶点 信息 对 整个 获 凋 区 
域 的 像素 进行 插值 。 图 2.12 展 示 了 三 角形 抽 历 阶段 的 人 简化 计算 过 程 。 
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和 图 2.12 三 角形 损 历 的 过 程 。 根 据 几 何 阶段 输出 的 顶点 信息 ， 最 终 得 到 该 三 角 网 格 履 盖 的 像 
素 位 置 。 对 应 像素 会 生成 一 个 片 元 ， 而 片 元 中 的 状态 是 对 3 个 顶点 的 信息 进行 插值 得 到 的 。 例 
如 ， 对 图 2.12 中 3 个 顶点 的 深度 进行 插值 得 到 其 重心 位 置 对 应 的 片 元 的 深度 值 为 -10.0 


这 一 步 的 输出 就 是 得 到 一 个 片 元 序列 。 和 需要 注意 的 是 ， 一 个 厂 元 
并 不 是 真正 意义 上 的 像素 ， 而 是 包含 了 很 多 状态 的 集合 ， 这 些 状态 用 
于 计算 每 个 像素 的 最 终 颜 色 。 这 些 状 态 包 括 了 (但 不 限于 ) 它 的 屏幕 
坐标 、 深 度 信息 ， 以 及 其 他 从 几何 阶段 输出 的 顶点 信息 ， 例 如 法 线 、 
纹理 坐标 等 。 


2.3.7 “ 片 元 着 色 器 


片 元 着 色 器 (Fragment Shader) 是 另 一 个 非常 重要 的 可 编程 着 色 
器 阶段 。 在 DirectX 中 ， 片 元 着 色 器 被 称 为 像素 着 色 器 (Pixel 
Shader) ， 但 片 元 着 色 器 是 一 个 更 合适 的 名 字 ， 因 为 此 时 的 片 元 并 不 
是 一 个 真正 意义 上 的 像素 。 


前 面 的 光栅 化 阶段 实际 上 并 不 会 影响 屏幕 上 每 个 像素 的 颜色 值 ， 
而 是 会 产生 一 系列 的 数据 信息 ， 用 来 表述 一 个 三 角 网 格 是 怎样 覆盖 每 
个 像素 的 。 而 每 个 片 元 就 负责 存储 这 样 一 系列 数据 。 真 正 会 对 像素 产 
影响 的 阶段 是 下 一 个 流水 线 阶段 一 一 逐 片 元 操作 (Per-Fragment 
Operations) 。 我 们 随后 就 会 讲 到 。 


片 元 着 色 器 的 输入 是 上 一 个 阶段 对 顶点 信息 插值 得 到 的 结果 ， 更 
具体 来 说 ， 是 根据 那些 从 顶点 着 色 右 中 输出 的 数据 插值 得 到 的 。 而 它 
的 输出 是 一 个 或 者 多 个 颜色 值 。 图 2.13 显 示 了 这 样 一 个 过 程 。 


这 一 阶段 可 以 完成 很 多 重要 的 泻 染 技术 ， 其 中 最 重要 的 技术 之 一 
就 是 纹理 采样 。 为 了 在 片 元 着 色 器 中 进行 纹理 采样 ， 我 们 通常 会 在 顶 
点 着 色 器 阶段 输出 每 个 顶点 对 应 的 纹理 坐标 ， 然 后 经 过 光栅 化 阶段 对 
三 角 网 格 的 3 个 顶点 对 应 的 纹理 坐标 进行 插值 后 ， 束 可 以 得 到 其 覆盖 的 
片 元 的 纹理 坐标 了 。 


4 图 2.13 根据 上 一 步 播 值 后 的 片 元 信息 ， 片 元 着 色 器 计算 该 片 元 的 输出 颜色 


虽然 片 元 着 色 器 可 以 完成 很 多 重要 效果 ， 但 它 的 局 限 在 于 ， 它 仅 
可 以 影响 单个 斤 元 。 也 吏 是 说 ， 当 执行 片 元 寿 色 圳 时 ， 它 不 可 以 将 目 
己 的 任何 结 采 直接 发 送 给 它 的 邻居 们 。 有 一 个 情况 例外 ， 束 是 斤 元 着 
色 器 可 以 访问 到 导数 信息 (gradient， 或 者 说 是 derivative) 。 有 兴趣 的 
读者 可 以 参考 本 章 的 扩展 阅读 部 分 。 


2.3.8 ”了 逐 片 元 操作 


终于 到 了 演 染 流水 线 的 最 后 一 步 。 逐 片 元 操作 (Per-Fragment 
Operations) 是 OpenGL 中 的 说 法 ， 在 DirectX 中 ， 这 一 阶段 被 称 为 输出 
合并 阶段 (Output-Merger) 。Merger 这 个 词 可 能 更 容易 让 读者 明白 这 
一 步骤 的 目的 : 合并 。 而 OpenGL 中 的 名 字 可 以 让 读者 明日 这 个 阶段 的 
操作 单位 ， 即 是 对 每 一 个 请 元 进行 一 些 操作 。 那 么 问题 来 了 ， 要 合并 
哪些 数据 ? 又 要 进行 哪些 操作 呢 ? 


这 一 阶段 有 几 个 主要 任务 。 


(1) 决定 每 个 片 元 的 可 见 性 。 这 涉及 了 很 多 测试 工作 ， 例 如 深度 
测试 、 模 板 测 试 等 。 


(2) 如 果 一 个 片 元 通过 了 所 有 的 测试 ， 就 需要 把 这 个 片 元 的 颜色 
值 和 已 经 存储 在 颜色 缓冲 区 中 的 颜色 进行 合并 ， 或 者 说 旦 混合 。 


需要 指明 的 是 ， 逐 片 元 操作 阶段 是 高 度 可 配置 性 的 ， 即 我 们 可 以 
设置 每 一 步 的 操作 细节 。 这 在 后 面 会 讲 到 。 


这 个 阶段 首先 需要 解决 每 个 片 元 的 可 见 性 问题 。 这 需要 进行 一 系 
列 测试 。 这 束 好 比 考试 ， 一 个 片 元 只 有 通过 了 所 有 的 考试 ， 才 能 最 终 
获得 和 GPU 谈 判 的 资格 ， 这 个 资格 指 的 是 它 可 以 和 颜色 绥 冲 区 进行 合 
并 。 如 果 它 没有 通过 其 中 的 某 一 个 测试 ， 那 么 对 不 起 ， 之 前 为 了 产生 
这 个 片 元 所 做 的 所 有 工作 都 是 白费 的 ， 因 为 这 个 片 元 会 被 舍弃 掉 。 
Poor fragment! 网 2.14 给 出 了 人 徐 化 后 的 逐 片 元 操作 所 做 的 操作 。 


图 2.14 ” 逐 片 元 操作 阶段 所 做 的 操作 。 只 有 通过 了 所 有 的 测试 后 ， 痢 生成 的 片 元 才能 和 颜色 
缓冲 区 中 已 经 存在 的 像素 闫 色 进行 混合 ， 最 后 再 写 入 闫 色 绥 冲 区 中 


> 


测试 的 过 程 实 际 上 是 个 比较 复杂 的 过 程 ， 而 且 不 同 的 图 形 接 口 
(例如 OpenGL 和 DirectX) 的 实现 细节 也 不 尽 相 同 。 这 里 给 出 两 个 最 基 
本 的 测试 一 一 深度 测试 和 模板 测试 的 实现 过 程 。 能 否 理解 这 些 测试 过 
程 将 关乎 读者 是 否 可 以 理解 本 书后 面 草 节 中 提 到 的 演 染 队列 ， 尤 其 是 
处 理 透明 效果 时 出 现 的 问题 。 图 2.15 给 出 了 深度 测试 和 模板 测试 的 简化 
流程 图 。 


开始 深度 测试 


开始 模板 测试 


模板 测试 结束 


深度 测试 结束 


图 2.15 ”模板 测试 和 深度 测试 的 简化 流程 图 


p> 


我 们 先 来 看 模板 测试 (Stencil Test) 。 与 之 相关 的 是 模板 缓冲 
(Stencil Buffer) 。 实 际 上 ， 模 板 绥 冲 和 我 们 经 常 听 到 的 颜色 缓冲 、 深 
度 缓冲 几乎 是 一 类 东西 。 如 有 果 开 启 了 模板 测试 ，GPU 会 首先 读 取 (使 
用 读 取 掩 码 ) 模板 绥 冲 区 中 该 片 元 位 置 的 模板 值 ， 然 后 将 该 值 和 读 取 


(使 用 读 取 掩 码 ) 到 的 参考 值 (reference value) 进行 比较 ， 这 个 比较 
函数 可 以 是 由 开发 者 指定 的 ， 例 如 小 于 时 舍弃 该 片 元 ， 或 者 大 于 等 于 
时 舍弃 该 片 元 。 如 果 这 个 片 元 没有 通过 这 个 测试 ， 该 片 元 就 会 被 铭 

充 。 不 管 一 个 片 元 有 没有 通过 模板 测试 ， 我 们 都 可 以 根据 模板 测试 和 
下 面 的 深度 测试 结果 来 修改 模板 绥 冲 区 ， 这 个 修改 操作 也 是 由 开发 者 
指定 的 。 开 发 者 可 以 设置 不 同 结果 下 的 修改 操作 ， 例 如 ， 在 失败 时 模 
板 缓 冲 区 你 持 不 变 ， 通 过 时 将 模板 缓冲 区 中 对 应 位 置 的 值 加 1 等 。 模 板 
测试 通常 用 于 限制 泻 染 的 区 域 。 男 外 ， 模 板 测 试 还 有 一 些 更 高 级 的 用 


法 ， 如 泻 染 阴影 、 轮 廓 浑 染 等 。 


如 有 条 一 个 片 元 笠 运 地 通过 了 模板 测试 ， 那 么 它 会 进行 下 一 个 测试 
一 一 深度 测试 (Depth Test) 。 相 信 很 多 读者 都 听 到 过 这 个 测试 。 这 个 
测试 同样 是 可 以 高 度 配 置 的 。 如 果 开局 了 深度 测试 ，GPU 会 把 该 片 元 
的 深度 值 和 已 经 存在 于 深度 缓冲 区 中 的 深度 值 进行 比较 。 这 个 比较 画 
数 也 是 可 由 开发 者 设置 的 ， 例 如 小 于 时 舍弃 该 片 元 ， 或 者 大 于 等 于 时 
舍弃 该 片 元 。 通 常 这 个 比较 函数 是 小 于 等 于 的 关系 ， 即 如 果 这 个 片 元 
的 深度 值 大 于 等 于 当前 深度 绥 促 区 中 的 值 ， 那 么 束 会 舍弃 它 。 这 是 因 
为 ， 我们 总 想 只 显示 出 离 摄 像 机 最 近 的 物体 ， 而 那些 被 其 他 物体 近 挡 
的 束 不 需要 出 现在 屏幕 上 。 如 果 这 个 片 元 没有 通过 这 个 测试 ， 该 片 元 
就 会 被 舍弃 。 和 模板 测试 有 些 不 同 的 是 ， 如 果 一 个 片 元 没有 通过 深度 
测试 ， 它 就 没有 权利 更 改 深度 绥 促 区 中 的 值 。 而 如 果 它 通过 了 测试 ， 
开发 者 还 可 以 指定 是 否 要 用 这 个 片 元 的 深度 值 履 盖 掉 原 有 的 深度 值 ， 
这 是 通过 开启 /关闭 深度 写 入 来 做 到 的 。 我 们 在 后 面 的 学 习 中 会 发 现 ， 
透明 效果 和 深度 测试 以 及 深度 写 入 的 关系 非常 密切 。 


如 果 一 个 幸运 的 斤 元 通过 了 上 面 的 所 有 测试 ， 它 就 可 以 自豪 地 来 
到 合并 功能 的 面前 。 


为 什么 需要 合并 ? 我 们 要 知道 ， 这 里 所 讨论 的 演 染 过 程 是 一 个 物 
体 接 着 一 个 物体 画 到 屏幕 上 的 。 而 每 个 像素 的 颜色 信息 被 存储 在 一 个 
名 为 普 色 绥 冲 的 地 方 。 因 此 ， 当 我 们 执行 这 次 泻 染 时 ， 颜 色 缓 冲 中 往 
往 已 经 有 了 上 次 渔 染 之 后 的 颜色 结果 ， 那 么 ， 我 们 是 使 用 这 次 痊 染 得 
到 的 颜色 完全 覆盖 掉 之 前 的 结 末 ， 还 古 进行 其 他 处 理 ? 这 了 就 是 合并 需 
要 解决 的 问题 。 


对 于 不 透明 物体 ， 开 发 者 可 以 关闭 混合 (Blend) 操作 。 这 样片 元 
着 色 右 计算 得 到 的 颜色 值 束 会 直接 窗 盖 挥 闫 色 绥 冲 区 中 的 像素 值 。 但 
对 于 半 透 明 物 体 ， 我 们 号 需要 使 用 混合 操作 来 让 这 个 物体 看 起 来 是 透 
明 的 。 图 2.16 展 示 了 一 个 简化 版 的 混合 操作 的 流程 图 。 


是 否 开启 了 混合 


a 得 到 目标 颜色 ， 即 已 
和 到 证 本 全 二 请 经 存在 于 颅 色 组 冲 区 


元 有 内 9 颜 


进行 混合 操作 


直接 使 用 该 片 元 的 
颜 


哈 
证 


更 新 颜色 缓冲 区 
中 的 值 


4 图 2.16 混合 操作 的 简化 流程 图 


从 流程 图 中 我 们 可 以 发 现 ， 混 合 操作 也 是 可 以 高 度 配置 的 : 开发 
者 可 以 选择 开局 /关闭 混合 功能 。 如 果 没 有 开局 混合 功能 ， 就 会 直接 使 
用 片 元 的 颜色 才 盖 掉 颜 色 缓冲 区 中 的 颜色 ， 而 这 也 是 很 多 初学 者 发 现 


无 法 得 到 透明 效果 的 原因 (没有 开启 混合 功能 ) 。 如 果 开 局 了 混合 ， 
GPU 会 取出 源 颜 色 和 目标 颜色 ， 将 两 种 颜色 进行 混合 。 源 颜色 指 的 是 
片 元 着 色 器 得 到 的 颜色 值 ， 而 目标 颜色 则 是 已 经 存在 于 颜色 缓冲 区 中 
的 颜色 值 。 之 后 ， 束 会 使 用 一 个 混合 函数 来 进行 寓 合 操作 。 这 个 混合 
函数 通常 和 透明 通道 息息相关 ， 例 如 根据 透明 通道 的 值 进行 相 加 、 相 
减 、 相 乘 等 。 混 合 很 像 Photoshop 中 对 图 层 的 操作 : 每 一 层 图 层 可 以 选 
择 混 合 模 式 ， 混 合 模式 决定 了 该 图 层 和 下 层 图 层 的 混合 结果， 而 我 们 
看 到 的 图 片 就 是 混合 后 的 图 片 。 


上 面 给 出 的 测试 顺序 并 不 是 唯一 的 ， 而 且 虽 然 从 逻辑 上 来 说 这 些 
测试 是 在 片 元 着 色 需 之 后 进行 的 ， 但 对 于 大 多 数 GPU 来 说 ， 它 们 会 尽 
可 能 在 执行 片 元 着 色 央 之 前 吏 进 行 这 些 测试 。 这 是 可 以 理解 的 ， 想 象 
一 下 ， 当 GPU 在 片 元 着 色 器 阶段 化 了 很 大 力气 终于 计算 出 片 元 的 颜色 
后 ， 却 发 现 这 个 片 元 根本 没有 通过 这 些 检 验 ， 也 束 古 说 这 个 片 元 还 是 
被 舍弃 了 ， 那 之 前 花费 的 计算 成 本 全 都 浪费 了 ! 图 2.17 给 出 了 这 样 一 个 
场景 。 


4 图 2.17 图 示 场 景 中 包含 了 两 个 对 象 ， 球 和 长 方 体 ， 绘 制 顺序 是 先 绘制 球 (在 屏幕 上 显示 为 
圆 ) ， 再 绘制 长 方 体 (在 屏幕 上 显示 为 长 方形 ) 。 如 果 深度 测试 在 片 元 着 色 器 之 后 执行 ， 那 么 
在 泻 染 长 方 体 时 ， 虽 然 它 的 大 部 分 区 域 都 税收 挡 在 球 的 后 面 ， 即 它 所 获 盖 的 绝 大 部 分 片 元 根本 
无 法 通过 深度 测试 ， 但 是 我 们 仍然 需要 对 这 些 片 元 执行 片 元 着 色 器 ， 造 成 了 很 大 的 性 能 浪费 


作为 一 个 想 充 分 提高 性 能 的 GPU， 它 会 希望 尽 可 能 早 地 知道 哪些 
片 元 是 会 被 舍弃 的 ， 对 于 这 些 片 元 整 不 需要 再 使 用 片 元 着 色 器 来 计算 
它们 的 颜色 。 在 Unity 给 出 的 泻 染 流水 线 中 ， 我 们 也 可 以 发 现 它 给 出 的 
深度 测试 是 在 片 元 着 色 屁 之 前 。 这 种 将 深度 测试 提前 执行 的 技术 通常 
也 被 称 为 Early-Z 技 术 。 项 望 读 者 看 到 这 里 时 不 会 因此 感到 困惑 。 在 本 
书后 面 的 章节 中 ， 我 们 还 会 继续 讨论 这 个 问题 。 


但 是 ， 如 采 将 这 些 测 试 提前 的 话 ， 其 检验 结 采 可 能 会 写 片 元 看 色 
器 中 的 一 些 操 作 冲 突 。 例 如 ， 如 有 果 我 们 在 片 元 着 色 器 进行 了 透明 度 测 
试 (我 们 将 在 8.3 节 中 具体 讲 到 ) ， 而 这 个 请 元 没有 通过 透明 度 测试 ， 
我 们 会 在 着 色 器 中 调用 API (例如 clip 范 数 ) 来 手动 将 其 舍弃 掉 。 这 就 
导致 GPU 无 法 提前 执行 各 种 测试 。 因 此 ， 现 代 的 GPU 会 判断 片 元 着 色 
亏 中 的 操作 是 否 和 提前 测试 发 生 冲 突 ， 如 采 有 冲突 ， 束 会 茶 用 提前 测 
试 。 但 是 ， 这 样 也 会 造成 性 能 上 的 下 降 ， 因 为 有 更 多 片 元 需要 被 处 理 
了 。 这 也 是 透明 度 测 试 会 导致 性 能 下 降 的 原因 。 


当 模型 的 图 元 经 过 了 上 面 层 层 计算 和 测试 后 ， 束 会 显示 到 我 们 的 
屏幕 上 。 我 们 的 屏幕 显示 的 束 是 颜色 绥 冲 区 中 的 闫 色 值 。 但 是 ， 为 了 
避免 我 们 看 到 那些 正在 进行 光栅 化 的 图 元 ，GPU 会 使 用 双重 缓冲 

(Double Buffering) 的 策略 。 这 意味 着 ， 对 场景 的 浑 染 是 在 幕后 发 生 
的 ， 即 在 后 置 缓冲 (Back Buffer) 中 。 一 旦 场景 已 经 被 演 染 到 了 后 置 
缓冲 中 ，GPU 就 会 交换 后 置 缓 冲 区 和 前 置 缓冲 (Front Buffer) 中 的 内 


容 ， 而 前 置 缓 冲 区 是 之 前 显示 在 屏 句 上 的 图 像 。 由 此 ， 保 证 了 我 们 看 
到 的 图 像 总 是 连续 的 。 


2.3.9 总结 


虽然 我 们 上 面 讲 了 很 多 ， 但 其 真正 的 实现 过 程 远 比 上 面 讲 到 的 要 
复杂 。 需 要 注意 的 是 ， 读 者 可 能 会 发 现 这 里 给 出 的 流水 线 名 称 、 顺 序 
可 能 和 在 一 些 资 料 上 看 到 的 不 同 。 一 个 原因 是 由 于 图 像 编 程 接口 (如 
OpenGL 和 DirectX) 的 实现 不 尽 相同 ， 另 一 个 原因 是 GPU 在 底层 可 能 做 
了 很 多 优化 ， 例 如 上 面 提 到 的 会 在 片 元 着 色 器 之 前 区 进行 深度 测试 ， 

以 避免 无 请 的 计算 。 


虽然 渲染 流水 线 比 较 复杂 ， 但 Unity 作 为 一 个 非常 出 色 的 平台 为 我 
们 封装 了 很 多 功能 。 更 多 时 候 ， 我 们 只 需要 在 一 个 Unity Shader 设 置 一 
些 输入 、 编 写 顶 点 着 色 器 和 片 元 着 色 人 器、 设置 一 些 状态 就 可 以 达到 大 
部 分 常见 的 屏 间 效果 。 这 是 Unity 吸 引 人 的 魅力 之 处 ， 但 这 样 的 缺点 在 
于 ， 封 装 性 会 导致 编程 自由 度 下 降 ， 使 很 多 初学 者 迷失 方向 ， 无 法 掌 
握 其 背后 的 原理 ， 并 在 出 现 问题 时 ， 往 往 无 法 找到 钳 误 原因 ， 这 是 在 
学 习 Unity Shader 时 普 氨 的 遭遇 。 


演 梁 流水线 几乎 和 本 书 所 有 章节 都 息 居 相 天 ， 如 果 读者 此 时 仍然 
无 法 完全 理解 演 染 流水 线 ， 仍 可 以 继续 学 习 下 去 。 但 如 果 读 者 在 学 习 
过 程 中 发 现 有 些 设置 或 代码 无 法 理解 ， 可 以 不 断 查 阅 本 章 内 容 ， 相 信 
会 有 更 深 的 理解 。 


2.4 一 些 容易 困惑 的 地 方 


在 恋人 着 学 习 Shader 的 过 程 中 ， 会 看 到 一 些 所 谓 的 专业 术语 ， 这 些 术 
语 的 出 现 频 率 很 高 ， 以 至 于 如 果 没 有 对 其 有 基本 的 认识 ， 会 使 得 初学 
者 总 是 感到 非常 困惑 。 本 章 的 最 后 将 阐述 其 中 的 一 些 术语 。 


2.4.1 什么 是 OpenGL/DirectX 


只 要 读者 接触 过 图 像 编 程 ， 就 一 定 听 说 过 OpenGL 和 DirectX， 也 一 
定 知道 这 两 者 之 间 的 竞争 关系 。OpenGL 与 DirectX 之 间 的 竞争 以 及 它们 
与 各 个 硬件 生产 商 之 间 的 纠葛 历史 很 有 趣 ， 但 很 可 惜 这 不 在 本 书 的 讨 
论 范 围 。 本 节 的 目的 在 于 向 读者 尽 可 能 通俗 地 人 解释， 它们 到 发 是 什 
么 ， 义 和 之 前 讲 到 的 泻 染 管线 、GPU 有 什么 关系。 


我 们 花 了 一 整个 章节 的 篇 幅 来 讲述 泻 染 的 概念 流水 线 以 及 GPU 十 
如 何 实现 这 些 流水 线 的 ， 但 如 果 要 开发 者 直接 访问 GPU 起 一 件 非 常 厅 
烦 的 事情 ， 我 们 可 能 需要 和 各 种 寄存 右 、 显 存 打交道 。 而 图 像 编 程 接 
口 在 这 些 硬件 的 基础 上 实现 了 一 层 抽象 。 


OpenGL 和 DirectX 就 是 这 些 图 像 应 用 编程 接口 ， 这 些 授 口 用 于 渲染 
二 维 或 三 维 图 形 。 可 以 说 ， 这 些 接口 架 起 了 上 层 应 用 程序 和 底层 GPU 
的 沟通 桥梁 。 一 个 应 用 程序 向 这 些 接口 发 送 泻 染 命 令 ， 而 这 些 接口 会 
依次 向 显卡 驱动 (Graphics Driver) 发 送 泻 染 命 令 ， 这 些 显 卡 驱 动 是 真 
正 知 道 如 何 和 GPU 通信 的 角色 ， 正 是 它们 把 OpenGL 或 者 DirectX 的 函数 
调用 翻译 成 了 GPU 能 够 听 懂 的 语言 ， 同 时 它们 也 负责 把 纹理 等 数据 转 
换 成 GPU 所 支持 的 格式 。 一 个 比喻 是 ， 显 卡 驱 动 就 是 显卡 的 操作 系 
统 。 图 2.18 显 示 了 这 样 的 关系 。 


概括 来 说 ， 我 们 的 应 用 程序 运行 在 CPU 上 “。 应 用 程序 可 以 通过 调 
用 OpenGL 或 DirectX 的 图 形 接口 将 泻 染 所 需 的 数据 ， 如 顶点 数据 、 纹 理 
数据 、 材 质 参 数 等 数据 存储 在 显存 中 的 特定 区 域 。 随 后 ， 开 发 者 可 以 
通过 图 像 编 程 接口 发 出 洽 染 命令 ， 这 些 泻 染 命令 也 被 称 为 Draw Call， 
它们 将 会 被 显卡 有 驱动 翻译 成 GPU 能 够 理解 的 代码 ， 进 行 真 正 的 绘制 。 


由 图 2.18 可 以 看 出 ， 一 个 显卡 除了 有 图 像 处 理 单 元 GPU 外 ， 还 拥有 
自己 的 内 存 ， 这 个 内 存 通常 被 称 为 显存 (Video Random Access 
Memory，VRAM) 。GPU 可 以 在 显存 中 存储 任何 数据 ， 但 对 于 演 染 来 
说 一 些 数据 类 型 是 必需 的 ， 例 如 用 于 屏幕 显示 的 图 像 级 冲 、 深 度 缓冲 
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因为 显卡 驱动 的 存在 ， 几 乎 所 有 的 GPU 都 既 可 以 和 OpenGL 合 作 ， 
也 可 以 和 DirectX 一 起 工作 。 从 显卡 的 角度 出 发 ， 实 际 上 它 只 需要 和 显 
卡 驱动 打交道 就 可 以 了 。 而 显卡 驱动 就 好 像 一 个 中 介 者 ， 人 负责 和 两 方 
(图 像 编程 接口 和 GPU) 打交道 。 因 此 ， 一 个 显卡 制作 商 为 了 让 他 们 
的 显卡 可 以 同时 和 OpenGL、DirectX 人 合作， 就 必须 提供 支持 OpenGL 和 
DirectX 接 口 的 显卡 驱动 。 


发 送 泻 染 命令 


A 图 2.18 CPU、OpenGL/DirectX、 显 卡 驱动 和 GPU 之 间 的 关系 


2.4.2 ”什么 是 HLSL、GLSL 、Cg 


我 们 上 面 讲 到 了 很 多 可 编程 的 着 色 器 阶段 ， 如 顶点 着 色 丹 、 片 元 
着 色 右 等 。 这 些 着 色 器 的 可 编程 性 在 于 ， 我 们 可 以 使 用 一 种 特定 的 语 


言 来 编写 程序 ， 就 好 比 我 们 可 以 用 C# 来 写 游戏 逻辑 一 样 。 


在 可 编程 管线 出 现 之 前 ， 为 了 编写 着 色 絮 代码 ， 开 发 者 们 学 习 汇 
编 语言 。 为 了 给 开发 者 们 打开 更 方便 的 大 门 ， 就 出 现 了 更 高 级 的 着 色 
语言 (Shading Language) 。 着 色 语 言 是 专门 用 于 编写 着 色 器 的 ， 和 常见 
的 着 色 语言 有 DirectX 的 HLSL (High Level Shading Language) 、 
OpenGL 的 GLSL (OpenGL Shading Language) 以 及 NVIDIA 的 Cg (C 
for Graphic) 。HLSL、GLSL、Cg 都 是 “高 级 (High-Level) ”语言 ， 但 
这 种 高 级 是 相对 于 汇编 语言 来 说 的 ， 而 不 是 像 C# 相 对 于 C 的 高 级 那样 。 
这 些 语言 会 被 编译 成 与 机 器 无 关 的 汇编 语言 ， 也 被 称 为 中 间 语 言 

(Intermediate Language，IL) 。 这 些 中 间 语 言 再 交 给 显卡 驱动 来 翻译 
成 真正 的 机 器 语言 ， 即 GPU 可 以 理解 的 语言 。 


对 于 一 个 初学 者 来 说 ， 一 个 最 第 见 的 问题 束 古 ， 他 应 该 先 择 哪 种 


Se 


GLSL 的 优点 在 于 它 的 跨 平台 性 ， 它 可 以 在 Windows 、Linux、Mac 
甚至 移动 平台 等 多 种 平台 上 工作 ， 但 这 种 跨 平 台 性 是 由 于 OpenGL 没 有 
提供 着 色 器 编译 器 ， 而 是 由 显卡 驱动 来 完成 着 色 器 的 编译 工作 。 也 就 
是 说 ， 只 要 显卡 驱动 支持 对 GLSL 的 编译 它 就 可 以 运行 。 这 种 做 法 的 好 
处 在 于 ， 由 于 供应 商 完 全 了 解 自己 的 硬件 构造 ， 他 们 知道 怎样 做 可 以 
发 挥 出 最 大 的 作用 。 换 名 话说 ，GLSL 是 依赖 硬件 ， 而 非 操 作 系 统 层级 
的 。 但 这 也 意味 着 GLSL 的 编译 结果 将 取决 于 硬件 供应 商 。 要 知道 ， 世 
界 上 有 很 多 硬件 供应 商 一 一 NVIDIA、ATI 等 ， 他 们 对 GLSL 的 编译 实现 
不 尽 相 同 ， 这 可 能 会 造成 编译 结果 不 一 致 的 情况 ， 因 为 这 完全 取决 于 
供应 商 的 做 法 。 


而 对 于 HLSL， 是 由 微软 控制 着 色 硕 的 编译 ， 残 算 使 用 了 不 同 的 硬 
件 ， 同 一 个 着 色 器 的 编译 结果 也 是 一 样 的 (前 提 是 版 本 相同 。 但 也 
因此 支持 HLSL 的 平台 相对 比较 有 限 ， 几 乎 完全 是 微软 自己 的 产品 ， 如 
Windows、Xbox 360 等 。 这 是 因为 在 其 他 平台 上 没有 可 以 编译 HLSL 的 
编译 器 。 


Cg 则 是 真正 意义 上 的 跨 平 台 。 它 会 根据 平台 的 不 同 ， 编 译 成 相应 
的 中 间 语 言 。Cg 语 言 的 跨 平台 性 很 大 原因 取决 于 与 微软 的 合作 ， 这 也 
导致 Cg 语言 的 语法 和 HLSL 非 常 相像 ，Cg 语 言 可 以 无 颖 移植 成 HLSL 代 
码 。 但 缺点 是 可 能 无 法 完全 发 挥 出 OpenGL 的 最 新 特性 。 


对 于 Unity 平 台 ， 我 们 同样 可 以 选择 使 用 哪 种 语言 。 在 Unity Shader 
中 ， 我 们 可 以 选择 使 用 “Cg/HLSL” 或 者 “GLSL”。 带 引号 是 因为 Unity 里 
的 这 些 着 色 语 言 并 不 是 真正 意义 上 的 对 应 的 着 色 语 言 ， 尽 管 它们 的 语 
法 几乎 一 样 。 以 Unity Cg 为 例 ， 你 有 时 会 发 现 有 些 Cg 语 法 在 Unity 
Shader 中 是 不 支持 的 。 关 于 Unity Shader 和 真正 的 CgHLSL、GLSL 之 间 
的 关系 我 们 会 在 3.6 节 中 讲 到 。 


2.4.3 ”什么 是 Draw Call 


在 前 面 的 章节 中 ， 我 们 已 经 了 解 了 Draw Call 的 含义 。Draw Call 本 
续 的 含义 很 向 单 ， 丈 是 CPU 调用 图 像 编 程 接 口 ， 如 OpenGL 中 的 
glDrawElements 命 令 或 者 DirectX 中 的 DrawIndexedPrimitive 命 令 ， 以 命 
令 GPU 进 行 泻 染 的 操作 。 


一 个 第 见 的 误区 是 ，Draw Call 中 造成 性 能 问题 的 元 凶 是 GPU， 认 
为 GPU 上 的 状态 切换 是 耗 时 的 ， 其 实 不 古 的， 真正 “ 拖 后 腿 ” 其 实 的 古 


CPU 。 


在 深入 理解 Draw Call 之前， 我 们 先 来 看 一 人 CPU 和 GPU 之 间 的 流 
水 线 化 是 怎么 实现 的 ， 即 它们 是 如 何 相互 独立 一 起 工作 的 。 


问题 一 : CPU 和 GPU 是 如 何 实现 并 行 工 作 的 ? 


如 果 没 有 流水 线 化 ， 那 么 CPU 需 要 等 到 GPU 完 成 上 一 个 泻 染 任务 
才能 再 次 发 送 泻 染 命令 。 但 这 种 方法 显然 会 造成 效率 低下 。 因 此 ， 整 
像 在 本 章 一 开头 讲 到 的 老 王 的 洋娃娃 工厂 一 样 ， 我 们 需要 让 CPU 和 
GPU 可 以 并 行 工作 。 而 解决 方法 就 是 使 用 一 个 命令 缓冲 区 (Command 
Buffer) 9 


命令 缓 神 区 包含 了 一 个 命令 队列 ， 由 CPU 向 其 中 添加 命令 ， 而 由 
GPU 从 中 读 取 命 令 ， 添 加 和 读 取 的 过 程 是 互相 独立 的 。 命 令 缓冲 区 使 
得 CPU 和 GPU 可 以 相互 独立 工作 。 当 CPU 需要 泻 染 一 些 对 象 时 ， 它 可 
以 向 命令 缓冲 区 中 添加 命令 ， 而 当 GPU 完 成 了 上 一 次 的 泻 染 任务 后 ， 
它 就 可 以 从 命令 队列 中 再 取出 一 个 命令 并 执行 它 。 

命令 缓冲 区 中 的 命令 有 很 多 种 类 ， 而 Draw Call 是 其 中 一 种 ， 其 他 


命令 还 有 改变 泻 染 状态 等 (例如 改变 使 用 的 着 色 絮 ， 使 用 不 同 的 纹理 
) 。 图 2.19 显 示 了 这 样 一 个 例子 。 
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和 图 2.19 命令 缓冲 区 。CPU 通 过 图 像 编程 接口 向 命令 缓冲 区 中 添加 命令 ， 而 GPU 从 中 读 取 命 
令 并 执行 。 黄 色 方 框 内 的 命令 就 是 Draw Call， 而 红色 方 框 内 的 命令 用 于 改变 泻 染 状态 。 我 们 使 
用 红色 方 框 来 表示 改变 泻 染 状 态 的 命令 ， 是 因为 这 些 命令 往往 更 加 耗 时 


问题 二 : 为 什么 Draw Cal 多 了 会 影响 帧 率 ? 


我 们 先 来 做 一 个 实验 : 请 创建 10 000 个 小 文件 ， 每 个 文件 的 大 小 为 
1KB,， 然后 把 名 们 从 一 个 文件 来 复制 到 为 一 个 文件 夹 * 你 会 发现 ， 尽 
管 这 些 文件 的 空间 总 和 不 超过 10MB ， 但 要 花费 很 长 时 间 。 现 在 ， 我 们 
再 来 创建 一 个 单独 的 文件 ， 它 的 大 小 是 10MB， 然 后 也 把 它 从 一 个 文件 


夹 复 制 到 为 一 个 文件 夹 。 而 这 次 复制 的 时 间 却 少 很 多 ! 这 是 为 什么 
呢 ? 明明 它们 所 包 舍 的 内 容 大 小 是 一 样 的 。 原 因 在 于 ， 每 一 个 复制 动 
作 和 需要 很 多 额外 的 操作 ， 例 如 分 配 内 存 、 创 建 各 种 元 数据 等 。 如 你 所 
见 ， 这 些 操作 将 造成 很 多 额外 的 性 能 开销 ， 如 来 我 们 复制 了 很 多 小 文 
件 ， 那 么 这 个 开销 将 会 很 大 。 


泻 染 的 过 程 虽然 和 和 上面 的 实验 有 很 大 不 同 ， 但 从 感性 角度 上 是 很 
类 似 的 。 在 每 次 调用 Draw Call 之 前 ，CPU 需 要 癌 GPU 发 送 很 多 内 容 ， 
包括 数据 、 状 态 和 命令 等 。 在 这 一 阶段 ，CPU 需 要 完成 很 多 工作 ， 例 
如 检查 泻 染 状态 等 。 而 一 旦 CPU 完 成 了 这 些 准备 工作 ，GPU 就 可 以 开 
始 本 次 的 渲染 。GPU 的 泻 染 能 力 是 很 强 的 ， 泻 染 200 个 还 是 2 000 个 三 角 
网 格 通常 没有 什么 区 别 ， 因 此 演 染 速度 往往 快 于 CPU 提交 命令 的 速 
度 。 如 果 Draw Call 的 数量 太 多 ，CPU 就 会 把 大 量 时 间 花 费 在 提交 Draw 
Call 上 ， 造 成 CPU 的 过 载 。 图 2.20 显 示 了 这 样 一 个 例子 。 
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图 2.20 ”命令 缓冲 区 中 的 虚线 方 框 表示 GPU 已 经 完成 的 命令 。 此 时 ， 命 令 缓 冲 区 中 没有 可 以 
执行 的 命令 了 ，GPU 处 于 空闲 状态 ， 而 CPU 还 没有 准备 好 下 一 个 演 染 命令 
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问题 三 ， 如 何 减 少 Draw Call? 


尽管 减少 Draw Call 的 方法 有 很 多 ， 但 我 们 这 里 仅 讨论 使 用 批 处 理 
(Batching) 的 方法 。 


我 们 讲 过 ， 提 交大 量 很 小 的 Draw Call 会 造成 CPU 的 性 能 瓶颈 ， 即 
CPU 把 时 间 都 花费 在 准备 Draw Call 的 工作 上 上 了。 那么 ， 一 个 很 显然 的 


优化 想法 吏 是 把 很 多 小 的 DrawCall 合 并 成 一 个 大 的 Draw Call， 这 就 是 
批 处 理 的 思想 。 图 2.21 显 示 了 批 处 理 所 做 的 工作 。 


需要 注意 的 是 ， 由 于 我 们 需要 在 CPU 的 内 存 中 合并 网 格 ， 而 合并 
的 过 程 是 需要 消耗 时 间 的 。 因 此 ， 批 处 理 技术 更 加 适合 于 那些 静态 的 
物体 ， 例 如 不 会 移动 的 大 地 、 石 头等 ， 对 于 这 些 静态 物体 我 们 只 需要 
合并 一 次 即 可 。 当 然 ， 我 们 也 可 以 对 动态 物体 进行 批 处 理 。 但 是 ， 由 
于 这 些 物体 是 不 断 运动 的 ， 因 此 每 一 帧 都 需要 重新 进行 合并 然后 再 发 
送 给 GPU， 这 对 空间 和 时 间 都 会 造成 一 定 的 影响 。 
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图 2.21 利用 批 处 理 ，CPU 在 RAM 把 多 个 网 格 合并 成 一 个 更 大 的 网 格 ， 再 发 送 给 GPU， 然 后 
在 一 个 Draw Call 中 演 染 它们 。 但 要 注意 的 是 ， 使 用 批 处 理 合 并 的 网 格 将 会 使 用 同一 种 泻 染 状 
态 。 也 就 是 说 ， 如 果 网 格 之 间 需 要 使 用 不 同 的 浑 染 状态 ， 那 么 就 无 法 使 用 批 处 理 技 术 


在 游戏 开发 过 程 中 ， 为 了 减少 Draw Call 的 开销 ， 有 两 点 需要 注 
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(1) 避免 使 用 大 量 很 小 的 网 格 。 当 不 可 避免 地 需要 使 用 很 小 的 网 
格 结构 时 ， 考 虑 是 否 可 以 合并 它们 。 


(2) 避免 使 用 过 多 的 材质 。 尽 量 在 不 同 的 网 格 之 间 共 用 同一 个 材 

质 o 

在 本 书 的 16.4 市 ， 我 们 会 继续 曾 述 如 何在 Unity 中 利用 批 处 理 技术 
来 进行 优化 。 
2.4.4 什么 是 固定 管线 演 染 

固定 函数 的 流水 线 (Fixed-Function Pipeline) ， 也 简称 为 固定 管 
线 ， 通 常 是 指 在 较 旧 的 GPU 上 实现 的 泻 染 流水 线 。 这 种 流水 线 只 给 开 
发 者 提供 一 些 配 置 操 作 ， 但 开发 者 没有 对 流水 线 阶段 的 完全 控制 权 。 


固定 管线 通 香 提供 了 一 系列 接口 ， 这 些 接 口 包含 了 一 个 函数 入 口 
点 (Function Entry Points) 集合 ， 这 些 函 数 入 口 点 会 匹配 GPU 上 的 一 个 
特定 的 逻辑 功能 。 开 发 者 们 通过 这 些 接口 来 控制 泻 染 流水 线 。 换 句 话 
说 ， 固 定 泻 染 管 线 是 只 可 配置 的 管线 。 一 个 形象 的 比喻 是 ， 我 们 在 使 
用 固定 管线 进行 渲染 时 ， 束 好 像 在 控制 电路 上 的 多 个 开关 ， 我 们 可 以 
选择 打开 或 者 关闭 一 个 开关 ， 但 永远 无 法 控制 整个 电路 的 排 布 。 


随 着 时 代 的 发 展 ，GPU 流 水 线 越 来 越 朝 着 更 高 的 灵活 性 和 可 挥 性 
方 同 发 展 ， 可 编程 演 染 管线 应 运 而 生 。 我 们 在 上 面 看 到 了 许多 可 编程 
的 流水 线 阶段 ， 如 顶点 着 色 妖 、 厂 元 着 色 器 ， 这 些 可 编程 的 着 色 器 阶 


段 可 以 说 是 GPU 进 化 最 重要 的 页 献 。 表 2.1 给 出 了 3 种 最 闸 见 的 图 像 接 口 
从 固定 管线 同 可 编程 管线 进化 的 版 本 。 


表 2.1 ”3 种 图 像 接 口 从 固定 管线 向 可 编程 管线 进化 的 版 本 


3D API 最 后 支持 固定 管线 的 版 本 第 一 个 支持 可 编程 管线 的 版 本 


= 


在 GPU 发 展 的 过 程 中 ， 为 了 继续 提供 固定 管线 的 接口 抽象 ， 一 些 
显卡 驱动 的 开发 者 们 使 用 了 更 加 通用 的 着 色 架 构 ， 即 使 用 可 编程 的 管 
线 来 模拟 固定 管线 。 这 是 为 了 在 提供 可 编程 渔 染 管线 的 同时 ， 可 以 让 


那些 已 经 熟悉 了 固定 管线 的 开发 者 们 继续 使 用 固定 管线 进行 泻 染 。 例 
如 ，OpenGL 2.0 在 没有 真正 的 固定 管线 的 硬件 文 持 下 ， 依 徘 系统 的 可 
编程 管线 功能 来 模仿 固定 管线 的 处 理 过 程 。 但 随 着 GPU 的 发 展 ， 固 定 
管线 已 经 逐渐 退出 历史 舞台 。 例 如 ，OpenGL 3.0 是 最 后 既 文 持 可 编程 
管线 又 完 全 支持 固定 管线 编程 接口 的 版 本 ， 在 OpenGL 3.2 中 ，Core 
Profile 束 完全 移 除了 固定 管线 的 概念 。 


因此 ， 如 果 读者 不 是 为 了 对 较 旧 的 设备 进行 兼容 ， 不 建议 继续 使 
用 固定 管线 的 演 染 方式 。 


2.5 那么 ， 你 明日 什么 是 Shader 了 吗 


我 们 之 所 以 要 花 很 大 篇 幅 来 讲述 GPU 的 泻 染 流水 线 ， 是 因为 Shader 
所 在 的 阶段 束 是 演 染 流水 线 的 一 部 分 ， 更 具体 来 说 ，Shader 融 是 : 


。 GPU 流水 线 上 一 些 可 高 度 编程 的 阶段 ， 而 由 着 色 器 编译 出 来 的 最 
终 代码 古 会 在 GPU 上 运行 的 (对 于 固定 管线 的 演 染 来 说 ， 着 色 如 
有 时 等 同 于 一 些 特定 的 演 染 设置 ) ; 

有 一 些 特定 类 型 的 着色 器 ， 如 顶点 看 色 紫 、 片 元 着 色 硕 等 ; 
依靠 着 色 顺 我 们 可 以 控制 流水 线 中 的 演 染 细节 ， 例 如 用 项 点 着 色 
名 来 进行 顶点 变换 以 及 传递 数据 ， 用 片 元 着色 融 来 进行 逐 像素 的 


泻 染 。 


但 同时 ， 我 们 也 要 明白 ， 要 得 到 出 色 的 游戏 画面 是 需要 包括 Shader 
在 内 的 所 有 演 染 流水 线 阶段 的 共同 参与 才 可 完成 : 设置 适当 的 得 染 状 
态 ， 使 用 合适 的 混合 函数 ， 开 局 还 是 关闭 深度 测试 /深度 写 入 等 。 


Unity 作 为 一 个 出 色 的 编辑 工具 ， 为 我 们 提供 了 一 个 既 可 以 方便 地 
编写 着 色 器 ， 同 时 又 可 设置 浑 染 状态 的 地 方 : Unity Shader。 在 下 一 章 
中 ， 我 们 将 真正 走 进 Unity Shader 的 世界 。 


2.6 扩展 阅读 


如 有 果 读 者 对 泻 染 流水 线 的 细 市 感 兴 趣 ， 可 以 阅读 更 多 的 资料 。 托 
马 斯 在 他 们 的 著作 趾 中 给 出 了 很 多 有 关 实 时 泻 染 的 内 容 ， 这 本 书 被 誉 为 
图 形 学 中 的 圣经 。 如 果 你 仍然 觉得 本 书 讲解 的 Draw Call 不 够 形象 生 


动 ， 西 蒙 在 他 的 文章 中 给 出 了 很 多 动态 的 演示 效果 ， 而 且 值 得 注意 的 
是 ， 西 蒙 本 人 是 一 位 美术 工作 者 。 为 什么 需要 批 处 理 ， 什 么 时 候 需 要 
批 处 理 等 更 多 关于 批 处 理 的 内 容 ， 可 以 在 NVIDIA 所 做 的 一 次 报告 中 中 
找到 更 多 的 答案 。 如 果 读 者 对 OpenGL 和 DirectX 的 渲染 流水 线 的 实现 细 
方 感 兴趣 ， 那 么 阅读 它们 的 文档 (https://www. 


opengl.org/wiki/Rendering_Pipeline_ Overview, 


https://msdn.microsoft.com/en-us/ library/windows/ 


desktop/ff476882(v=vs.85).aspx) 是 一 个 非常 好 的 途径 。 


[1] Akenine-Méoller T, Haines E, Hoffman N. Real-time rendering[M|. 
CRC Press, 2008. 


[2] Wloka M. Batch, Batch, Batch: What does it really mean? 


[C]/Presentation at game developers conference. 2003. 


第 3 章 ”Unity Shader 基础 


通过 前 面 的 学 习 内 容 我 们 已 经 知道 ，Shader 并 不 是 什么 神秘 的 东 
西 ， 它 们 其 实 束 是 泻 染 流水 线 中 的 某 些 特定 阶段 ， 如 顶点 着 色 器 阶 
段 、 片 元 着 色 右 阶段 等 


在 没有 Unity 这 类 编辑 全 的 情况 下 ， 如 琳 我 们 想 要 对 菏 个 模型 设置 
泻 染 状 态 ， 可 能 需要 类 似 下 面 的 代码 : 


// 初始 化 泻 染 设置 
void Initialization() { 
// 从 硬盘 上 加 载 顶点 着 色 器 的 代码 
string vertexShaderCode = 
LoadSshaderFromFile(VertexShader. shader ); 
// 从 硬盘 上 加 载 片 元 着 色 器 的 代码 
string fragmentShaderCode = 
LoadShaderFromFile(FragmentShader .shader ); 
// 把 顶点 着 色 器 加 载 到 GPU 中 
LoadVertexShaderFromSstring(vertexShaderCode); 
// 把 片 元 着 色 器 加 载 到 GPU 中 
LoadFragmentShaderFromString(fragmentShaderCode); 


// 设置 名 为 "vertexPosition" 的 属性 的 输入 ， 即 模型 顶点 坐标 
SetVertexShaderProperty("vertexPosition", vertices); 

// 设置 名 为 "MainTex" 的 属性 的 输入 ，someTexture 是 某 张 已 加 载 的 纹理 
SetVertexShaderProperty("MainTex", someTexture); 
// 设置 名 为 "MVP" 的 属性 的 输入 ，MVP 是 之 前 由 开发 者 计算 好 的 变换 矩阵 
SetVertexShaderProperty("MVP", MVP); 


// 关闭 混合 
Disable(Blend); 

// 设置 深度 测试 

Enable(ZTest ) ; 
SetzTestFunction(LessOrEqual); 


// 其 他 设置 


// 每 一 帧 进行 泻 染 

void OnRendering() { 
// 调用 泻 染 命令 
DrawCcall( ); 


// 当 涉 及 多 种 泻 染 设置 时 ， 我 们 可 能 还 需要 在 这 里 改变 各 种 泻 染 设置 


VertexShader.shader: 


// 输入 : 顶点 位 置 、 纹 理 、MVP 变 换 和 矩阵 
In float3 vertexPosition,; 

in sampler2D MainTex; 

in Matrix4x4 MVP; 


// 输出 : 顶点 经 过 MVP 变 换 后 的 位 置 
out float4 position 


void main() { 
// 使 用 MVP 对 模型 顶点 坐标 进行 变换 
position = MVP * vertexPosition; 


FragmentShader.shader: 


// 输入 : VertexShader 输 出 的 position、 经 过 光栅 化 程序 插值 后 的 该 片 元 对 应 的 
position 
in float4 position; 


// 输出 :该 片 元 的 颜色 值 
out float4 fragColor; 


void main() { 
// 将 片 元 颜色 设 为 白色 
fragColor = float4(1.0, 1.0, 1.0, 1.0); 


上 壕 伪 代码 仅仅 是 简化 后 的 版 本 ， 当 泻 染 的 模型 数目 、 需 要 调整 
的 着 色 器 属性 不 断 增多 时 ， 上 述 过 程 将 变 得 更 加 复杂 和 克 长 。 而 且 ， 
当 涉 及 透明 物体 等 多 物体 的 演 染 时 ， 如 果 没 有 编辑 做 的 帮助 ， 我 们 要 
非常 小 心 如 温 染 顺序 等 问题 。 


Unity 的 出 现 改 善 了 上 面 的 状况 。 它 提供 了 一 个 地 方 能 够 让 开发 者 
更 加 轻松 地 管理 着 色 峰 代码 以 及 演 染 设置 《如 开局 /关闭 混合 、 深 度 测 
试 、 设 置 泻 染 顺序 等 ， 而 不 需要 像 上 面 的 伪 代 码 一 样 ， 管 理 多 个 文 
件 和 函数 等 。Unity 提 供 的 这 个 “方便 的 地 方 "”， 束 是 Unity Shader 。 


3.1 Unity Shader 概 述 


那么 如 何 充分 利用 Unity Shader 来 为 我 们 的 游戏 增光 添彩 呢 ? 
3.1.1 一 对 好 兄弟 :材质 和 Unity Shader 


总 体 来 说 ， 在 Unity 中 我 们 需要 配合 使 用 材质 (Material) 和 Unity 
Shader 才 能 达到 需要 的 效果 。 一 个 最 常见 的 流程 是 : 


(1) 创建 一 个 材质 ; 

(2) 创建 一 个 Unity Shader， 并 把 它 赋 给 上 一 步 中 创建 的 材质 
(3) 把 材质 赋 给 要 泻 染 的 对 象 ; 

(4) 在 材质 面板 中 调整 Unity Shader 的 属性 ， 以 得 到 满意 的 效果 。 


图 3.1 显 示 了 Unity Shader 和 材质 是 如 何 一 起 工作 来 控制 物体 的 渔 染 
有 ， 


Unity Shader 


A 图 3.1 Unity Shader 和 材质 。 首 先 创建 需要 的 Unity Shader 和 材质 ， 然 后 把 Unity Shader 赋 给 材 
质 ， 并 在 材质 面板 上 调整 属性 (如 使 用 的 纹理 、 漫 反射 系数 等 。 最 后 ， 将 材质 赋 给 相应 的 模 
型 来 查看 最 终 的 泻 染 效 果 


可 以 发 现 ，Unity Shader 定 义 了 演 染 所 需 的 各 种 代码 (如 顶点 着 色 
器 和 片 元 着 色 器 ) 、 属 性 (如 使 用 哪些 纹理 等 ) 和 指令 ( 演 染 和 标签 
设置 等 ) ， 而 材质 则 允许 我 们 调节 这 些 属性 ， 并 将 其 最 终 赋 给 相应 的 
模型 。 


3.1.2 ”Unity 中 的 材质 


Unity 中 的 材质 需要 结合 一 个 GameObject 的 Mesh 或 者 Particle 
Systems 组 件 来 工作 。 它 决定 了 我 们 的 游戏 对 象 看 起 来 是 什么 样子 的 
(这 当然 也 需要 Unity Shader 的 配合 ) 。 


为 了 创建 一 个 新 的 材质 ， 我 们 可 以 在 Unity 的 菜单 栏 中 选择 Assets - 
> Create -> Material 来 创建 ， 也 可 以 直接 在 Project 视 图 中 右 击 -> Create 
-> Material 来 创建 。 当 创建 了 一 个 材质 后 ， 就 可 以 把 它 赋 给 一 个 对 象 。 
这 可 以 通过 把 材质 直接 拖 上 忠 到 Scene 视 图 中 的 对 象 上 来 实现 ， 或 者 在 该 
对 象 的 Mesh Renderer 组 件 中 直接 赋值 ， 如 图 3.2 所 示 。 
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A 图 3.2 将 材质 直接 拖 虑 到 模型 的 Mesh Renderer 组 件 中 


在 Unity 5.x 版 本 中 ， 默 认 情 况 下 ， 一 个 新 建 的 材质 将 使 用 Unity 内 
置 的 Standard Shader， 这 是 一 种 基于 物理 渲染 的 着 色 絮 ， 我 们 将 在 第 18 
章 中 讲 到 。 


对 于 美术 人 员 来 说 ， 材 质 是 他 们 十 分 熟悉 的 一 种 事物 。Unity 的 材 
质 和 许多 建 模 软 件 (如 Cinema 4D、Maya 等 ) 中 提供 的 材质 功能 类 似 ， 
它们 都 提供 了 一 个 面板 来 调整 材质 的 各 个 参数 。 这 种 可 视 化 的 方法 使 
得 开发 者 不 再 需要 自行 在 代码 中 设置 和 改变 泻 染 所 需 的 各 种 参数 ， 如 
图 3.3 所 示 。 
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A 图 3.3 材质 提供 了 一 种 可 视 化 的 方式 来 调整 着 色 器 中 使 用 的 参数 


9 提示 


体 、 圆 柱 体 等 多 种 基础 模型 ， 


市 


单 击 图 标 “1” 可 变换 面板 中 使 用 的 基础 模型 种 类 ，Unity 支 持 球 、 立 方 


图 林 


RD» 可 变换 


面板 中 使 用 的 光照 。 


3.1.3 ”Unity 中 的 Shader 


为 了 和 前 面 通用 的 Shader 语 义 进行 区 分 ， 
件 统称 为 Unity Shader。 这 是 因为 ，Unity Shader 和 我 们 之 前 提 及 的 泻 
染 管 线 的 Shader 有 很 大 不 同 ， 我 们 会 在 3.6.2 广 中 进行 更 加 详细 的 解释 。 


我 们 把 Unity 中 的 Shader 文 


为 了 创建 一 个 新 的 Unity Shader， 我 们 可 以 在 Unity 的 菜单 栏 中 选择 
Assets -> Create -> Shader 来 创建 ， 也 可 以 直接 在 Project 视 图 中 右 击 -> 
Create -> Shader 来 创建 。 在 Unity 5.2 及 以 上 版 本 中 ，Unity 一 共 提 供 了 4 
种 Unity Shader 模 板 供 我 们 选择 Standard Surface Shader, Unlit 
Shader, Image Effect Shader 以 及 Compute Shader。 其中，Standard 
Surface Shader 会 产生 一 个 包含 了 标准 光照 模型 (使 用 了 Unity 5 中 新 添 
加 的 基于 物理 的 泻 染 方法 ， 详 见 第 18 章 ) 的 表面 着 色 器 模板 ，Unlit 
Shader 则 会 产生 一 个 不 包含 光照 (但 包含 雾 效 ) 的 基本 的 顶点 / 片 元 着 
色 器 ，Image Effect Shader 则 为 我 们 实现 各 种 屏幕 后 处 理 效果 ( 详 见 第 
12 章 ) 提供 了 一 个 基本 模板 。 最 后 ，Compute Shader 会 产生 一 种 特殊 的 
Shader 文 件 ， 这 类 Shader 则 在 利用 GPU 的 并 行 性 来 进行 一 些 与 常规 渲染 
流水 线 无 天 的 计算 ， 而 这 不 在 本 书 的 讨论 范围 内 ， 读 者 可 以 在 Unity 手 
册 的 Compute Shader 一 文 (http://docs.unity3d.com/Manual/ 
ComputeShaders.html) 中 找到 更 多 的 介绍 。 总 体 来 说 ，Standard Surface 
Shader 为 我 们 提供 了 典型 的 表面 奢 色 器 的 实现 方法 ， 但 本 书 的 重点 在 于 
如 何在 Unity 中 编写 顶点 / 片 元 着 色 器 ， 因 此 在 后 续 的 学 习 中 ， 我 们 通常 
会 使 用 Unlit Shader 来 生成 一 个 基本 的 顶点 / 片 元 着 色 器 模板 。 


一 个 单独 的 Unity Shader 是 无 法 发 挥 任何 作用 的 ， 它 必须 和 材质 结 
合 起 来 ， 才 能 发 生 神奇 的 “化 学 反应 ”! 为 此 ， 我 们 可 以 在 材质 面板 最 
上 方 的 下 拉 染 单 中 选择 需要 使 用 的 Unity Shader。 当 选择 完毕 后 ， 材 质 
面板 中 就 会 出 现 该 Unity Shader 可 用 的 各 种 属性 。 这 些 属性 可 以 是 颜 
色 、 纹 理 、 浮 点 数 、 滑 动 条 (限制 了 范围 的 浮 点 数 ) 、 向 量 等 。 当 我 
们 把 材质 赋 给 场景 中 的 一 个 对 象 时 ， 束 可 以 看 到 调整 属性 所 发 生 的 视 


过 全 化 3 


Unity Shader 本 质 上 就 是 一 个 文本 文件 。 和 Unity 中 的 很 多 外 部 文件 
类 似 ，Unity Shader 也 有 导入 设置 (Import Settings) 面板 ， 在 Project 视 
图 中 选中 某 个 Unity Shader 即 可 看 到 。 在 Unity 5.2 版 本 中 ，Unity Shader 
的 导入 设置 面板 如 图 3.4 所 示 。 


在 该 面板 上 ， 我 们 可 以 在 Default Maps 中 指定 该 Unity Shader 使 用 
的 默认 纹理 。 当 任何 材质 第 一 次 使 用 该 Unity Shader 上 时， 这些 纹 理 就 会 
目 动 被 赋予 到 相应 的 属性 上 。 在 下 方 的 面板 中 ，Unity 会 显示 出 和 该 
Unity Shader 相 关 的 信息 ， 例 如 它 是 否 是 一 个 表面 着 色 器 (Surface 
Shader) 、 是 否 是 一 个 固定 函数 着 色 器 (Fixed Function Shader) 等 ， 
还 有 一 些 信息 是 和 我 们 在 Unity Shader 中 的 标签 设置 ( 详 见 3.3.3 节 ) 有 
天 ， 例 如 是 否 会 投 叶 阴影、 使 用 的 洽 染 队列 、LOD 值 等 。 


对 于 表面 着 色 器 ( 详 见 3.4.1 节 ) 来 说 ， 我 们 可 以 通过 单 击 Show 
generated code 按 钮 来 打开 一 个 新 的 文件 ， 在 该 文件 里 将 显示 Unity 在 背 
后 为 该 表面 着 色 器 生成 的 顶点 / 片 元 着 色 器 。 这 可 以 方便 我 们 对 这 些 生 
成 的 代码 进行 修改 (需要 复制 到 一 个 新 的 Unity Shader 中 才 可 保存 ) 和 
人 研究。 同样 地 ， 如 果 该 Unity Shader 是 一 个 固定 范 数 着 色 器 ， 在 Fixed 
function 的 后 面 也 会 出 现 一 个 Show generated code 按 钮 ， 来 让 我 们 查看 
该 固定 函数 着 色 器 生成 的 顶点 / 片 元 着 色 器 。Compile and show code 下 拉 
列表 可 以 让 开发 者 检查 该 Unity Shader 针 对 不 同 图 像 编程 接口 (例如 
OpenGL、D3D9、D3D11 等 ) 最 终 编译 成 的 Shader 代 码 ， 如 图 3.5 所 示 。 
直接 单 击 该 按钮 可 以 查看 生成 的 的 层 的 汇编 指令 。 我 们 可 以 利用 这 些 
代码 来 分 析 和 优化 着 色 器 。 


A 图 3.4 Unity Shader 的 导入 设置 面板 


和 图 3.5 ”Compile and show code 下 拉 列 表 


除 此 之 外 ，Unity Shader 的 导入 面板 还 可 以 方便 地 碍 看 其 使 用 的 泻 
染 队 列 (Render queue) 、 是 否 关 闭 批 处 理 (Disable batching) 、 属 性 
列表 (Properties) 等 信息 。 


3.2 Unity Shader 的 基础 : ShaderLab 


“计算 机 科学 中 的 任何 问题 部 可 以 通过 增加 一 层 抽象 来 解 
决 。' 一 一 大 卫 . 惠 勒 


学 习 和 编写 看 色 需 的 过 程 一 直 坪 一 个 学 习 曲 线 很 陡峭 的 过 程 。 通 
常情 况 下 ， 为 了 上 自 定义 渲染 效果 往往 需要 和 很 多 文件 和 设置 打交道 ， 
这 些 过 程 很 容易 消磨 掉 初 学 者 的 耐心 而且， 一 些 细节 问题 也 往往 需 
要 开发 者 化 费 较 多 的 时 间 去 解决 。 


Unity 为 了 解决 上 述 问 题 ， 为 我 们 提供 了 一 层 抽象 
Shader。 而 我 们 和 这 层 抽象 打交道 的 途径 就 是 使 用 Unity 提 供 的 一 种 专 
门 为 Unity Shader 服 务 的 语言 一 -ShaderLab 。 


Unity 


什么 是 ShaderLab? 


"ShaderLab is a friend you can afford." 一 一 尼古拉斯 : 弗 朋 西 斯 
(Nicholas Francis) ，Unity 前 首席 运营 官 (COO) 和 联合 创始 人 之 


Unity Shader 是 Unity 为 开发 者 提供 的 高 层级 的 泻 染 抽象 层 。 图 3.6 显 
示 了 这 样 的 抽象 。Unity 布 望 通过 这 种 方式 来 让 开发 者 更 加 轻松 地 控制 


演 染 3 。 


根据 平台 选择 
不 同 的 图 像 编程 接口 


载 入 模型 把 浑 染 资源 
加 载 到 GPU 
看 包 器 < 人 二 ~ 设置 演 染 状态 


对 泻 染 顺 序 
进行 排序 


使 用 ShaderLab 


A 图 3.6 Unity Shader 为 控制 泻 染 过 程 提供 了 一 层 抽 


没有 使 用 Unity Shader ( 左 图 ) ， 


开发 者 需要 和 很 多 文件 和 设置 打交道 ， 才 能 让 画面 呈 


中 要 的 效果 ; 而 在 Unity Shader 的 帮 


助 下 〈 右 图 ) ， 开 发 者 只 需要 使 用 ShaderLab 来 编 


写 Unity Shader 文 件 就 可 以 完成 所 有 的 工作 


在 Unity 中 ， 所 有 的 Unity Shader 都 是 使 用 ShaderLab 来 编写 的 。 
ShaderLab 是 Unity 提 供 的 编写 Unity Shader 的 一 种 说 明 性 语言 。 它 使 用 
了 一 些 舱 套 在 花 括号 内 部 的 语义 (syntax) 来 描述 一 个 Unity Shader 文 
件 的 结构 。 这 些 结构 包含 了 许多 泻 染 所 需 的 数据 ， 例 如 Properties 语 句 
块 中 定义 了 着 色 器 所 需 的 各 种 属性 ， 这 些 属性 将 会 出 现在 材质 面板 
中 。 从 设计 上 来 说 ，ShaderLab 类 似 于 CgFX 和 Direct3D Effects (.FX) 
语言 ， 它 们 都 定义 了 要 显示 一 个 材质 所 需 的 所 有 东西 ， 而 不 仅仅 是 着 


色 絮 代码 。 


一 个 Unity Shader 的 基础 结构 如 下 所 示 : 


Shader "ShaderName" { 
Properties { 


// 属性 
. 


SubShader { 
// 显卡 A 使 用 的 子 着 色 器 


} 
SubShader { 
// 显卡 B 使 用 的 子 着 色 器 


} 
Fallback "VertexLit" 


Unity 在 背后 会 根据 使 用 的 平台 来 把 这 些 结构 编译 成 真正 的 代码 和 
Shader 文 件 ， 而 开发 者 只 需要 和 Unity Shader 打 交道 即 可 。 


3.3 Unity Shader 的 结构 


在 上 一 节 的 伪 代 码 中 我 们 见 到 了 一 些 ShaderLab 的 语义 ， 如 
Properties、SubShader、Fallback 等 。 这 些 语义 定义 了 Unity Shader 的 结 
构 ， 从 而 帮助 Unity 分 析 该 Unity Shader 文 件 ， 以 便 进 行 正 确 的 编译 。 在 
下 面 ， 我 们 会 解释 这 些 基础 的 语义 含义 和 用 法 。 


3.3.1 ”给 我 们 的 Shader 起 个 名 字 


每 个 Unity Shader 文 件 的 第 一 行 都 需要 通过 Shader 语 义 来 指定 该 
Unity Shader 的 名 字 。 这 个 名 字 由 一 个 字符 串 来 定义 ， 例 
如 “MyShader”。 当 为 材质 选择 使 用 的 Unity Shader 时 ， 这 些 名 称 束 会 出 
现在 材质 面板 的 下 拉 列 表 里 。 通 过 在 字符 串 中 添加 斜 柱 (%*”) ， 可 以 
控制 Unity Shader 在 材质 面板 中 出 现 的 位 置 。 例 如 : 


Shader "Custom/MyShader™" { } 


那么 这 个 Unity Shader 在 材质 面板 中 的 位 置 承 是 : Shader -> Custom 
-> MyShader， 如 图 3.7 所 示 “。 
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图 3.7 ”在 Unity Shader 的 名 称 定 义 中 利用 斜 杠 来 组 织 在 材质 面板 中 的 位 置 


3.3.2 ”材质 和 Unity Shader 的 桥梁 : Properties 


Properties 语 义 块 中 包含 了 一 系列 属性 (property) ， 这 些 属性 将 
会 出 现在 材质 面板 中 。 


Properties 语 义 块 的 定义 通 单 如 下 : 


Properties { 
Name ("display name", PropertyType) DefaultValue 
Name ("display name", PropertyType) DefaultValue 


// 更 多 属性 


开发 着 们 声明 这 些 属性 是 为 了 在 材质 面板 中 能 够 方便 地 调整 各 种 
材质 属性 。 如 果 我 们 需要 在 Shader 中 访问 它们 ， 束 需要 使 用 每 个 属性 的 
名 字 (Name) 。 在 Unity 中 ， 这 些 属性 的 名 字 通 常 由 一 个 下 划 线 开始 。 
显示 的 名 称 (display name) 则 是 出 现在 材质 面板 上 的 名 字 。 我 们 需要 
为 每 个 属性 指定 它 的 类 型 (PropertyIType) ， 常 见 的 属性 类 型 如 表 3.1 
所 示 。 除 此 之 外 ， 我 们 还 需要 为 每 个 属性 指定 一 个 默认 值 ， 在 我 们 第 


一 次 把 该 Unity Shader 赋 给 某 个 材质 时 ， 材 质 面板 上 显示 的 束 是 这 些 和 
认 值 。 


表 3.1 ”Properties 语义 块 支持 的 属性 类 型 


属性 类 型 默认 值 的 定义 语法 
加 下 


_Range("Range", Range(0.0, 5.0)) = 
number 
3.0 
(number,number,number,number) |_Color ("Color", Color) = (1,1,1,1) 


_Vector ("Vector", Vector) = (2, 3, 6， 
Vector (number,number,number,number) 1) 


"defaulttexture" {} 2D) (oD DD)) = we fh 


"defaulttexture" {} _Cube ("Cube", Cube) = "white" {} 


"defaulttexture" {} _3D ("3D", 3D) = "black" {} 


默 


对 于 Int、Float、Range 这 些 数 字 类 型 的 属性 ， 其 默认 值 束 是 一 个 
单独 的 数字 ; 对 于 Color 和 Vector 这 类 属性 ， 默 认 值 是 用 圆 括号 包围 的 


一 个 四 维 向 量 ;， 对 于 2D、Cube、3D 这 3 种 纹理 类 型 ， 默 认 值 的 定义 稍 
微 复 杂 ， 它 们 的 默认 值 是 通过 一 个 字符 串 后 跟 一 个 伦 括 号 来 指定 的 ， 
其 中 ， 字 符 串 要 么 是 空 鸭 ， 要 么 是 内 置 的 纹理 名 称 ， 

如 “white”“black”“gray” 或 者 "bump”。 花 括号 的 用 处 原本 是 用 于 指定 一 
些 纹理 属性 的 ， 例 如 在 Unity 5.0 以 前 的 版 本 中 ， 我 们 可 以 通过 TexGen 
CubeReflect、TexGen CubeNormal 等 选项 来 控制 固定 管线 的 纹理 坐标 
的 生成 。 但 在 Unity 5.0 以 后 的 版 本 中 ， 这 些 选 项 被 移 除了 ， 如 采 我 们 需 
要 类 似 的 功能 ， 融 需要 目 己 在 顶点 着 色 器 中 编写 计算 相应 纹理 坐标 的 
代码 。 


下 面 的 代码 给 出 了 一 个 展示 所 有 属性 类 型 的 例子 : 


Shader "Custom/ShaderLabProperties" { 

Properties { 
// Numbers and Sliders 
_Int ("Int", InNt) = 2 
_Float ("Float", Float) = 1.5 
_Range("Range", Range(0.0, 5.0)) = 3.0 
// Colors and Vectors 
_Color ("Color", Color) = (1,1,1,1) 
_Vector ("Vector", Vector) = (2, 3, 6, 1) 
// Textures 
_2D ("2D", 2D) 二 I 
_Cube ("Cube", Cube) = "white" {} 
_3D ("3D", 3D) = "black" {} 

} 


FallBack "Diffuse" 


图 3.8 给 出 了 上 述 代 码 在 材质 面板 中 的 显示 结 


@inspector BD | 


ShaderLabpropertieyMat 加 9 
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4 图 3.8 不 同属 性 类 型 在 材质 面板 中 的 显示 结果 


有 时 ， 我 们 想 要 在 材质 面板 上 显示 更 多 类 型 的 变量 ， 例 如 使 用 布 
尔 变 量 来 控制 Shader 中 使 用 哪 种 计算 。Unity 人 允许 我 们 重 载 默 认 的 材质 
编辑 面板 ， 以 提供 更 多 目 定义 的 数据 类 型 。 我 们 在 本 书 资 源 的 材质 
Assets -> Materials -> Chapter3 -> RedifyMat 中 提供 了 这 样 一 个 人 简单 的 例 
子 ， 这 个 例子 参考 了 官方 手册 的 Custom Shader GUI 一 文 
(http://docs.unity3d.com/Manual/SL-CustomShaderGUI.html) 中 的 代 
码 。 


为 了 在 Shader 中 可 以 访问 到 这 些 属性 ， 我 们 需要 在 Cg 代码 厂 中 定 
义 和 这 些 属 性 类 型 相 匹配 的 变量 。 需 要 说 明 的 是 ， 即 使 我 们 不 在 
Properties 语 义 块 中 声明 这 些 属 性 ， 也 可 以 直接 在 Cg 代码 片 中 定义 变 
量 。 此 时 ， 我 们 可 以 通过 脚本 向 Shader 中 传递 这 些 属性 。 因 此 ， 
Properties 语 义 块 的 作用 仪 仅 是 为 了 让 这 些 属性 可 以 出 现在 材质 面板 
中 o 


3.3.3 ”重量 级 成 员 : SubShader 


每 一 个 Unity Shader 文 件 可 以 包含 多 个 SubShader 语 义 块 ， 但 最 少 要 
有 一 个 。 当 Unity 需 要 加 载 这 个 Unity Shader 时 ，Unity 会 扫描 所 有 的 
SubShader 语 义 块 ， 然 后 选择 第 一 个 能 够 在 目标 平台 上 运行 的 
SubShader。 如果 都 不 支持 的 话 ，Unity 就 会 使 用 Fallback 语 义 指 定 的 
Unity Shader ° 


Unity 提 供 这 种 语义 的 原因 在 于 ， 不 同 的 显卡 具有 不 同 的 能 力 。 例 
如 ， 一 些 旧 的 显卡 仅 能 文 持 一 定数 目的 操作 指令 ， 而 一 些 更 高 级 的 显 
卡 可 以 支持 更 多 的 指令 数 ， 那 么 我 们 布 望 在 旧 的 显卡 上 使 用 计算 复 灯 
度 较 低 的 着 色 右 ， 而 在 高 级 的 显卡 上 使 用 计算 复杂 度 较 高 的 着 色 咒 ， 
以 便 提 供 更 出 色 的 画面 。 


SubShader 语 义 块 中 包含 的 定义 通 第 如 下 : 


SubShader { 
// 可 选 的 
[Tags] 


// 可 选 的 
[RenderSetup] 


Pass { 


} 
// Other Passes 


SubShader 中 定义 了 一 系列 Pass 以 及 可 选 的 状态 ([RenderSetup]) 
和 标签 ([Tags]) 设置 。 每 个 Pass 定 义 了 一 次 完整 的 泻 染 流程 ， 但 如 果 
Pass 的 数目 过 多 ， 人 往往 会 造成 泻 染 性 能 的 下 降 。 因 此 ， 我 们 应 尽量 使 
用 最 小 数目 的 Pass。 状 态 和 标签 同样 可 以 在 Pass 声 明 。 不 同 的 是 ， 
SubShader 中 的 一 些 标签 设置 是 特定 的 。 也 就 是 说 ， 这 些 标签 设置 和 
Pass 中 使 用 的 标签 是 不 一 样 的 。 而 对 于 状态 设置 来 说 ， 其 使 用 的 语法 


是 相同 的 。 但 是 ， 如 果 我 们 在 Subshader 进 行 了 这 些 设置 ， 那 么 将 会 
于 所 有 的 Pass。 
。 状态 设置 


ShaderLab 提 供 了 一 系列 渔 染 状态 的 设置 指令 ， 这 些 指令 可 以 设置 
显卡 的 各 种 状态 ， 例 如 是 否 开 启 混 合 /深度 测试 等 。 表 3.2 给 出 了 
ShaderLab 中 常见 的 泻 染 状态 设置 计 项 。 


表 3.2 ”常见 的 演 染 状态 设置 选项 


名 称 
设置 剔除 模式 : 剔除 背面 
Cull Cull Back | Front | Off 
了 /关闭 崭 除 


Z'Test Less Greater | LEqual | GEqual | Equal n ee 
ZTest HBgual | GEqoal | Equal | | 设置 深度 测试 时 使 用 的 画 数 
NotEqual | Always 


ZWrite On | Off 开启 /关闭 深度 写 入 
Blend SrcFactor DstFactor 开启 并 设置 混合 模式 


当 在 SubShader 块 中 设置 了 上 述 泻 染 状态 时 ， 将 会 应 用 到 所 有 的 
Pass。 如 果 我 们 不 想 这 样 (例如 在 双 面 泻 染 中 ， 我 们 希望 在 第 一 个 Pass 
中 剔除 正面 来 对 背面 进行 泻 染 ， 在 第 二 个 Pass 中 崭 除 背面 来 对 正面 进 
行 洽 染 ) ， 可 以 在 Pass 语 义 块 中 单独 进行 上 面 的 设置 。 


。 SubShader 的 标签 


SubShader 的 标签 (Tags) 是 一 个 键 值 对 (Key/Value Pair) ， 它 的 
键 和 值 都 是 字符 串 类 型 。 这 些 键 值 对 是 Subshader 和 演 染 引擎 之 间 的 沟 
通 桥梁 。 它 们 用 来 告诉 Unity 的 演 染 引擎 : 我 希望 怎样 以 及 何 时 泻 染 这 
个 对 象 。 


标签 的 结构 如 下 : 


SubShader 的 标签 块 文 持 的 标签 类 型 如 表 3.3 所 示 。 


表 3.3 ”SubShader 的 标签 类 型 


控制 泻 染 顺 序 ， 指 定 该 物体 属于 
哪 一 个 渲染 队列 ， 通 过 这 种 方式 
可 以 保证 所 有 的 透明 物体 可 以 在 
所 有 不 透明 物体 后 面 被 泻 染 ( 详 
见 第 8 章 ) ， 我 们 也 可 以 自 定义 使 
的 演 染 队列 来 控制 物体 的 演 染 
贰 序 


Tags { "Queue" = 


"Transparent" } 


对 着 色 器 进行 分 类 ， 例 如 这 是 一 
个 不 透明 的 着 色 器 ， 或 是 一 个 透 


A . , |Tags { "RenderType" = 
RenderType 明 的 着 色 器 等 。 这 可 以 被 用 于 着 


色 器 替换 (Shader Replacement) 
功能 


"Opaque" } 


一 些 SubShader 在 使 用 Unity 的 批 
处 理 功能 时 会 出 现 问题 ， 例 如 使 
3 了 模型 空间 下 的 坐标 进行 顶点 |Tags { "DisableBatching" 
动画 〈 详 见 11.3 节 ) 。 这 时 可 以 ”|= "True"} 

通过 该 标签 来 直接 指明 是 否 对 该 

SubShader 使 用 批 处 理 


DisableBatching 


Tags { 


] 该 SubShader 的 物体 是 
阴影 ( 详 见 8.4 节 ) 


ForceNoShadowCasting "ForceNoShadowCasting" 


= "True" } 


如 果 该 标签 值 为 “True”， 那 么 使 
该 SubShader 的 物体 将 不 会 受 Tags { "IgnoreProjector" 
Projector 的 影响 。 通 常用 于 半 透 |= "True"} 


明 物 体 


IgnoreProjector 


当 该 SubShader 是 用 于 精灵 Tags { 


CanUseSpriteAtlas (sprites) 时 ， 将 该 标签 设 "CanUseSpriteAtlas" = 
为 “False” "False" } 


指明 材质 面板 将 如 何 预览 i 
质 。 默 认 情 况 下 ， 材 质 将 
PreviewType 一 个 球形 ， 我 们 可 以 通关 
签 的 值 设 为 “Plane”SkyBox” 来 改 
变 预览 类 型 


Tags { "PreviewType" = 
"Plane" } 


具体 的 标签 设置 我 们 会 在 本 书后 面 的 章 市 中 讲 到 。 


需要 注意 的 是 ， 上 述 标签 仅 可 以 在 SubSshader 中 声明 ， 而 不 可 以 在 
Pass 块 中 声明 。Pass 块 虽然 也 可 以 定义 标签 ， 但 这 些 标签 是 不 同 于 
SubShader 的 标签 类 型 。 这 是 我 们 下 面 将 要 讲 到 的 。 


。 Pass 语 义 块 


Pass 语 义 块 包 全 的 语义 如 下 : 


Pass { 
[Name] 
[Tags] 


[RenderSetup] 
// Other code 


} 


首 完 ， 我 们 可 以 在 Pass 中 定义 该 Pass 的 名 称 ， 例 如 : 


通过 这 个 名 称 ， 我 们 可 以 使 用 ShaderLab 的 UsePass 命 令 来 直接 使 用 
其 他 Unity Shader 中 的 Pass。 例 如 : 


这 样 可 以 提高 代码 的 复 用 性 。 需 要 注意 的 是 ， 由 于 Unity 内 部 会 把 
所 有 Pass 的 名 称 转换 成 大 写字 母 的 表示 ， 因 此 ， 在 使 用 UsePass 命 令 时 
必须 使 用 大 写 形 式 的 名 字 。 


其 次 ， 我 们 可 以 对 Pass 设 置 泻 染 状 态 。SubShader 的 状态 设置 同样 
适用 于 Pass。 除 了 上 面 提 到 的 状态 设置 外 ， 在 Pass 中 我 们 还 可 以 使 用 回 
定 管线 的 着 色 器 ( 详 见 3.4.3 节 ) 命令 。 


Pass 同 样 可 以 设置 标签 ， 但 它 的 标签 不 同 于 SubShader 的 标签 。 这 
些 标签 也 是 用 于 告诉 渲染 引擎 我 们 希望 怎样 来 演 染 该 物体 。 表 3.4 给 出 
了 Pass 中 使 用 的 标签 类 型 。 


表 3.4 Pass 的 标签 类 型 


Tags { 
LightMode 定义 该 Pass 在 Unity 的 泻 染 流水 线 中 的 角色 "LightMode" = 


"ForwardBase" } 


Tags { 


用 于 指定 当 满足 某 些 条 件 时 才 泻 染 该 Pass， 它 的 


"RequireOptions" 


0 。| 值 是 一 个 由 空格 分 隔 的 字符 趾 。 目 前 ，Unity 支 持 
equlireOptions 、 Ee 二 
直上 | 的 选项 有 :SoftVegetation。 在 后 面 的 版 本 中 ， 


能 会 增加 更 多 的 选项 


"SoftVegetation" 
} 


除了 上 面 普通 的 Pass 定 义 外 ，Unity Shader 还 支持 一 些 特殊 的 
Pass， 以 便 进 行 代码 复 用 或 实现 更 复杂 的 效 采 。 


。 UsePass: 如 我 们 之 前 提 到 的 一 样 ， 可 以 使 用 该 命令 来 复 用 其 他 
Unity Shader 中 的 Pass; 

。 GrabPass: 该 Pass 负 责 抓 取 屏 幕 并 将 结果 存储 在 一 张 纹理 中 ， 以 
用 于 后 续 的 Pass 处 理 〈 详 见 10.2.2 节 ) 。 


如 果 读 者 对 上 述 出 现 的 某 些 定义 和 名 词 无 法 理解 ， 也 不 要 担心 。 
在 本 书后 面 的 章节 中 ， 我 们 会 对 这 些 内 容 进行 更 加 深入 的 讲解 。 


3.3.4” 留 一 条 后 路 : Fallback 


紧 跟 在 各 个 SupSshader 语 义 块 后 面 的 ， 可 以 是 一 个 Fallpack 指 令 
它 用 于 告诉 Unity, “如 果 上 面 所 有 的 SubShader 在 这 块 显卡 上 都 不 能 运 
行 ， 那 么 就 使 用 这 个 最 低级 的 Shaderl 双 ! ” 


它 的 语义 如 下 : 


Fallback "name" 
// 或 者 
Fallback Off 


如 上 所 述 ， 我 们 可 以 通过 一 个 字符 串 来 告诉 Unity 这 个 “最 低级 的 
Unity Shader" 是 谁 。 我 们 也 可 以 任性 地 关闭 Fallback 功 能 ， 但 一 旦 你 这 
么 做 ， 你 的 意思 大 概 就 是 : “如 果 一 块 显卡 跑 不 了 上 面 所 有 的 
SubShader， 那 残 不 要 管 它 了 1! ” 


下 面 给 出 了 一 个 使 用 Fallback 语 句 的 例子 : 


Fallback "VertexLit" 


事实 上 ，Fallback 还 会 影响 阴影 的 投 冉 。 在 泻 染 阴影 纹理 时 ，Unity 
会 在 每 个 Unity Shader 中 寻找 一 个 阴影 投 映 的 Pass。 通 第 情 况 下 ， 我 们 
不 需要 自己 专门 实现 一 个 Pass， 这 是 因为 Fallback 使 用 的 内 置 Shader 中 
包含 了 这 样 一 个 通用 的 Pass。 因 此 ， 为 每 个 Unity Shader 正 确 设置 
Fallback 是 非常 重要 的 。 更 多 天 于 Unity 中 阴影 的 实现 ， 可 以 参见 9.4 


J++ 


国民 | Le 


3.3.5 ”ShaderLab 还 有 其 他 的 语义 吗 


除了 上 述 的 语义 ， 还 有 一 些 不 各 用 到 的 语义 。 例 如 ， 如 宁 我 们 不 
满足 于 Unity 内 置 的 属性 类 型 ， 想 要 上 自 定 义 材质 面板 的 编辑 界面 ， 束 可 
以 使 用 CustomEditor 语 义 来 扩展 编辑 界面 。 我 们 还 可 以 使 用 Category 语 
义 来 对 Unity Shader 中 的 命令 进行 分 组 。 由 于 这 些 命 令 很 少 用 到 ， 本 书 
将 不 再 进行 深入 的 讲解 。 


3.4 Unity Shader 的 形式 


在 上 面 ， 我 们 讲 了 Unity Shader 文 件 的 结构 以 及 ShaderLab 的 语法 。 
尽管 Unity Shader 可 以 做 的 事情 非常 多 (例如 设置 泻 染 状态 等 ， 但 其 
最 重要 的 任务 还 是 指定 各 种 着 色 器 所 需 的 代码 。 这 些 着 色 器 代码 可 以 
写 在 SubShader 语 义 块 中 (表面 着 色 器 的 做 法 ， 也 可 以 写 在 Pass 语 义 
块 中 〈 顶 点 / 片 元 着 色 器 和 固定 函数 着 色 器 的 做 法 ) 


在 Unity 中 ， 我 们 可 以 使 用 下 面 3 种 形式 来 编写 Unity Shader。 而 不 
管 使 用 哪 种 形式 ， 真 正 意义 上 的 Shader 代 码 都 需要 包含 在 ShaderLab 语 
义 块 中 ， 如 下 所 示 : 


Shader "MyShader™" { 
Properties { 


// 所 需 的 各 种 属性 


} 
SubShader { 
// 真正 意义 上 的 Shader 代 码 会 出 现在 这 里 
// 表面 着 色 器 (Surface Shader) 或 者 
顶点 / 片 元 着 色 器 (Vertex/Fragment Shader) 或 者 


司 定 函数 着 色 器 (Fixed Function Shader) 


} 

SubShader { 
// 和 上 一 个 SubShader 类 似 

} 


} 


3.4.1 Unity 的 宠儿 : 表面 着 色 器 


表面 着 色 器 (Surface Shader) 是 Unity 自 己 创造 的 一 种 着 色 器 代码 
类 型 。 它 需要 的 代码 量 很 少 ，Unity 在 背后 做 了 很 多 工作 ， 但 泻 染 的 代 
价 比较 大 。 它 在 本 质 上 和 下 面 要 讲 到 的 顶点 / 片 元 着 色 器 是 一 样 的 。 世 
束 是 说 ， 当 给 Unity 提 供 一 个 表面 着 色 右 的 时 候 ， 它 在 背后 仍旧 把 它 转 
换 成 对 应 的 顶点 / 片 元 着 色 鲁 。 我 们 可 以 理解 成 ， 表面 着 色 如 是 Unity 对 
顶点 / 片 元 着 色 器 的 更 高 一 层 的 抽象 。 它 存在 的 价值 在 于 ，Unity 为 我 们 
处 理 了 很 多 光照 细 市 ， 使 得 我 们 不 需要 再 操心 这 些 “ 烦 人 的 事情 ”。 


一 个 非 芝 简单 的 表面 看 色 肉 示例 代码 如 下 : 


Shader "Custom/Simple Surface Shader"™" { 
SubShader { 
Tags { "RenderType" = "Opaque" } 
CGPROGRAM 
#pragma surface surf Lambert 
struct Input 
float4 color : COLOR; 


/ 
void surf (Input IN, inout SurfaceOutput 0) { 
0.Albedo = 1; 


} 
ENDCG 


} 
Fallback "Diffuse" 


从 上 述 程 序 中 可 以 看 出 ， 表 面 着 色 器 被 定义 在 SubShader 语 义 块 
(而 非 Pass 语 义 块 ) 中 的 CGPROGRAM 和 ENDCG 之 间 。 原 因 是 ， 表 面 
着 色 器 不 需要 开发 者 关心 使 用 多 少 个 Pass、 每 个 Pass 如 何 泻 染 等 问题 ， 
Unity 会 在 背后 为 我 们 做 好 这 些 事情 。 我 们 要 做 的 只 是 告诉 它 :“ 嘿 ， 使 
用 这 些 纹理 去 填充 颜色 ， 使 用 这 个 法 线 纹理 去 填充 法 线 ， 使 用 Lambert 
光照 模型 ， 其 他 的 不 要 来 烦 我 ! ”。 


CGPROGRAM 和 ENDCG 之 间 的 代码 是 使 用 Cg&/HLSL 编 写 的 ， 也 就 
是 说 ， 我 们 需要 把 Cg/HLSL 语 言 敬 套 在 ShaderLab 语 言 中 。 值 得 注意 的 
是 ， 这 里 的 Cg/HLSL 是 Unity 经 封装 后 提供 的 ， 它 的 语法 和 标准 的 
Cg/HLSL 语 法 几乎 一 样 ， 但 还 是 有 细微 的 不 同 ， 例 如 有 些 原生 的 函数 
和 用 法 Unity 并 没有 提供 支持 。 


3.4.2 ”最 聪明 的 孩子 : 顶点 / 片 元 着 色 器 


在 Unity 中 我 们 可 以 使 用 Cg/HLSL 语 言 来 编写 顶点 / 片 元 着 色 器 
(Vertex/Fragment Shader) 。 它 们 更 加 复杂 ， 但 灵活 性 也 更 高 。 


一 个 非常 簿 单 的 顶点 / 片 元 着 色 融 示例 代码 如 下 : 


Shader "Custom/Simple VertexFragment Shader" { 
SubShader { 
Pass 


{ 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


float4 vert(float4 v : POSITION) : SV_POSITION { 
return mul (UNITY_MATRIX_MVP, v); 


fixed4 frag() : SV_Target { 
return fixed4(1.0,0.0,0.0,1.0); 


ENDCG 


和 表面 着 色 器 类 似 ， 顶 点 / 片 元 着 色 器 的 代码 也 需要 定义 在 
CGPROGRAM 和 ENDCG 之 间 ， 但 不 同 的 是 ， 顶 点 / 片 元 着 色 丹 是 写 在 
Pass 语 义 块 内 ， 而 非 SubShader 内 的 。 原 因 是 ， 我 们 需要 自己 定义 每 个 


Pass 需 要 使 用 的 Shader 人 代码。 虽然 我 们 可 能 需要 编写 更 多 的 代码 ， 但 带 
来 的 好 处 是 灵活 性 很 高 。 更 重要 的 是 ， 我 们 可 以 控制 泻 染 的 实现 细 
节 。 同 样 ， 这 里 的 CGPROGRAM 和 ENDCG 之 间 的 代码 也 是 使 用 
Cg/HLSL 编 写 的 。 


3.4.3 ”被 抛弃 的 角落 : 固定 函数 着 色 器 


上 面 两 种 Unity Shader 形 式 都 使 用 了 可 编程 管线 。 而 对 于 一 些 较 旧 
的 设备 〈 其 GPU 仅 支 持 DirectX 7.0、OpenGL 1.5 或 OpenGL ES 1.1) ， 
例如 iPhone 3， 它 们 不 支持 可 编程 管线 着 色 器 ， 因 此 ， 这 时 候 我 们 就 需 
要 使 用 固定 函数 着 色 器 (Fixed Function Shader) 来 完成 渲染 。 这 些 着 
色 器 往往 只 可 以 完成 一 些 非常 简单 的 效果 。 


一 个 非 芝 简单 的 固定 函数 独 色 夯 示 例 代 码 如 下 : 


Shader "Tutorial/Basic" { 
Properties { 
_Color ("Main Color", Color) = (1,0.5,0.5,1) 


} 
SubShader { 
Pass { 
Material { 
Diffuse [_Colorl] 


} 
Lighting On 


可 以 看 出 ， 固 定 函 数 看 色 右 的 代码 个 定义 在 Pass 语 义 块 中 ， 这 些 
代码 相当 于 Pass 中 的 一 些 泻 染 设置 ， 正 如 我 们 之 前 在 3.3.3 节 中 提 到 的 
一 样 。 


对 于 国定 函数 着 色 咒 来 说 ， 我 们 需要 完全 使 用 ShaderLab 的 语法 
(即使 用 ShaderLab 的 泻 染 设 置 命令 ) 来 编写 ， 而 非 使 用 Cg/HLSL 。 


由 于 现在 绝 大 多 数 GPU 都 文 持 可 编程 的 演 染 管线 ， 这 种 固定 管线 
的 编程 方式 已 经 逐渐 被 抛 章 。 实 际 上 ， 在 Unity 5.2 中 ， 所 有 固定 函数 着 
色 器 都 会 在 背后 补 Unity 编 译 成 对 应 的 顶点 / 片 元 着 色 妖 ， 因 此 真正 意义 

上 的 固定 函数 着 色 器 已 经 不 存在 了 。 


3.4.4 ”选择 哪 种 Unity Shader 形 式 


那么 ， 我 们 究竟 选择 哪 一 种 来 进行 Unity Shader 的 编写 呢 ? 这 里 给 
出 了 一 些 建议 。 


。 除非 你 有 非常 明确 的 需求 必须 要 使 用 固定 函数 着 色 器 ， 例 如 需要 
在 非常 旧 的 设备 上 运行 你 的 游戏 (这 些 设 备 非常 少见 ，， 否 则 请 
使 用 可 编程 管线 的 春色 郁 ， 即 表面 着 色 融 或 顶点 / 片 元 着 色 郁 。 

。 如 采 你 想 和 各 种 光源 打交道 ， 你 可 能 更 喜欢 使 用 表面 着 色 器 ， 但 
需要 小 心 它 在 移动 平台 的 性 能 表现 。 

。 如 采 你 需要 使 用 的 光照 数目 非常 少 ， 例 如 只 有 一 个 平行 光 ， 那 么 
使 用 顶点 / 片 元 着 色 右 是 一 个 更 好 的 克 择 。 

。 最 重要 的 是 ， 如 采 你 有 很 多 目 定义 的 泻 染 效果 ， 那 么 请 选择 顶点 / 
片 元 着 色 器 。 


3.5 本 书 使 用 的 Unity Shader 形 式 


本 书 的 目的 不 仅 在 于 教 给 读者 如 何 使 用 Unity Shader， 更 重要 的 是 
想 要 让 读者 掌握 泻 染 背 后 的 原理 。 仅 仅 了 解 高 层 抽象 虽然 可 能 会 暂时 


使 工作 和 商 化 ， 但 从 长 久 来 看 “ 知 其 然而 不 知 其 所 以 然 ? 所 带 来 的 影响 更 


加 深远 。 


因此， 在 本 书 接 下 来 的 内 容 中 ， 我 们 将 看 重 使 用 顶点 / 厂 元 大 色 如 
来 进行 Unity Shader 的 编写 。 对 于 表面 着 色 右 来 说 ， 我 们 会 在 本 书 的 第 
17 章 中 进行 剖析 ， 读 者 可 以 在 那里 找到 更 多 的 学 习 内 容 。 


3.6 答疑 解 惑 


尽管 在 之 前 的 内 容 中 涵盖 了 很 多 基础 内 容 ， 这 里 仍 给 出 一 些 初 学 
者 间 见 的 困惑 之 处 ， 并 给 予 说 明和 解释 。 


3.6.1 ”Unity Shader != 真正 的 Shader 


需要 读者 注意 的 是 ，Unity Shader 并 不 等 同 于 第 2 章 中 所 讲 的 
Shader， 尽 管 Unity Shader 翻 译 过 来 束 是 Unity 痢 色 塘 。 在 Unity 里 ， 
Unity Shader 实 际 上 指 的 束 古 一 个 ShaderLab 文 件 一 一 便 表 上 以 .shader 作 
为 文件 后 组 的 一 种 文件 。 


在 Unity Shader (或 者 说 是 ShaderLab 文 件 ) 里 ， 我 们 可 以 做 的 事情 
远 多 于 一 个 传统 意义 上 的 Shader 。 


。 在 传统 的 Shader 中 ， 我 们 仅 可 以 编写 特定 类 型 的 Shader， 例 如 顶点 
着 色 器 、 片 元 着 色 句 等 。 而 在 Unity Shader 中 ， 我 们 可 以 在 同一 个 
文件 里 同时 包含 需要 的 顶点 着 色 器 和 片 元 着 色 右 代码 。 

。 在 传统 的 Shader 中 ， 我 们 无 法 设置 一 些 洽 染 设 置 ， 例 如 是 否 开局 泥 
合 、 深 度 测 试 等 ， 这 些 是 开发 者 在 另外 的 代码 中 上 自行 设置 的 。 而 


在 Unity Shader 中 ， 我 们 通过 一 行 特定 的 指令 融 可 以 完成 这 些 设 
置 。 
。 在 传统 的 Shader 中 ， 我 们 需要 编写 见长 的 代码 来 设置 着 色 句 的 输入 
和 输出 ， 要 小 心地 处 理 这 些 输入 输出 的 位 置 对 应 关系 等 。 而 在 
Unity Shader 中 ， 我 们 只 需要 在 特定 语句 块 中 声明 一 些 属性 ， 就 可 
以 依靠 材质 来 方便 地 改变 这 些 属性 。 而 且 对 于 模型 目 带 的 数据 

(如 顶点 位 置 、 纹 理 坐 标 、 法 线 等 ) ，Unity Shader 也 提供 了 直接 
访问 的 方法 ， 不 需要 开发 者 自行 编码 来 传 给 着 色 器 。 


当然 ，Unity Shader 除 了 上 述 这 些 优点 外 ， 也 有 一 些 缺 点 。 由 于 
Unity Shader 的 高 度 封装 性 ， 我 们 可 以 编写 的 Shader 类 型 和 语法 都 被 限 
制 了 。 对 于 一 些 类 型 的 Shader， 例 如 曲面 细 分 着 色 器 (Tessellation 
Shader) 、 几 何 着 色 器 (Geometry Shader) 等 ，Unity 的 支持 就 相对 差 
一 些 。 例 如 ，Unity 4.x 仅 在 DirectX 11 平 台 下 提供 曲面 细 分 着 色 器 、 几 
何 着 色 器 的 相关 功能 ， 而 对 于 OpenGL 平 台 则 没有 这 些 支 持 。 除 此 之 
外 ， 一 些 高 级 的 Shader 语 法 Unity Shader 也 不 支持 。 


可 以 说 ，Unity Shader 提 供 了 一 种 让 开发 者 同时 控制 渔 染 流水 线 中 
多 个 阶段 的 一 种 方式 ， 不 仅仅 是 提供 Shader 代 码 。 作 为 开发 者 而 言 ， 我 
们 绝 大 部 分 时 候 只 需要 和 Unity Shader 打 交道 ， 而 不 需要 关心 泻 染 引擎 
底层 的 实现 细 亡 。 


3.6.2 ”Unity Shader 和 Cg/HLSL 之 间 的 关系 


正如 我 们 之 前 所 讲 ，Unity Shader 是 用 ShaderLab 语 言 编写 的 ， 但 对 
于 表面 着 色 器 和 顶点 / 片 元 着 色 器 ， 我 们 可 以 在 ShaderLab 内 部 舱 套 
Cg/HLSL 语 言 米 编写 这 些 着 色 器 代码 。 这 些 Cg/HLSL 代 码 是 骸 套 在 


CGPROGRAM 和 ENDCG 之 间 的 ， 正 如 我 们 之 前 看 到 的 示例 代码 一 样 。 
由 于 Cg 和 DX9 风 格 的 HLSL 从 写法 上 来 说 几乎 是 同一 种 语言 ， 因 此 在 
Unity 里 Cg 和 HLSL 是 等 价 的 。 我 们 可 以 说 ，Cg/HLSL 代 码 是 区 别 于 
ShaderLab 的 男 一 个 世界 。 


通常 ，Cg 的 代码 片段 是 位 于 Pass 语 义 块 内 部 的 ， 如 下 所 示 : 


st 
// Pass 的 标签 和 状态 设置 


CGPROGRAM 

// 编译 指令 ， 例 如 : 
#pragma vertex vert 
#pragma fragment frag 


// Cg 代码 


ENDCG 
// 其 他 一 些 设置 


读者 可 能 会 有 疑问 :“ 之 前 不 是 说 在 表面 着 色 句 中 ，Cg/HLSL 代 码 
是 写 在 SubShader 语 义 块 内 吗 ? 而 不 是 Pass 块 内 。” 的 确 ， 在 表面 着 色 器 
中 ，Cg/HLSL 代 码 是 写 在 SubShader 语 义 块 内 ,但 是 读者 应 该 还 记得 ， 
表面 着 色 器 在 本 质 上 就 是 顶点 / 片 元 着 色 器 ， 它 们 看 起 来 很 不 像 是 因为 
表面 着 色 器 是 Unity 在 顶点 / 片 元 着 色 器 上 层 为 开发 者 提供 的 一 层 抽象 封 
装 ， 但 在 背后 ，Unity 还 是 会 把 它 转化 成 一 个 包含 多 Pass 的 顶点 / 片 元 着 
色 絮 。 我 们 可 以 在 Unity Shader 的 导入 设置 面板 中 单 击 Show generated 
code 按 钮 来 查看 生成 的 真正 的 顶点 / 片 元 着 色 句 代码 。 可 以 说 ， 从 本 质 
上 来 讲 ，Unity Shader 只 有 两 种 形式 : 顶点 / 片 元 着 色 器 和 固定 函数 着 色 
器 (在 Unity 5.2 以 后 的 版 本 中 ， 固 定 函 数 着 色 器 也 会 在 背后 被 转化 成 顶 
点 / 片 元 着 色 器 ， 因 此 从 本 质 上 来 说 Unity 中 只 存在 顶点 / 片 元 着 色 器 ) 


在 提供 给 编程 人 员 这 些 便 利 的 背后 ，Unity 编 辑 器 会 把 这 些 Cg 片 段 
编译 成 低级 语言 ， 如 汇编 语言 等 。 通 常 ，Unity 会 自动 把 这 些 Cg 片 段 编 
译 到 所 有 相关 平台 (这 里 的 平台 是 指 不 同 的 泻 染 平台 ， 例 如 Direct3D 
9、OpenGL、Direct3D 11、OpenGL ES 等 ) 上 。 这 些 编译 过 程 比较 复 
杂 ，Unity 会 使 用 不 同 的 编译 器 来 把 Cg 转换 成 对 应 平台 的 代码 。 这 样 就 

会 在 切换 平台 时 再 重新 编译 ， 而 且 如 果 代 码 在 某 些 平台 上 发 生 错误 
不可 以 立刻 得 到 错误 信息 。 


正如 在 3.1.3 节 中 看 到 的 一 样 ， 我 们 可 以 在 Unity Shader 的 导入 设置 
面板 上 查看 这 些 编译 后 的 代码 ， 查 看 这 些 代 人 码 有 助 于 进行 Debug 或 优化 
等 ， 如 图 3.9 所 示 。 


1mported Object 
党 Custom/NewSurfaceShader 各。 


Surface shader | Show peoaraoed code 
Foved function no 

Complled code | 
Castshadows | 
Render queue 
LOD 

个 more projector 
Disable barching 


和 图 3.9 在 Unity Shader 的 导入 设置 面板 中 可 以 通过 Compile and show code 按 钮 来 查看 Unity 对 
CG 片段 编译 后 的 代码 。 通 过 单 击 Compile and show code 按 钮 右 端的 倒 三 角 可 以 打开 下 拉 菜 单 ， 
在 这 个 下 拉 沫 单 中 可 以 选择 编译 的 平台 种 类 ， 如 只 为 当前 的 显卡 设备 编译 特定 的 汇编 代码 ， 或 
为 所 有 的 平台 编译 汇编 代码 ， 我 们 也 可 以 自 定义 选择 编译 到 哪些 平台 上 


出 


但 当 发 布 游戏 的 时 候 ， 游 戏 数据 文件 中 只 包含 目标 平台 需要 的 编 
译 代码 ， 而 那些 在 目标 平台 上 不 需要 的 代码 部 分 就 会 被 移 除 。 例 如 ， 
当 发 布 到 Mac OS 义 平台 上 时 ，DirectX 对 应 的 代码 部 分 就 会 被 移 除 。 


3.6.3 ”我 可 以 使 用 GLSL 来 写 吗 


当然 可 以 。 如 有 果 你 坚持 说 : “我 陇 是 不 想 用 CgHLSL 来 写 ! 就 十 要 
使 用 GLSL 来 写 ! ”， 但 是 这 意味 着 你 可 以 发 布 的 目标 平台 就 只 有 Mac 
OS X、OpenGL ES 2.0 或 者 Linux， 而 对 于 PC、Xbox 360 这 样 的 仅 支 持 
DirectX 的 平台 来 说 ， 你 就 放弃 它们 了 。 


建立 在 你 坚持 要 用 GLSL 来 写 Unity Shader 的 意愿 下 ， 你 可 以 怎么 写 
呢 ? 和 Cg/HLSL 需 要 骨 套 在 CGPROGRAM 和 ENDCG 之 间 类 似 ，GLSL 
的 代码 需要 舱 套 在 GLSLPROGRAM 和 ENDGLSL 之 间 。 


更 多 关于 如 何在 Unity Shader 中 写 GLSL 代 码 的 内 容 可 以 在 Unity 官 
方 手册 的 GLSL Shader Programs 一 文 
(http://docs.unity3d.com/Manual/SL-GLSLShaderPrograms.html) 中 找 
到 *。 


3.7 扩展 阅读 


Unity 官 网 上 天 于 Unity Shader 方 面 的 文档 正在 不 断 补 充 中 ， 由 于 
Unity 封 装 了 很 多 功能 和 细节 ， 因 此 ,如 有 果 读 者 在 使 用 Unity Shader 的 过 程 
中 珊 到 了 问题 可 以 去 到 官方 文档 (http://docs.unity3d.com/Manual/SL- 
Reference.html) 中 查看 。 除 此 之 外 ，Unity 也 提供 了 一 些 人 简单 的 着 色 群 
编写 教程 (http://docs.unity3d.com/Manual/ShaderTut1.html, 
http://docs.unity3d.com/Manual/ ShaderTut2.html) 。 由 于 在 Unity Shader 
中 ， 绝 大 多 数 可 编程 管线 的 着 色 需 代码 是 使 用 Cg 语言 编写 的 ， 读 者 可 
以 在 NVIDIA 提 供 的 Cg 文档 (http://http.developer.nvidia.com/Cg/) 中 找 
到 更 多 的 内 容 。NVIDIA 同 样 提供 了 一 个 系列 教程 


(http://http.developer.nvidia.com/CgTutorial/cgtutorial chapter01.html) 
来 帮助 初学 者 掌握 Cg 的 基本 语法 。 


第 4 章 ”学 习 Shader 所 需 的 数学 基础 


不 全数 学 着 不 得 入 内 。 
一 一 十 希腊 柏拉图 学 院 门口 的 碑文 


计算 机 图 形 学 之 所 以 深奥 难 履 ， 很 大 原因 是 在 于 它 是 建立 在 虚拟 
世界 上 的 数学 模型 。 数 学 渗透 到 图 形 学 的 方方面面 ， 当 然 也 包括 
Shader。 在 学 习 Shader 的 过 程 中 ， 我 们 最 常 使 用 的 就 是 矢量 和 和 矩阵 ( 即 
数学 的 分 文 之 一 一 线性 代数 ) 。 


Ht 


很 多 读者 认为 独 形 学 中 的 数学 复杂 难 懂 。 的 确 ， 一 些 数学 模型 在 
切 学 者 看 来 隆 汲 难 懂 。 但 很 多 情况 下 ， 我 们 需要 打交道 的 只 是 一 些 基 
础 的 数学 运算 ， 而 只 要 掌握 了 这 些 内 容 ， 束 会 发 现 很 多 事情 可 以 迎 尺 
而 解 。 我 们 在 研究 和 学 习 他 人 编写 的 Shader 代 码 时 ， 也 不 再 会 疑 

问 : “他 为 什么 要 这 么 写 "， 而 是 “ 哦 ， 这 里 就 是 使 用 矩阵 进行 了 一 个 变 
换 而 已 。 


和 证 


为 了 让 读 考 能 够 参与 到 计算 中 来 ， 而 不 是 填 鸭 式 地 阅读 ， 在 一 些 
小 节 的 最 后 我 们 会 给 出 一 些 练习 题 。 练 习题 的 答案 会 在 本 章 最 后 给 出 
(不 要 偷 看 答案 ! ) 。 需 要 注意 的 是 ， 这 些 练习 题 并 不 是 可 有 可 无 
的 ， A ee De i ee 
用 这 些 练习 题 来 阐述 一 些 容易 出 错 或 实践 中 常见 的 问题 。 通 过 这 些 练 
习题 ， 读 者 可 以 对 本 下 内 容 有 更 加 次 刻 的 理解 。 


那么 ， 拿 起 笔 来 ， 让 我 们 一 起 走 进 数学 的 世界 吧 
4.1 背景 : 农场 游戏 


为 了 让 读者 更 加 理解 数学 计算 的 几何 意义 ， 我 们 先 来 假定 一 个 场 
景 。 现 在 ， 假 设 我 们 正在 开发 一 款 卡通 风格 的 农场 游戏 。 在 这 个 游戏 
里 ， 玩 家 可 以 在 农场 里 养 很 多 可 爱 的 奶牛 。 与 普通 农场 游戏 不 同 的 
征 ， 我 们 的 主角 不 是 玩家 ， 而 是 一 头 牛 一 一 妞妞 ， 如 岁 4.1 所 示 。 妞 妞 
不 仅 长 得 壮 ， 而 且 它 对 很 多 事情 都 充满 了 好 奇 心 。 


A 图 4.1 我 们 的 农场 游戏 。 我 们 的 主角 妞妞 是 一 头 长 得 最 壮 、 好 奇 心 很 强 的 奶牛 


读者 :为 什么 游戏 主角 不 是 玩家 呢 ? 我 们 ， 因 为 我 们 的 策划 就 是 
A 


在 故事 的 一 开始 ， 农 场 世界 是 没有 数学 概念 的 。 通 过 下 面 的 学 
习 ， 我 们 会 见证 数学 给 这 个 世界 市 来 了 和 皇 样 翻天 履 地 的 变化 。 


4.2 笛 卡 儿 坐 标 系 


在 游戏 制作 中 ， 我 们 使 用 数学 绝 大 部 分 都 是 为 了 计算 位 置 、 距 离 
和 角度 等 变量 。 而 这 些 计算 大 部 分 都 是 在 笛 卡 儿 坐 标 系 (Cartesian 
Coordinate System ) 下 进行 的 。 这 个 名 字 来 源 于 法 国 伟大 的 哲学 家 、 
物理 学 家 、 心 理学 家 、 数 学 家 笛 卡 儿 (René Descartes) 。 


那么 ， 我 们 为 什么 需要 备 卡 儿 坐 标 系 呢 ? 有 这 样 一 个 传说 ， 讲 壕 
了 人 鱼 卡 儿 提 出 笛 卡 儿 坐 标 系 的 由 来 。 人 省 卡 儿 从 小 体弱多病 ， 所 以 他 所 
在 的 寄 入 学校 的 老师 允许 他 可 以 一 直 留 在 床上 直到 中 午 。 在 省 卡 儿 的 
一 生 中 ， 他 每 天 的 上 午时 光 几 乎 都 是 在 床上 度 过 的 。 第 卡 儿 并 没有 把 
这 段 时 间 用 在 睡懒觉 上 ， 而 生 思 考 了 很 多 关于 数学 和 哲学 上 的 问题 。 
有 一 天 ， 佣 卡 儿 发 现 一 只 苍蝇 在 天 花 板 上 疏 来 朴 去 ， 他 观察 了 很 长 一 
段 时 间 。 佣 卡 儿 想 : 我 要 如 何 来 摘 述 这 只 个 蝇 的 运动 轨迹 呢 ? 最 后 ， 
笛 卡 儿 意 识 到 ， 他 可 以 使 用 这 只 苍蝇 距离 房间 内 不 同 墙 面 的 位 置 来 描 
述 ， 如 图 4.2 所 示 。 他 从 床上 起 喘 ， 写 下 了 他 的 发 现 。 然 后 ， 他 试图 摘 
述 一 些 点 的 位 置 ， 正 如 他 要 摘 述 爷 蝇 的 位 置 一 样 。 最 后 ， 华 卡 儿 束 发 
明了 这 个 坐标 平面 。 而 这 个 坐标 平面 后 来 逐渐 发 展 ， 束 形成 了 侍 标 系 
系统 。 人 们 为 了 纪念 第 卡 儿 的 工作 ， 束 用 他 的 名 字 来 给 这 种 坐标 系 进 
行 信 种 * 


A 图 4.2 传说 ， 币 卡 儿 坐标 系 来 源 于 第 卡 儿 对 天 花 板 上 一 只 苍蝇 的 运动 轨迹 的 观察 。 笛 卡 儿 
发 现 ， 可 以 使 用 苍蝇 距 不 同 墙 面 的 距离 来 描述 它 的 当前 位 置 


当然 ， 上 面 传说 的 可 靠 性 无 从 验证 。 一 些 较真 儿 的 读者 就 不 用 急 
着 向 本 书 勘误 邮箱 中 发 邮件 说 : “ 嘿 ， 你 简直 是 胡说 ! ”不 过 ， 读 者 可 
以 从 这 个 传说 中 发 现 ， 笛 卡 儿 坐标 系 和 我 们 的 生活 是 密切 相关 的 。 
4.2.1 二 维 笛 卡 儿 坐 标 系 

事实 上 ， 读 者 很 可 能 一 直 在 用 二 维 笛 卡 儿 坐标 系 ， 尽 管 你 可 能 3 
没有 听 过 第 卡 儿 这 个 名 词 。 你 还 记得 在 《 哈 利 波 特 与 魔法 石 》 电 影 


中 ， 哈 利和 罗 恩 大 战 奇 阁 教 授 的 魔法 棋 副 吗 ? 这 里 的 国际 象棋 棋 到 也 
可 以 理解 成 是 一 个 二 维 的 第 卡 儿 坐标 系 。 


图 4.3 显 示 了 一 个 二 维和 贡 卡 儿 坐 标 系 。 它 是 不 是 很 像 一 个 棋盘 呢 ? 


ty 


风 扎 (0,10) 


全 


图 4.3 ”一 个 二 维 笛 卡 儿 4 


4 标 系 


一 个 二 维 的 笛 卡 儿 坐 标 系 包含 了 两 个 部 分 的 信息 : 


。 一 个 特殊 的 位 置 ， 即 原点 ， 


它 古 整个 坐标 系 的 中 心 ; 


。 两 条 过 原点 的 互相 垂直 的 矢量 ， 即 x 轴 和 y 轴 “。 这 些 坐标 轴 也 被 称 
为 是 该 坐标 系 的 基 天 量 。 


虽然 在 图 4.3 中 x 轴 和 y 轴 分 别 是 水 平和 垂直 方 同 早 ， 但 这 并 不 是 必 
须 的 。 想 象 把 上 面 的 坐标 系 整体 向 左旋 转 30"。 而 且 ， 虽 然 图 中 的 x 轴 指 
向 右 、y 轴 指向 上 ， 但 这 也 并 不 是 必须 的 。 例 如 ， 在 2.3.4 下 屏幕 映射 
中 ，OpenGL 和 DirectX 使 用 了 不 同 的 二 维 香 卡 儿 坐标 系 ， 如 图 4.4 所 
示 。 


OpenGL 进 行 屏幕 映射 时 
使 用 的 笛 卡 尔 坐 标 系 DirectX 进 行 屏幕 喘 射 时 
使 用 的 销 卡 尔 坐 标 系 


(0, 0) +X +y 


A 图 4.4 ”在 屏幕 映射 时 ，OpenGL 和 DirectX 使 用 了 不 同方 向 的 二 维 笛 卡 儿 坐标 系 


而 有 了 这 个 坐标 系 我 们 束 可 以 精确 地 定位 一 个 点 的 位 置 。 例 如 ， 
如 果 说 :“ 在 (1, 2) 的 位 置 上 画 一 个 点 。 "那么 相信 读者 肯定 知道 这 个 
位 置 在 哪里 。 


我 们 来 看 一 下 省 卡 儿 坐标 系 给 奶牛 农场 市 来 了 什么 变化 。 在 没有 
笛 卡 儿 坐 标 系 的 时 候 ， 奶 牛 们 根本 没有 明确 的 位 置 概念 。 如 有 果 一 头 奶 
牛 问 : “妞妞 ， 你 现在 在 哪里 啊 ? "妞妞 只 能 回答 说 “我 在 这 里 ?或 者 “我 
在 那里 ”这 些 模 糊 的 词语 。 但 那 尖 奶牛 永远 不 会 知道 妞妞 的 确切 位 置 。 
而 把 家 卡 儿 坐标 系 引 入 到 奶牛 农场 后 ， 所 有 的 一 切 都 变 得 清晰 起 来 。 
我 们 把 奶牛 农场 的 中 心 定义 成 坐标 原点 ， 而 把 地 理 方 咎 中 的 东 、 北 害 
义 成 坐标 轴 方 辐 。 现 在 ， 如 来 奶牛 再 问 : “妞妞 ， 你 现在 在 哪里 
啊 ? ”妞妞 就 可 以 回答 说 :“ 我 在 东 1 米 、 北 3 米 的 地 方 。” 如 图 4.5 所 示 。 


4 图 45 ， 篆 卡 儿 坐 标 系 可 以 让 如 妞 精确 表述 自己 的 位 置 
4.2.2 ”三 维 笛 卡 儿 坐 标 系 


在 上 面 一 节 中 ， 我 们 已 经 了 解 了 二 维 第 卡 儿 坐标 系 。 可 以 看 出 ， 
二 维 笛 卡 儿 坐 标 系 实际 上 是 比较 简单 的 。 那 么 ， 三 维 比 二 维 只 多 了 一 
个 维度 ， 是 不 是 也 就 难 了 50% 而 已 呢 ? 


不 幸 的 是 ， 答 案 是 否定 的 。 三 维 笛 卡 儿 坐 标 系 相 较 于 二 维 来 说 要 
复杂 许多 ， 但 这 并 不 意味 着 很 难 学 会 它 。 对 人 类 来 说 ， 我 们 生活 的 世 
界 就 是 三 维 的 ， 因 此 对 于 理解 更 低 维 度 的 空间 (一 维和 二 维 ) 是 比较 
容易 的 。 而 对 于 同等 维度 的 一 些 概 念 ， 理 解 起 来 难度 就 大 一 些 ， 对 于 
更 高 维度 的 空间 (如 四 维 空间 ) ， 理 解难 度 就 更 大 了 。 


在 三 维 笛 卡 儿 坐 标 系 中 ， 我 们 需要 定义 3 个 坐标 轴 和 一 个 原点 。 图 
4.6 显 示 了 一 个 三 维 笛 卡 儿 侍 标 系 。 
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A 图 4.6 一 个 三 维 笛 卡 儿 坐 标 系 


这 3 个 坐标 轴 也 被 称 为 是 该 坐标 系 的 基 矢 量 (basis vector) 。 通 常 
情况 下 ， 这 3 个 坐标 轴 之 间 是 互相 垂直 的 ， 且 长 度 为 1， 这 样 的 基 矢 量 
被 称 为 标准 正 交 基 (orthonormal basis) ， 但 这 并 不 是 必须 的 。 例 如 ， 
在 一 些 坐 标 系 中 坐标 轴 之 间 互 相 垂直 但 长 度 不 为 1， 这 样 的 基 矢 量 被 称 


为 正 交 基 (orthogonal basis) 。 如 非特 殊 说 明 ， 本 书 默 认 情 况 下 使 用 
的 坐标 轴 指 的 都 是 标准 正 交 基 。 


我 们 ， 正 交 可 以 理解 成 互相 垂直 的 意思 。 在 下 面 矩 阵 的 内 容 中 ， 
我 们 还 会 看 到 正 交 矩阵 的 概念 。 


和 二 维 笛 卡 儿 坐标 系 类 似 ， 三 维 笛 卡 儿 坐 标 系 中 的 坐标 轴 方 向 也 
不 是 固定 的 ， 即 不 一 定 是 像 图 4.6 中 那样 的 指向 。 但 这 种 不 同 导 致 了 两 
种 不 同 种 类 的 坐标 系 : 左手 坐标 系 (left-handed coordinate space) 和 
右手 坐标 系 (right-handed coordinate space) 。 


4.2.3 ”左手 坐标 系 和 右手 坐标 系 


为 什么 在 三 维和 省 卡 儿 坐标 系 中 要 区 分 左手 坐标 系 和 右手 坐标 系 ， 
而 二 维 中 就 没有 这 些 烦 人 的 事情 呢 ? 这 是 因为 ， 在 二 维 笛 卡 儿 坐标 系 
中 ，x 轴 和 y 轴 的 指 癌 虽 然 可 能 不 同 ， 束 如 我 们 在 图 4.4 中 看 到 的 一 样 。 
但 我 们 总 可 以 通过 一 些 旋转 操作 来 使 它们 的 坐标 轴 指 癌 相 同 。 以 图 4.4 
中 OpenGL 和 DirectX 使 用 的 坐标 系 为 例 ， 为 了 把 右 侧 的 坐标 轴 指 癌 转换 
到 左 侧 那 样 的 指向 ， 我 们 可 以 首先 对 右 侧 的 坐标 系 顺 时 针 旋 转 180°， 
此 时 它 的 y 轴 指 同 上 ， 而 x 轴 指 同 左 。 然 后 ， 我 们 再 把 整个 纸 面 水 平 翻 
转 一 下 ， 束 可 以 把 x 轴 翻转 到 指 同 右 了 ， 此 时 左右 两 侧 的 坐标 轴 指 癌 束 
完全 相同 了 。 从 这 种 意义 上 来 说 ， 所 有 的 二 维和 洗 卡 儿 坐 标 系 都 是 等 价 
的 。 


但 对 于 三 维 人 第 卡 儿 坐 标 系 ， 靠 这 种 旋转 有 时 并 不 能 使 两 个 不 同 对 
向 的 坐标 系 重合 。 例 如 ， 在 图 4.6 中 ，+z 轴 的 方向 指向 纸 面 的 内 部 ， 如 


果 有 另 一 个 三 维 笛 卡 儿 坐 标 系 ， 它 的 +z 轴 是 指 疝 纸 面 外 部 ，x 轴 和 y 轴 保 
持 不 变 ， 那 么 我 们 可 以 通过 旋转 把 这 两 个 坐标 轴 重 合 在 一 起 吗 ? 答案 
征 人 否定 的 。 我 们 总 可 以 让 其 中 两 个 坐标 轴 的 指 同 重 合 ， 但 第 三 个 坐标 
轴 的 指 同 总 是 相反 的 。 


也 惑 是 说 ， 三 维 备 卡 儿 坐标 系 并 不 都 是 等 价 的 。 因 此 ， 或 出 现 了 
两 种 不 同 的 三 维 坐 标 系 :左手 坐标 系 和 右手 坐标 系 。 如 果 两 个 坐标 系 
具有 相同 的 旋 向 性 (handedness) ， 那 么 我 们 就 可 以 通过 旋转 的 方法 
来 让 它们 的 坐标 轴 指 向 重合 。 但 是 ， 如 果 它 们 具有 不 同 的 旋 向 性 〈 例 
如 坐标 系 A 属 于 左手 坐标 系 ， 而 坐标 系 B 属 于 右手 坐标 系 ) ， 那 么 就 无 
法 达到 重合 的 目的 。 


那么 ， 为 什么 叫 堪 手 坐 标 系 和 右手 坐标 系 呢 ? 和 手 有 什么 关系? 
这 是 因为 ， 我 们 可 以 利用 我 们 的 双手 来 判断 一 个 坐标 系 的 旋 同 性 。 请 
读者 举 起 你 的 左手 ， 用 食指 和 大 拇指 摆 出 一 个 “的 手势 ， 并 且 让 你 的 
食指 指向 上 ， 大 拇指 指向 右 。 现 在 ， 伸 出 你 的 中 指 ， 不 出 意外 的 话 它 
应 该 指向 你 的 前 方 (如 果 你 一 定 要 展示 自己 骨骼 尺 奇 的 话 我 也 没有 办 
法 ) 。 茶 喜 你 ， 你 已 经 得 到 了 一 个 左手 坐标 系 了 ! 你 的 大 拇指 、 食 指 
和 中 指 分 别 对 应 了 +x、+y 和 +z 轴 的 方向 ， 如 图 4.7 所 示 。 


同样 ， 读 着 可 以 通过 右手 来 得 到 一 个 右手 坐标 系 。 举 起 你 的 右 
手 ， 这 次 食指 仍然 指 癌 上 ， 中 指 指 同 前 方 ， 不 同 的 是 ， 大 拇指 将 指 同 
左 侧 ， 如 图 4.8 所 示 。 


A 图 4.8 右手 坐标 系 


正如 我 们 之 前 所 说 ， 左 手 坐 标 系 和 右手 坐标 系 之 间 无 法 通过 旋转 
来 同时 使 它们 的 3 个 坐标 轴 指 向 重合 ， 如 采 你 不 信 ， 你 现在 可 以 拿 目 己 
的 双手 来 试验 一 下 。 


另外 一 个 确定 是 左手 还 是 右手 坐标 系 的 方法 是 ， 判 断 前 向 
(forward) 的 方向 。 请 读者 坐 直 ， 向 右 伸 直 你 的 右手 ， 此 时 右手 方向 
束 是 x 轴 的 正 同 ， 而 你 的 头顶 同上 的 方 癌 台 是 y 轴 的 正 同 。 这 时 ， 如 采 
你 的 正 前 方 的 方 辐 是 z 轴 的 正 同 ， 那 么 你 本 映 所 在 的 坐标 系 束 是 一 个 左 
手 坐 标 系 ， 如 果 你 的 正 前 方 的 方向 对 应 的 是 z 轴 的 负 向 ， 那 么 这 就 是 一 
个 右手 坐标 系 。 


除了 坐标 轴 朝 向 不 同 之 外 ， 左 手 坐 标 系 和 右手 付 标 系 对 于 正 同 旋 
转 的 定义 也 不 同 ， 即 在 初 高 中 物理 中 学 到 的 左手 法 则 (left-hand rule) 
和 右手 法 则 (right-hand rule) 。 假 设 现在 空间 中 有 一 条 直线 ， 还 有 一 
个 点 ， 我 们 希望 把 这 个 点 以 该 直线 为 旋转 轴 旋 转 某 个 角度 ， 比 如 旋转 
30"。 读 者 可 以 拿 一 文笔 当成 这 个 旋转 轴 ， 再 拿 自 己 的 手 当 成 这 个 需要 
旋转 的 点 ， 可 以 发 现 ， 我 们 有 两 个 旋转 方 同 可 以 选择 。 那 么 ， 我 们 应 
该 往 哪个 方向 旋转 呢 ? 这 意味 着 ， 我 们 需要 在 坐标 系 中 定义 一 个 旋转 
的 正方 同 。 在 左手 坐标 系 中 ， 这 个 旋转 正方 同 古 由 左手 法 则 定义 的 ， 
而 在 右手 坐标 系 中 则 是 由 右手 法 则 定义 的 。 


在 左手 坐标 系 中 ， 我 们 可 以 这 样 来 应 用 左手 法 则 : 还 是 举 起 你 的 
左手 ,握拳 ， 伸 出 大 拇指 让 它 指 癌 旋 转轴 的 正方 向 ， 那 么 旋转 的 正方 
癌 束 是 剩 下 4 个 手指 的 弯曲 方向 。 在 右手 坐标 系 中 ， 使 用 右手 法 则 对 旋 
转正 方 同 的 判断 类 似 。 如 图 4.9 所 示 。 


从 图 3.9 中 可 以 看 出 ， 在 左手 坐标 系 中 ， 旋 转正 方 同 十 顺 时 针 的 ， 
而 在 右手 坐标 系 中 ， 旋 转正 方 同 是 逆 时 针 的 。 


左右 手 坐 标 系 之 间 是 可 以 进行 互相 转换 的 。 最 简单 的 方法 就 是 把 
其 中 一 个 轴 反 转 ， 并 保持 其 他 两 个 轴 不 变 。 


对 于 开发 痢 来 说 ， 使 用 左手 付 标 系 还 是 右手 坐标 系 都 是 可 以 的 ， 
它们 之 间 并 没有 优 务 之 分 。 无 论 使 用 哪 种 坐标 系 ， 绝 大 多 数 情况 下 并 
不 会 影响 底层 的 数学 运算 ， 而 只 是 在 映射 到 视觉 上 时 会 有 差别 ( 见 练 
习题 2) 。 这 是 因为 ， 一 个 点 或 者 旋转 在 空间 内 来 说 是 绝对 的 。 一 些 较 
真 儿 读者 可 能 会 看 不 惯 “ 绝 对 ”这 个 词 : “你 怎么 能 忽略 相对 论 呢 ? 这 世 
上 一 切 都 是 相对 的 ! ”这 些 读者 请 容 我 解释 。 这 里 所 说 的 绝对 是 说 ， 在 
我 们 所 关心 的 最 广阔 的 空间 中 ， 这 些 值 是 绝对 的 。 例 如 我 况 ， 把 你 的 
书 从 桌子 的 左边 移 到 右边 ， 你 不 会 对 这 个 过 程 产 生 什 么 疑问 ， 此 时 我 
们 关心 的 整个 空间 束 是 果子 这 个 空间 ， 而 在 这 个 空间 中 ， 书 的 运动 是 
绝对 的 。 但 是 ， 在 数学 的 世界 中 ， 我 们 需要 使 用 一 种 数学 模型 来 精确 
地 揪 述 它们 ， 这 个 模型 就 是 坐标 系 。 一 旦 有 了 坐标 系 ， 每 个 点 的 位 置 
束 不 再 是 绝对 的 ， 而 是 相对 于 这 个 坐标 系 来 说 的 。 这 种 相对 关系 导 
致 ， 即 便 从 数学 表示 上 来 说 两 种 表示 方式 完全 一 样 ， 但 从 视觉 上 来 说 
征 不 一 样 的 。 


我 们 可 以 在 奶牛 农场 的 例子 中 体会 左手 坐标 系 和 右手 坐标 系 的 分 
别 。 我 们 假设 ， 妞 妞 想 要 到 一 个 新 的 地 方 ， 因 为 那里 的 草 很 美味 。 刀 
妞 知 道 到 达 这 个 目标 点 的 “绝对 路 径 ” 是 怎样 的 ， 如 图 4.10 所 示 。 


左手 法 则 右手 法 则 


A 图 4.9 ”用 左手 法 则 和 右手 法 则 来 判断 旋转 正方 向 


图 4.10 ”为 了 移动 到 新 的 位 置 ， 妞 妞 需要 首先 向 某 个 方向 平移 1 个 单位 ， 再 向 男 一 个 方向 平 
移 4 个 单位 ， 最 后 再 向 一 个 方向 旋转 60° 


> 


我 们 可 以 分 别 在 一 个 左手 坐标 系 和 右手 坐标 系 中 搞 述 这 样 一 次 运 
动 ， 即 使 用 数学 表达 陈 来 朱 述 它 。 我 们 会 发 现 ， 在 不 同 的 坐标 系 中 摘 
述 这 样 同 一 次 运动 是 不 一 样 的 ， 如 岁 4.11 所 示 。 


图 4.11 左 图 和 右 图 分 别 表示 了 在 左手 坐标 系 和 右手 坐标 系 中 描述 妞妞 这 次 运动 的 结果 ， 得 
到 的 数学 描述 是 不 同 的 


> 


在 左手 坐标 系 中 ，3 个 坐标 轴 的 朝 问 如 图 4.11 左 图 所 示 。 刀 妞 百 先 
癌 x 轴 正 方 同 平移 1 个 单位 ， 然 后 再 癌 z 轴 有 负 方 各 移动 4 个 单位 ， 最 后 天 
旋转 的 正方 向 旋转 60"。 而 在 右手 坐标 系 中 ，+z 轴 的 方向 和 左手 坐标 系 
中 刚好 相反 ， 因 此 妞妞 首先 向 x 轴 正方 向 平移 1 个 单位 (与 左手 坐标 系 
中 的 移动 一 致 )”， 然 后 再 向 z 轴 正方 向 移动 4 个 单位 (与 左手 坐标 系 中 
的 移动 相反 ) ， 最 后 旨 旋 转 的 负 方 癌 旋 转 60"〈 与 左手 坐标 系 中 的 旋转 
相反 ) 。 


可 以 看 出 ， 为 了 达到 同样 的 视觉 效果 (这 里 指 把 妞妞 移动 到 视觉 
上 的 同一 个 位 置 ) ， 左 右手 坐标 系 在 z 轴 上 的 移动 以 及 旋转 方向 是 不 同 
的 。 如 有 果 使 用 相同 的 数学 运算 〈 指 均 向 z 轴 某 方 向 移动 或 均 朝 旋转 正方 
回旋 转 等 ) ， 那 么 得 到 的 视觉 效果 就 是 不 一 样 的 。 因 此 ， 如 果 我 们 需 
要 从 左手 坐标 系 迁移 到 右手 坐标 系 ， 并 且 保 持 视觉 上 的 不 变 ， 就 需要 
进行 一 些 转换 。 读 者 可 以 参见 本 章 最 后 的 扩展 阅读 部 分 。 


4.2.4 ”Unity 使 用 的 坐标 系 


对 于 一 个 需要 可 视 化 虚拟 的 三 维 世 界 的 应 用 (如 Unity) 来 说 ， 它 

的 设计 者 就 要 进行 一 个 选择 。 对 于 模型 空间 和 世界 空间 (在 4.6 节 中 会 
具体 讲解 这 两 个 空间 是 什么 ) ，Unity 使 用 的 是 左手 坐标 系 。 这 可 以 从 
Scene 视 图 的 坐标 轴 显 示 看 出 来 ， 如 图 4.12 所 示 。 这 意味 着 ， 在 模型 空 
分 别 


间 中 ， 一 个 物体 的 右 侧 right) 、 上 侧 《up) 和 前 侧 (forward) 分 另 
对 应 了 x 轴 、y 轴 和 z 轴 的 正方 网 。 


图 4.12 ”在 模型 空间 和 世界 空间 中 ，Unity 使 用 的 是 左手 坐标 系 。 图 中 ， 球 的 坐标 轴 显 示 了 
它 在 模型 空间 中 的 3 个 坐标 轴 〈 红 色 为 x 轴 ， 绿 色 是 y 轴 ， 蓝 色 是 z 轴 ) 


p> 


但 对 于 观察 空间 来 说 ，Unity 使 用 的 是 右手 坐标 系 。 观 察 空 间 ， 通 
俗 来 讲 束 是 以 摄像 机 为 原点 的 坐标 系 。 在 这 个 坐标 系 中 ， 摄 像 机 的 前 
向 是 z 轴 的 负 方 向 ， 这 与 在 模型 空间 和 世界 空间 中 的 定义 相反 。 也 就 是 
说 ，z 轴 坐标 的 减少 意味 着 场景 深度 的 增加 ， 如 图 4.13 所 示 。 


A 图 4.13 在 Unity 中 ， 观 察 空 间 使 用 的 是 右手 坐标 系 ， 摄 像 机 的 前 向 是 z 轴 的 负 方 向 ，z 轴 越 
小 ， 物 体 的 深度 越 大 ， 离 摄像 机 越 远 


关于 Unity 中 使 用 的 坐标 系 的 旋 向 性 ， 我 们 会 在 4.5.9 节 中 详细 地 讲 
解 。 


4.2.5 ”练习 题 


这 年 本 书 中 第 一 次 出 现 练习 题 的 地 方 ， 布 望 你 可 以 快速 解决 它 
中 


(1) 在 非常 流行 的 建 模 软件 3ds Max 中 ， 默 认 的 坐标 轴 方 向 是 : x 
轴 正 方 癌 指 回 右 方 ，y 轴 正方 同 指 同 前 方 ，z 轴 正方 癌 指 网 上 方 。 那 么 它 
征 左 手 坐 标 系 还 是 右手 坐标 系 ? 


(2) 在 左手 坐标 系 中 ， 有 一 点 的 坐标 是 (0, 0, 1) ， 如 果 把 该 点 
绕 y 轴 正方 同 旋 转 +90*， 旋 园 后 的 坐标 是 什么 ?如 果 古 在 右手 坐标 系 
中 ， 同 样 有 一 点 坐标 为 (0, 0, 1) ， 把 它 绕 y 轴 正方 向 旋转 +90"， 旋 转 
后 的 坐标 是 什么 ? 


(3) 在 Unity 中 ， 新 建 的 场景 中 主 摄像 机 的 位 置 位 于 世界 空间 中 的 
(0, 1 -10) 位 置 。 在 不 改变 摄像 机 的 任何 设置 《如 保持 Rotation 为 (0， 
0, 0)，Scale 为 (1, 1, 1) ) 的 情况 下 ， 在 世界 空间 中 的 (0, 1 0) 位 置 新 建 
一 个 球体 ， 如 图 4.14 所 示 。 


A 图 4.14 ”摄像 机 的 位 置 是 (0, 1, -10) ， 球 体 的 位 置 是 (0, 1, 0) 


在 摄像 机 的 观察 空间 下 ， 该 球体 的 z 值 是 多 少 ? 在 摄像 机 的 模型 空 
间 下 ， 该 球体 的 z 值 又 是 多 少 ? 


4.3 点 和 矢量 


点 point) 是 n 维 空间 (游戏 中 主要 使 用 二 维和 三 维 空间 ) 中 的 一 
个 位 置 ， 它 没有 大 小 、 宽 度 这 类 概念 。 在 笠 卡 儿 坐 标 系 中 ， 我 们 可 以 
使 用 2 个 或 3 个 实数 来 表示 一 个 点 的 坐标 ， 如 : P=(P P,)， 表 示 二 维 空 
间 的 点 ，P=(P, P,P,) 表 示 三 维 空间 中 的 点 。 


矢量 (vector， 也 被 称 为 向 量 ) 的 定义 则 复杂 一 些 。 在 数学 家 看 
来 ， 和 天 量 职 是 一 串 数 字 。 你 可 能 要 问 了 ， 点 的 表达 式 不 也 是 一 串 数 字 


吗 ? 没 错 ， 但 矢量 存在 的 意义 更 多 是 为 了 和 标量 (scalar) 区 分 开 来 。 
通常 来 讲 ， 矢 量 是 指 n 维 空间 中 一 种 包含 了 模 (magnitude) 和 方向 
(direction) 的 有 向 线段 ， 我 们 通常 讲 到 的 速度 (velocity) 就 是 一 种 
典型 的 矢量 。 例 如 ， 这 辆 车 的 速度 是 向 南 80km/h (向 南 指 明了 矢量 的 
方向 ，80kmh 指 明了 矢量 的 模 ) 。 而 标量 只 有 模 没 有 方向 ， 生 活 中 常 
常 说 到 的 距离 (distance) 就 是 一 种 标量 。 例 如 ， 我 家 离 学 校 只 有 200 米 
(200 米 就 是 一 个 标量 ) 。 


具体 来 讲 。 


。 矢量 的 模 指 的 古 这 个 矢量 的 长 度 。 一 个 矢量 的 长 度 可 以 是 任意 的 
非 负 数 。 
。 天 量 的 方 同 则 摘 述 了 这 个 矢量 在 至 间 中 的 指 癌 。 


矢量 的 表示 方法 和 点 类 似 。 我 们 可 以 使 用 v=(xy) 来 表示 二 维 天 量 ， 
用 v=(x,yz2) 来 表示 三 维 矢 量 ， 用 v=(xyzw) 来 表示 四 维 矢 量 。 


为 了 方便 阐述 ， 我 们 对 不 同类 型 的 变量 在 书写 和 印刷 上 使 用 不 同 
的 样式 : 


。 对 于 标量 ， 我 们 使 用 小 写字 母 来 表示 ,如 a, b, x, y, z, 0, a 
笠 . 

。 对 于 矢量 ， 我 们 使 用 小 写 的 粗 体 字母 来 表示 ， 如 a，b，u，v 等 ; 

。 对 于 后 面 要 学 习 的 和 矩阵， 我 们 使 用 大 写 的 粗 体 字 母 来 表示 ， 如 A， 
B，S，M，R 等 。 


在 多 4.15 中 ， 一 个 天 量 通 章 由 一 个 箭头 来 表示 。 我 们 有 时 会 讲 到 一 
个 矢量 的 头 (head) 和 尾 (tail) 。 矢 量 的 头 指 的 是 它 的 箭头 所 在 的 端 


点 处 ， 而 尾 指 的 是 另 一 个 端点 处 ， 如 图 4.15 所 示 。 


那么 一 个 天 量 要 放 在 哪里 昵 9 从 天 量 的 定义 来 看 ， 它 只 有 模 和 方 
回 两 个 属性 ， 并 没有 位 置信 息 。 这 上 听 起 来 很 难 理解 ， 但 实际 上 在 生活 
中 我 们 总 是 会 和 这 样 的 天 量 打 交道 。 例 如 ， 当 我 们 讲 到 一 个 物体 的 速 
度 时 ， 可 能 会 这 样 说 “那个 小 偷 正 在 以 100kmAm 的 速度 向 南 逃 窜 ”( 快 抓 
住 他 ! ) ， 这 里 的 “以 100kmyh 的 速度 向 南 ” 就 可 以 使 用 一 个 矢量 来 表 
示 。 通 常 ， 矢 量 被 用 于 表示 相对 于 某 个 点 的 偏 移 (displacement) ， 也 
束 是 说 它 是 一 个 相对 量 。 只 要 矢量 的 模 和 方 同 你 持 不 变 ， 无 论 放 在 哪 
里 ， 都 是 同一 个 矢量 。 


4.3.1 ”点 和 矢量 的 区 别 


回顾 一 下 ， 扣 是 一 个 没有 大 小 之 分 的 空间 中 的 位 置 ， 而 矢量 是 一 
个 有 模 和 方向 但 没有 位 置 的 量 。 从 这 里 看 ， 点 和 矢量 具有 不 同 的 意 
义 。 但 是 ， 从 表示 方式 上 两 者 非 肖 相似 。 


在 上 一 节 中 我 们 提 到 ， 矢 量 通 常用 于 描述 偏 移 量 ， 因 此 ， 它 们 可 
以 用 于 描述 相对 位 置 ， 即 相对 于 另 一 个 点 的 位 置 ， 此 时 矢量 的 尾 是 一 
个 位 置 ， 那 么 天 量 的 头 就 可 以 表示 另 一 个 位 置 了 。 而 一 个 点 可 以 用 于 
指定 空间 中 的 一 个 位 置 ( 即 相 对 于 原点 的 位 置 ) 。 如 果 我 们 把 矢量 的 
尾 固定 在 坐标 系 原点 ， 那 么 这 个 矢量 的 表示 就 和 点 的 表示 重合 了 。 图 
4.16 表 示 了 两 者 之 间 的 关系 。 


尾 


A 图 4.15 ”一 个 二 维 疝 量 以 及 它 的 头 和 尾 


个 点 (x, 


一 个 矢量 (x, y) 


A 图 4.16 ”点 和 矢量 之 间 的 关系 


尽管 上 面 的 内 容 看 起 来 显而易见 ， 但 区 分 点 和 和 天 量 之 间 的 不 同 息 
非常 重要 的 ， 尽 管 它 们 在 数学 表达 式 上 古 一 样 的 ， 痢 是 一 串 数 子 而 
已 。 如 果 一 定 要 给 它们 之 间 建 立 一 个 联系 的 话 ， 我 们 可 以 认为 ， 任 何 
一 个 点 都 可 以 表示 成 一 个 从 原点 出 发 的 天 量 。 为 了 明确 点 和 矢量 的 区 
别 ， 在 本 书后 面 的 内 容 中 ， 我 们 将 用 于 表示 方 同 的 天 量 称 为 方向 天 


在 下 面 的 内 容 里 ， 我 们 将 给 出 一 些 最 常见 的 天 量 运算 。 幸 和 运 的 
征 ， 这 些 运算 大 都 很 好 理解 。 es 我 们 会 完 给 出 数学 上 的 
首 述 ， 然 后 再 给 出 几何 意义 上 的 解释 。 同 样 ， 为 了 让 读者 加 深 印 象 ， 


我 们 会 在 最 后 给 出 一 些 练习 题 。 相 信 读 完 本 节 后 ， 你 一 定 可 以 快速 地 
解决 它们 ! 
1. 矢量 和 标量 乘法 /除法 


还 记得 吗 ? 标量 是 只 有 模 没有 方向 的 量 ， 虽 然 我 们 不 能 把 矢量 和 
标量 进行 相 加 / 相 减 的 运算 (想象 一 下 ， 你 会 把 速度 和 距离 相 加 吗 ) ， 
但 可 以 对 它们 进行 乘法 运算 ， 结 果 会 得 到 一 个 不 同 长 度 且 可 能 方向 相 
反 的 新 的 矢量 。 


公式 非常 答 单 ， 我 们 只 需要 把 矢量 的 每 个 分 量 和 标量 相 乘 即 可 : 
kv=(wujkv ky,) 


类 似 的 ， 一 个 天 量 也 可 以 被 一 个 非 零 的 标量 除 。 这 等 同 于 和 这 个 
标量 的 倒数 相 乘 ; 


下 面 给 出 一 些 例子 : 
2(1,2,3)=(2,4,6) 


-3.5(2, 0)=(-7, 0) 


(1, 2,3) 


= (0.5,1,1.5) 


[| 


注意 ， 对 于 乘法 来 说 ， 矢 量 和 标量 的 位 置 可 以 互 换 。 但 对 于 除 
法 ， 只 能 是 天 量 被 标量 除 ， 而 不 能 是 标量 被 矢量 除 ， 这 有 是 没有 意义 


有 

从 几何 意义 上 看 ， 把 一 个 矢量 v 和 一 个 标量 k 相 乘 ， 意 味 着 对 矢量 v 
进行 一 个 大 小 为 |KI 的 缩放 。 例 如 ， 如 果 想 要 把 一 个 天 量 放 大 两 信 ， 束 可 
以 乘 以 2。 当 k<0 时 ， 矢 量 的 方向 也 会 取 反 。 图 4.17 显 示 了 这 样 的 一 些 例 
二 
2. 矢量 的 加 法 和 减法 

我 们 可 以 对 两 个 矢量 进行 相 加 或 相 减 ， 其 结果 是 一 个 相同 维度 的 
新 矢量 。 


我 们 只 需要 把 两 个 矢量 的 对 应 分 量 进行 相 加 或 相 减 即 可 。 公 式 如 
下 


atb=(a\+b,,ay+by, az+bz) 
a-b=(a,—b\,ay-by, az-Dz) 
下 面 是 一 些 例子 : 
(1,2,3)+(4,5,6)=(5,7,9) 


(5,2,7) — (3,8,4)=(2, -6,3) 


需要 注意 的 是 ， 一 个 矢量 不 可 以 和 一 个 标量 相 加 或 相 减 ， 或 者 是 
和 不 同 维度 的 矢量 进行 运算 。 


从 几何 意义 上 来 看 ， 对 于 加 法 ， 我 们 可 以 把 矢量 a 的 头 连 接 到 天 量 
b 的 尾 ， 然 后 画 一 条 从 ab 的 尾 到 b 的 头 的 矢量 ， 来 得 到 a 和 b 相 加 后 的 天 


量 。 也 束 生 说 ， 如 条 我 们 从 一 个 起 点 开始 进行 了 一 个 位 置 侦 移 a， 然 后 
又 进行 一 个 位 置 仿 移 bp， 那么 束 等 同 于 进行 了 一 个 a+b 的 位 置 仿 移 。 这 
被 称 为 矢量 加 法 的 三 角形 定 则 (triangle rule) 。 矢 量 的 减法 是 类 似 


的 。 如 图 4.18 所 示 。 
站 2v V/2 =-V -0.5v 
(2, 4) {4, 8) (1, 2) (-2, -4) (-1, -2) 
A 图 4.17 ”二 维 矢 量 和 一 些 标量 的 乘法 和 除 ; 


A 图 4.18 二 维 矢量 的 加 法 和 减 Y 


读者 需要 时 刻章 记 ， 在 图 形 学 中 矢量 通常 用 于 摘 述 位 置 仿 移 〈 简 
称 位 移 ) 。 因 此 ， 我 们 可 以 利用 矢量 的 加 法 和 减法 来 计算 一 点 相对 于 
另 一 点 的 位 移 。 


假设 ， 空 间 内 有 两 点 aq 和 b。 还 记得 吗 ， 我 们 可 以 用 矢量 a 和 b 来 表 
示 它 们 相对 于 原点 的 位 移 。 如 时 我 们 想 要 计算 点 bp 相对 于 点 a 的 位 移 ， 
跷 可 以 通过 把 b 和 a 相 减 得 到 ， 如 图 4.19 所 示 。 


3. 矢量 的 模 


正如 我 们 之 前 讲 到 的 一 样 ， 矢 量 是 有 模 和 方 同 的 。 矢 量 的 模 古 一 
个 标量 ， 可 以 理解 为 是 矢量 在 空间 中 的 长 度 。 它 的 表示 符号 通常 是 在 
矢量 两 旁 分 别 加 上 一 条 垂直 线 (有 的 文献 中 会 使 用 两 条 和 垩 直线 ) 。 三 
维 矢量 的 模 的 计算 公式 如 下 : 


iv| = V 双 十 吧 十 1 


其 他 维度 的 天 量 的 模 计 算 类 似 ， 都 是 对 每 个 分 量 的 平方 相 加 后 再 
开 根 号 得 到 。 


下 面 给 出 一 些 例子 : 
|(1,2,3)| = VI?+22+32= VI+4+9= V14 2% 3.742 
1(3,4| = V32 十 和 = V9+16= V25=5 


我 们 可 以 从 几何 意义 来 理解 上 述 公 式 。 对 于 二 维 天 量 来 说 ， 我 们 
可 以 对 任意 天 量 构建 一 个 三 角形 ， 如 图 4.20 所 示 。 


A 图 4.19 ”使 用 矢量 减法 来 计算 从 点 a 到 点 b 的 位 移 


图 4.20 ”矢量 的 模 


> 


从 图 4.20 可 以 看 出 ， 对 于 二 维 矢 量 ， 其 实 就 是 使 用 了 色 股 定理 ， 矢 
量 的 两 个 分 量 的 绝对 值 对 应 了 三 角形 两 个 直角 边 的 长 度 ， 而 斜 边 的 长 
度 就 是 矢量 的 模 。 
4. 单位 矢量 


在 很 多 情况 下 ， 我 们 只 关心 矢量 的 方 同 而 不 是 模 。 例 如 ， 在 计算 
光照 模型 时 ， 我 们 往往 需要 得 到 顶点 的 法 线 方向 和 光源 方向 ， 此 时 我 
们 不 关心 这 些 矢 量 有 多 长 。 在 这 些 情况 下 ， 我 们 就 需要 计算 单位 天 量 


(unit vector) 9 


单位 矢量 指 的 是 那些 模 为 1 的 矢量 。 单 位 矢量 也 被 称 为 被 归 一 化 的 
矢量 (normalized vector) 。 对 任何 给 定 的 非 零 矢 量 ， 把 它 转 换 成 单位 
矢量 的 过 程 就 被 称 为 归 一 化 (normalization) o 


给 定 任 意 非 零 天 量 v， 我 们 可 以 计算 和 v 方 向 相同 的 单位 天 量 。 在 
本 书 中 ， 我 们 通过 在 一 个 天 量 的 头 上 添加 一 个 戴 帆 符号 来 表示 单位 天 
量 ， 例 如 np。 为 了 对 天 量 进行 归 一 化 ， 我 们 可 以 用 天 量 除 以 该 天 量 的 模 
来 得 到 。 公 式 如 下 : 


9 vu 
二 一 
vl ,wv 是 任意 非 零 和 撩 量 


下 面 给 出 一 些 例 子 : 


(3, —4) (3, —4) (3, 一 4) 【3,; —4) € 二) 
|(3, 一 4)| V3 十 (一 4)2 V25 ， 


【0.6. 一 0.8) 


零 天 量 〈 即 矢量 的 每 个 分 量 值 都 为 0， 如 v=(0,0,0)) 是 不 可 以 被 归 
一 化 的 。 这 是 因为 做 除法 运算 时 分 母 不 能 为 0。 


从 几何 意义 上 看 ， 对 二 维 空间 来 说 ， 我 们 可 以 画 一 个 单位 圆 ， 那 
么 单位 天 量 就 可 以 是 从 圆心 出 发 、 到 圆 边界 的 天 量 。 在 三 维 空间 中 ， 
单位 天 量 殉 是 从 一 个 单位 球 的 球 心 出 发 、 到 达 球 面 的 矢量 。 图 4.21 给 出 
了 二 维 空间 内 的 一 些 单位 天 量 。 


水 


和 图 4.21 二 维 空间 的 单位 矢量 都 会 落 在 单位 圆 上 


需要 注意 的 是 ， 在 后 面 的 章节 中 我 们 将 会 不 断 遇 到 法 线 方向 (也 


被 称 为 法 天 量 ) 、 光 源 方 同等 ， 


这 些 矢量 不 一 定 是 归 一 化 后 的 天 量 。 


由 于 我 们 的 计算 往往 要 求 天 量 是 


和 天 量 进行 归 一 化 运算 。 
5. 矢量 的 点 积 


单位 矢量 ， 因 此 在 使 用 前 应 先 对 这 些 


矢量 之 间 也 可 以 进行 乘法 ， 但 是 和 标量 之 间 的 乘法 有 很 大 不 同 。 
矢量 的 乘法 有 两 种 最 常用 的 种 类 : 点 积 (dot product， 也 被 称 为 内 
积 ，inner product) 和 了 叉 积 〈cross product， 也 被 称 为 外 积 ，outer 
product) 。 在 本 节 中 ， 我 们 将 讨论 第 一 种 类 型 ， 点 积 。 


读者 可 能 认为 上 面 几 节 的 内 容 都 很 商 单 , “这 些 都 显而易见 嘛 ”。 
那么 从 这 一 节 开 始 ， 我 们 就 会 遇 到 一 些 真 正 需 要 花费 力气 ( 真 的 只 
一 点 点 ) 去 记忆 的 公式 。 笠 运 的 是 ， 绝 大 多 数 公式 是 有 几何 意义 的 ， 
也 就 古 说 ， 我 们 可 以 通过 画图 的 方式 来 理解 和 帮助 记忆 。 


比 仅仅 记 住 这 些 公 去 更 加 重要 的 是 ， 我 们 要 真正 理解 它们 有 是 做 什 
么 的 。 只 有 这 样 ， 我 们 才能 在 需要 时 想起 来 ,“ 噢 ， 这 个 需求 我 可 以 用 
这 个 公式 来 实现 ! * 在 我 们 编写 Shader 的 过 程 中 ， 通 常 程序 接口 都 会 提 
供 这 些 公式 的 实现 ， 因 此 我 们 往往 不 需要 手工 输入 这 些 公式 。 例 如 ， 
在 Unity Shader 中 ， 我 们 可 以 直接 使 用 形 如 dot(a, bD) 的 代码 来 对 两 个 天 量 
值 进行 点 积 的 运算 。 


点 积 的 名 称 来 源 于 这 个 运算 的 符号 : ab。 中 间 的 这 个 圆 点 符号 是 
不 可 以 省 略 的 。 点 积 的 公式 有 两 种 形式 ， 我 们 爷 来 看 第 一 种 。 两 个 三 
维 矢 量 的 点 积 是 把 两 个 矢量 对 应 分 量 相 乘 后 再 取 和 ， 最 后 的 结果 是 


个 标量 。 


A 
a‘b=(a,, am az) “(by, by, by)= axpx+ ayby+azb 


yy Z 2Z 


(1,2,3) (0.5,4,2.5)=0.5+8+7.5=16 
(-3,4,0).(5, -17)= -15+-4+0=-19 
矢量 的 点 积 满足 交换 律 ， 即 a:b=b:a 


点 积 的 几何 意义 很 重要 ， 因 为 点 积 几乎 应 用 到 了 图 形 学 的 各 个 方 
面 。 其 中 一 个 几何 意义 就 是 投影 (projection) 。 


假设 ， 有 一 个 单位 天 量 a 和 另 一 个 长 度 不 限 的 天 量 b。 现 在 ， 我 们 
布 望 得 到 b 在 平行 于 a 的 一 条 直线 上 的 投影 。 那 么 ， 我 们 束 可 以 使 用 点 
积 a. b 来 得 到 b 在 a 方 向 上 的 有 符号 的 投影 。 


那么 ， 投 影 到 确 是 什么 意思 呢 ? 这 里 给 出 一 个 通俗 的 解释 。 我 们 
可 以 认为 ， 现 在 有 一 个 光源 ， 它 发 出 的 光线 是 垂直 于 a 方 同 的 ， 那 么 b 
在 a& 方 同上 的 投影 束 古 b 在 a& 方 同上 的 影子 ， 如 图 4.22 所 示 。 


需要 注意 的 是 ， 投 影 的 值 可 能 是 负数 。 投 影 结 采 的 正 负 号 与 ab 
的 方向 有 关 : 当 它 们 的 方向 相反 ( 夹 角 大 于 90°*) 时 ， 结 果 小 于 0; 当 
它们 的 方向 互相 垂直 〈 夹 角 为 90") 时 ， 结 果 等 于 0; 当 它 们 的 方向 相 
同 ( 夹 角 小 于 90°*) 时 ， 结 果 大 于 0。 图 4.23 给 出 了 这 3 种 情况 的 图 示 。 


A 图 4.22 矢量 b 在 单位 矢量 a 方向 上 的 投影 


A 图 4.23 点 积 的 符号 


也 束 是 说 ， 点 积 的 符号 可 以 让 我 们 知道 两 个 天 量 的 方 癌 关系 。 


那么 ， 如 条 ia 不 是 一 个 单位 天 量 会 如 何 呢 ? 这 很 容易 想到 ， 任 何 两 
个 天 量 的 点 积 ab 等 同 于 b 在 a 方 向 上 的 投影 值 ， 再 乘 以 a 的 长 度 。 


点 积 具有 一 些 很 重要 的 性 质 ， 在 Shader 的 计算 中 ， 我 们 会 经 常 利 用 
这 些 性 质 来 帮助 计算 。 


性 质 一 : 点 积 可 结合 标量 乘法 。 


上 面 的 “结合 "是 说 ， 氮 积 的 操作 数 之 一 可 以 是 太一 个 运算 的 结 
果 ， 即 矢量 和 标量 相 乘 的 结 末 。 公 式 如 下 : 


(ka):b= a-(kb)=k(a-b) 


也 吏 是 说 ， 对 点 积 中 其 中 一 个 矢量 进行 缩放 的 结 有 末 ， 相 当 于 对 最 
后 的 点 积 结 采 进行 缩放 。 


性 质 二 :后 积 可 结合 天 量 加 法 和 减法 ， 和 性 质 一 类 似 。 


这 里 的 “结合 ” 指 的 是 ， 扣 积 的 操作 数 可 以 是 天 量 相 加 或 相 减 后 的 
结果 。 用 公式 表达 就 十 : 


a(b+ c)= a:b+ a:c 


把 上 面 的 c 换 成 -c 束 可 以 得 到 减法 的 版 本 。 


性 质 三 : 一 个 矢量 和 本 身 进行 点 积 的 结 采 ， 是 该 天 量 的 模 的 平 
yi 


这 点 可 以 很 容易 从 公式 验证 得 到 : 


二 证 一 |ul2 
VV=Vwvxt VyVyt vavz=y| 


这 意味 着 ， 我 们 可 以 直接 利用 点 积 来 求 天 量 的 模 ， 而 不 需要 使 用 
模 的 计算 公式 。 当 然 ， 我 们 需要 对 点 积 结果 进行 开平 方 的 操作 来 得 到 
真正 的 模 。 但 很 多 情况 下 ， 我 们 只 是 想 要 比较 两 个 矢量 的 长 度 大 小 ， 
因此 可 以 直接 使 用 点 积 的 结果 。 毕 竟 ， 开 平方 的 运算 需要 消耗 一 定性 


合 巴 
月 世 


现在 是 时 候 来 看 点 积 的 男 一 种 表示 方法 了 。 这 种 方法 是 从 三 角 代 
数 的 角度 出 发 的 ， 这 种 表示 方法 更 加 具有 几何 意义 ， 因 为 它 可 以 明确 
地 强调 出 两 个 矢量 之 间 的 角度 。 


我 们 先 直 接 给 出 第 二 个 公式 。 
ST 
a‘b=|allblcos0 


初 看 之 下 ， 似 乎 和 公式 一 没有 什么 联系 ， 怎 么 会 相等 呢 ? 我 们 先 
来 看 最 简单 的 情况 。 人 假设， 我 们 对 两 个 单位 矢量 进行 点 积 ， 即 a&.P， 如 
图 4.24 所 示 。 


A 图 4.24 ”两 个 单位 矢量 进行 点 积 


到 了 产生 魔法 的 时 间 了 1! 我 们 知道 b 的 模 为 1， 且 读者 应 该 记得 


cos0= 


斜 边 
斜 边 。 我 们 可 以 发 现 ， 图 中 刘 .b 的 结果 刚好 就 是 cos9 对 应 的 直角 
边 。 因 此 ， 由 图 4.24 可 以 得 到 : 


.这 也 就 十 说 ， 两 个 单位 天 量 的 点 积 等 于 它们 之 间 夹 角 的 余弦 值 。 
再 应 用 性 质 一 殊 可 以 得 到 公式 二 了 : 


a:b= (laa): (lblb) = |allbl(a.b) = |allblcos6 


也 就 是 说 ， 两 个 矢量 的 点 积 可 以 表示 为 两 个 矢量 的 模 相 乘 ， 再 乘 
以 它们 之 间 夹 角 的 余弦 值 。 从 这 个 公式 也 可 以 看 出 ， 为 什么 计算 投影 
时 两 个 矢量 的 方向 不 同 会 得 到 不 同 符 号 的 投影 值 ， 当 夹 角 小 于 90° 时 ， 
cos9>0; 当 夹 角 等 于 90° 时 ，cos06=0; 当 夹 角 大 于 90。 时 ，cos6<0。 


利用 这 个 公式 我 们 还 可 以 求 得 两 个 向 量 之 间 的 夹 角 〈 在 0 一 
180°) : 
9=arcos(a&.b)， 假 设 a& 和 b 是 单位 矢量 。 
其 中 ，arcos 是 反 余弦 操作 。 
6. 矢量 的 又 积 


另 一 个 重要 的 矢量 运算 就 是 叉 积 (cross product) ， 也 被 称 为 外 积 
(outer product) 。 与 点 积 不 同 的 是 ， 矢 量 义 积 的 结果 仍 是 一 个 矢 
量 ， 而 非 标量 。 


和 点 积 类 似 ， 叉 积 的 名 称 来 源 于 它 的 符号 : axb。 同 样 ， 这 个 又 号 
也 是 不 可 省 略 的 。 两 个 矢量 的 又 积 可 以 用 如 下 公式 计算 : 


zazb azpx-axbz axby—aybx) 


axb=(aw ay, az)x(bw by, b,)=(ayb 


上 上面 的 公式 看 起 来 很 复 洒 ,但 其 实 是 有 一 定 规 律 的 。 图 4.25 给 出 了 
这 样 的 规律 图 示 。 


x 分 量 y 分 量 ?7 分量 


NJ 个 上 4 | 
YY x 


小 
A 
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4 图 4.25 三维 天 量 又 积 的 计算 规律 。 不 同 颜色 的 线 表 示 了 计算 结果 矢量 中 对 应 颜色 的 分 量 的 
计算 路 径 。 以 红色 为 例 ， 即 结果 矢量 的 第 一 个 分 量 ， 它 是 从 第 一 个 天 量 的 y 分 量 出 发 乘 以 第 二 
个 矢量 的 z 分 量 ， 再 减 去 第 一 个 天 量 的 z 分 量 和 第 二 矢量 的 y 分 量 的 乘积 


例如 : 
(12,3)x(-2, -14)=((2)(4) = (3)(-1),(3)(-2) = (1)(4),(1)(-1)-(2)(-2)) 


=(8—(-3),(-6)-4,(-1)-(-4))=(11,-10,3) 


需要 注意 的 是 ， 又 积 不 满足 交换 律 ， 即 axbzbxa。 实 际 上 ， 又 积 是 
满足 反 交 换 律 的 ， 即 axb=-(bxal。 而 且 又 积 也 不 满足 结合 律 ， 即 (axb) 


xc 天 ax(bxc)。 


从 叉 积 的 几何 意义 出 发 ， 我 们 可 以 更 加 深入 地 理解 它 的 用 处 。 对 
两 个 矢量 进行 义 积 的 结果 会 得 到 一 个 同时 垂直 于 这 两 个 矢量 的 新 矢 
量 。 我 们 已 经 知道 ， 和 天 量 是 由 一 个 模 和 方向 来 定义 的 ， 那 么 这 个 新 的 
矢量 的 模 和 方向 是 什么 呢 ? 


我 们 先 来 看 它 的 模 。axb 的 长 度 等 于 a 和 b 的 模 的 乘积 再 乘 以 它们 之 
间 夹 角 的 正弦 值 。 公 式 如 下 : 


laxb|=|allblsinO 


读者 可 能 已 经 发 现 ， 上 述 公 式 和 点 积 的 计算 公式 很 类 似 ， 不 同 的 
征 ， 这 里 使 用 的 是 正弦 值 。 如 有 果 读 者 对 中 学 数学 还 有 记忆 的 话 ， 可 能 
还 会 有 发现， 这 和 乎 行 四 边 形 的 面积 计算 公 陈 是 一 样 的 。 如 采 你 还 记 
了 ， 没 关系 ， 我 们 在 这 里 回忆 一 下 。 


如 图 4.26 所 示 ， 我 们 使 用 a 和 b 构 建 一 个 平行 四 边 形 。 


我 们 知道 ， 平 行 四 边 形 的 面积 可 以 使 用 |blh 来 得 到 ， 即 故 乘 以 高 。 
而 h 又 可 以 使 用 al 和 夹 角 6 来 得 到 ， 即 


A=|blh=|bl|(lalsin0)=|allblsin0=|axb| 


你 可 能 会 问 ， 如 果 a 和 b 平 行 〈 可 以 是 方向 完全 相同 ， 也 可 以 是 完 
全 相反 ) 怎么 办 ， 不 就 不 能 构建 平行 四 边 形 了 吗 ? 我 们 可 以 认为 构建 
出 来 的 平行 四 边 形 面积 为 0， 那 么 axb=0。 注 意 ， 这 里 得 到 的 是 零 向 


三 


量 ， 而 不 是 标量 0。 


下 面 ， 我 们 来 看 结 东 和 天 量 的 方向 。 你 可 能 会 说 :“ 方 癌 ? 不 是 已 经 
说 了 方 各 了 嘛 ， 融 是 和 两 个 天 量 都 垂直 束 可 以 了 啊 。” 但 是 ， 如 采 你 仔 
细 想 一 下 残 会 发 现 ， 实 际 上 我 们 有 两 个 方 癌 可 以 选择 ， 这 两 个 方 癌 都 
和 这 两 个 天 量 垂直 。 那 么 ， 我 们 要 选择 哪个 方 同 呢 ? 


这 里 就 要 和 之 前 提 到 的 左手 坐标 系 和 右手 坐标 系 联系 起 来 了 ， 如 
图 4.27 所 示 。 


A / 


b 


A 图 4.26 使 用 矢量 a 和 矢量 b 构 建 一 个 平行 四 边 形 


右手 坐标 系 : axb 


左手 坐标 系 : axb 


4 图 4.27 “分别 使 用 左手 坐标 系 和 右手 坐标 系 得 到 的 又 积 结果 


这 个 结果 是 怎么 得 到 的 呢 ? 来 ， 举 起 你 的 双手 ! 哦 ， 不 .…… 先 举 
起 你 的 右手 。 在 右手 坐标 系 中 ，axb 的 方 问 将 使 用 右手 法 则 来 判 晰 。 我 
们 先 想象 把 手心 放 在 了 a 和 b 的 尾部 交点 处 ， 然 后 张 开 你 的 手 税 让 手 千 
方向 和 a 的 方 癌 重合 ， 再 弯曲 你 的 四 指 让 它们 辐 b 的 方 癌 靠拢 ， 节 后 伸 
出 你 的 大 拇指 ! 天 拇指 指 网 的 方 癌 承 是 右手 坐标 系 中 axb 的 方向 了 。 如 
果 你 实在 不 明白 怎么 摆 放 和 扭 动 你 的 手 ， 那 么 就 看 图 4.28 好 了 。 


右手 坐标 系 : axb 


和 图 4.28 使 用 右手 法 则 判断 右手 坐标 系 中 axb 的 方向 


同 理 ， 我 们 可 以 使 用 左手 法 则 来 判断 左手 坐标 系 中 axb 的 方向 。 赶 
紧 举 起 你 的 左手 试 试 吧 〈 你 可 能 会 发 现 这 个 姿势 比较 扭曲 ) ! 


需要 注意 的 是 ， 虽 然 看 起 来 左 石 手 坐 标 系 的 选择 会 影响 又 积 的 结 
果 ， 但 这 仅仅 是 “看 起 来 "而 已 。 从 又 积 的 数学 表达 式 可 以 发 现 ， 使 用 


左手 坐标 系 还 是 右手 坐标 系 不 会 对 计算 结果 产生 任何 影响 ， 它 影响 的 
只 是 数字 在 三 维 空间 中 的 视觉 化 表现 而 已 。 当 从 右手 坐标 系 转换 为 左 
手 坐 标 系 时 ， 所 有 点 和 矢量 的 表达 和 计算 方式 都 会 保持 不 变 ， 只 是 当 
呈现 到 屏幕 上 时 ， 我 们 可 能 会 发 现 , “号 ， 怎 么 图 像 反 过 来 了 ! ”。 当 
我 们 想 要 两 个 坐标 系 达 到 同样 的 视觉 效果 时 ， 可 能 束 需 要 改变 一 些 数 
学 运算 公式 ， 这 不 在 本 书 的 范畴 内 。 有 兴趣 的 读者 可 以 参考 本 章 的 扩 
展 阅 读 部 分 。 


那么 ， 又 积 到 抵 有 什么 用 呢 ? 最 音 见 的 一 个 应 用 吏 生 计算 垂直 于 
一 个 平面 、 三 角形 的 矢量 。 画 外 ， 还 可 以 用 于 判断 三 角 面 片 的 参 癌 。 
读 着 可 以 在 本 市 的 练习 题 中 找到 这 些 应 用 。 


4.3.3 ”练习 题 


又 到 了 做 练习 的 时 候 了 ， 大 家 征 不 是 都 很 激动 ! 那么 ， 赶 紧 拿 起 
笔 、 拿 起 纸 开 始 吧 


1. 是 非 题 


(1) 一 个 矢量 的 大 小 不 重要 ， 我 们 只 需要 在 正确 的 位 置 把 它 画 出 
来 束 可 以 了 。 


(2) 点 可 以 认为 是 位 置 矢量 ， 这 是 通过 把 矢量 的 尾 固 定 在 原点 得 
ls 


(3) 选择 左手 坐标 系 还 是 右手 坐标 系 很 重要 ， 因 为 这 会 影响 又 积 
的 计算 。 


2. 计算 下 面 的 天 量 运 算 : 


(1) 1C2,7.3) 


(2) 2.5(5,4,10) 


(3. 4) 


(3) 


(4) 对 (5,12) 进 行 归 一 化 
(5) (1,1,1) 进 行 归 一 化 

(6) (7,4)+(3,5) 

(7) (9,4,13)-(15,3,11) 


3. 假设 ,场景 中 有 一 个 光源 ， 位 置 在 (10,13,11) 处 ， 还 有 一 个 点 
(2,1,1)， 那 么 光源 距离 该 点 的 距离 是 的 少 ? 


4. 计算 下 面 的 矢量 运算 : 
(1) (4,7)-(3,9) 

(2) (2,5,6)"(3,1,2)-10 
(3) 0.5(-3,4):(-2,5) 
(4) (3,-1 2)x(-5,4,1) 
(5) (~5,4,1)x(3,-1,2) 


5. 已 知 矢量 a 和 矢量 b，a 的 模 为 4，b 的 模 为 6， 它 们 之 间 的 夹 角 为 
60°。 计 算 : 


(1) ab 


-~ 
| 性 


sin60° = -人 0.866 cos60" 一 二 一 0.5 


Ww 


(2) laxb| 提 示 : 


上 


6. 假设 ， 场 景 中 有 一 个 NPC， 它 位 于 点 p 处 ， 它 的 前 方 
(forward) 可 以 使 用 矢量 v 来 表示 。 


(1) 如 果 现 在 玩家 运动 到 了 点 x 处 ， 那 么 如 何 判 断 玩 家 是 在 NPC 
的 前 方 还 是 后 方 ?请 使 用 数学 公式 来 搬 述 你 的 答案 。 提 示 : 使 用 点 
积 。 


(2) 使 用 你 在 a 中 提 到 的 方法 ， 代 入 p=(4,2),v=(-3,4),x=(10,6) 来 验 
证 你 的 答案 。 


(3) 现在 ， 游 戏 有 了 新 的 需求 : NPC 只 能 观察 到 有 限 的 视角 范 
围 ， 这 个 视角 的 角度 是 ， 也 就 是 说 NPC 最 多 只 能 看 到 它 前 方 左 侧 或 右 
侧 2 角 度 内 的 物体 。 那么 ， 我 们 如 何 通 过 点 积 来 判断 NPC 是 否 可 以 看 到 
点 x 呢 ? 


(4) 在 c 的 条 件 基础 上 ， 策 划 又 有 了 新 的 需求 : NPC 的 观察 距离 
也 有 了 限制 ， 它 只 能 看 到 固定 距离 内 的 对 象 ， 现 在 又 如 何 判 断 呢 ? 


7. 在 泻 染 中 我 们 时 常会 需要 判断 一 个 三 角 面 片 是 正面 还 是 背面 ， 
这 可 以 通过 判断 三 角形 的 3 个 顶点 在 当前 至 间 中 二 有 顺 时 针 还 是 计时 针 排 
列 来 得 到 。 给 定 三 角形 的 3 个 顶点 pl1、P2z 和 Pa， 如 何 利用 又 积 来 判断 这 3 
个 点 的 顺序 是 顺 时 针 还 是 逆 时 针 ? 假设 我 们 使 用 的 是 左手 坐标 系 ， 且 


Pi、P2 和 pa 都 位 于 xy 平面 〈《 即 它们 的 z 分 量 均 为 0) ， 人 眼 位 于 z 轴 的 负 方 
向 上 ， 向 z 轴 正方 向 观察 ， 如 图 4.29 所 示 。 


ty 


Tx 


+X 


> 


图 4.29 三 角形 的 三 个 顶点 位 于 xy 平面 上 ， 人 眼 位 于 z 轴 负 方 向 ， 向 z 轴 正方 向 观察 


4.4 矩阵 


不 幸 的 是 ， 没 有 人 能 告诉 你 母体 (matrix) 冤 竟 是 什么 。 你 需要 自 
芭 去 友 现 官 


一 一 电影 《黑客 节 国 》 (英文 名 : The Matrix) 


和 矩阵， 英文 名 是 matrix。 如果 你 用 翻译 软件 去 查 matrix 这 个 单词 的 
翻译 ， 就 会 发 现 它 还 有 一 个 意思 就 是 母体 。 事 实 上 ， 很 多 人 都 不 知 
道 ， 那 部 具有 跨 时 代 意 义 的 电影 《黑客 帝国 》 的 英文 名 就 是 《The 
Matrix》。 在 电影 《黑客 帝国 》 中 ， 母 体 是 一 个 庞大 的 虚拟 系统 ， 它 看 
似 虚 无 绿 涡 ， 但 又 连接 万 物 。 这 一 点 和 和 窍 阵 有 异曲同工 之 妙 。 


没有 人 敢 否 认 甜 阵 在 三 维 数学 中 的 重要 性 ， 事 实 上 和 矩阵 在 整个 线 
性 代数 的 世界 中 都 扮演 了 举足轻重 的 角色 。 在 三 维 数学 中 ， 我 们 通 希 
会 使 用 矩阵 来 进行 变换 。 一 个 答 阵 可 以 把 一 个 天 量 从 一 个 坐标 空间 转 
换 到 男 一 个 坐标 空间 。 在 第 2 章 泻 染 流 水 线 中 ， 我 们 就 看 到 了 很 多 坐标 
变换 ， 例 如 在 顶点 着 色 器 中 我 们 需要 把 顶点 坐标 从 模型 空间 变换 到 齐 
次 裁 榴 坐标 系 中 。 而 在 这 一 半 中 ， 我 们 先 来 认识 一 下 和 矩阵 这 个 概念 。 


那么 ， 现 在 我 们 融 来 看 一 下 ， 这 些 放 在 一 个 小 括号 里 的 数字 怎么 
束 这 么 重要 呢 ? 为 什么 数学 家 们 都 喜欢 用 这 个 小 东西 来 摘出 这 么 多 省 


堂 呢 ? 
4.4.1 ”矩阵 的 定义 
相信 很 多 读者 都 见 过 和 矩阵 的 真 容 ， 例 如 像 下 面 这 个 样子 : 


1] 0.5 3 2 
23 5 V3 10 
4 8 1l1 5 


从 它 的 外 观 上 来 看 ， 束 是 一 个 长 方形 的 网 格 ， 每 个 格子 里 放 了 一 
个 数字 。 的 确 ， 窍 阵 束 是 这 么 倘 单 : 它 是 由 mxn 个 标量 组 成 的 长 方形 数 
组 。 在 上 面 的 式 于 中 ， 我 们 是 用 方 括 号 来 围 住 矩 阵 中 的 数 子 ， 而 一 些 
其 他 的 资料 可 能 会 使 用 圆 括号 或 化 括号 来 表示 ， 这 痢 是 等 价 的 。 


既然 是 网 格 结构 ， 就 意味 着 矩阵 有 行 (row) 列 (column) 之 分 。 
例如 上 面 的 例子 就 是 一 个 3x4 的 矩阵 ， 它 有 三 行 四 列 。 据 此 ， 我 们 可 以 
给 出 矩阵 的 一 般 表 达 式 。 以 3x3 的 矩阵 为 例 ， 它 可 以 写成 : 


77211 77212 
Mf= |77221 77222 


77231 77232 


mi 表明 了 这 个 元 素 在 矩阵 M 的 第 褒 、 


77713 
77223 
77233 


第 j 列 。 


这 样 看 起 来 矩阵 也 没什么 神秘 的 嘛 。 但 是 ， 越 简单 的 东西 往往 越 


厉害 ， 这 也 是 数学 的 魅力 所 在 。 
4.4.2 ”和 矢量 联系 起 来 


前 面 说 人 到， 矢量 其 实 就 是 一 个 数组 ， 而 矩阵 也 是 一 个 数组 。 既 然 
都 是 数组 ， 那 残 是 一 家 人 了 ! 我 们 很 容易 想到 ， 我 们 可 以 用 和 矩阵 来 表 
示 矢 量 。 实 际 上 ， 矢 量 可 以 看 成 是 nx1 的 列 矩 阵 (column matrix) 或 
1xn 的 行 矩 阵 (row matrix) ， 其 中 n 对 应 了 矢量 的 维度 。 例 如 ， 矢 量 


v=(3,8,6) 可 以 写成 行 矩 阵 


[3 8 6] 


或 列 答 阵 


为 什么 我 们 要 把 矢量 和 矩阵 联系 在 一 起 呢 ? 这 是 为 了 可 以 让 矢量 
像 一 个 和 矩阵 一 样 一 起 参与 矩阵 运算 。 这 在 空间 变换 中 将 非 第 有 用 。 


到 现在 ， 使 用 行 矩 阵 还 是 列 和 矩阵 来 表示 矢量 看 起 来 古 没 什么 分 别 
的 。 的 确 ， 我 们 可 以 根据 目 己 的 喜好 来 选择 表示 方法 ， 但 是， 如 采 要 
和 和 矩阵 一 起 参与 乘法 运算 时 ， 这 种 选择 会 影响 我 们 的 书写 顺序 和 结 
条。 这 正 征 我 们 下 面 要 讲 到 的 。 


4.4.3 ”矩阵 运算 
矩阵 这 个 家 伙 看 起 来 比 天 量 要 庞大 很 多 ， 那 么 它 的 运算 是 不 是 很 
复杂 呢 ? 答案 是 肯定 的 。 但 是 ， 驻 运 的 是 在 写 Shader 的 过 程 中 ， 我 们 只 
需要 和 很 简单 的 一 部 分 运算 打交道 。 
1. 和 矩阵 和 标量 的 乘法 
和 矢量 类 似 ， 和 矩阵 也 可 以 和 标量 相 乘 ， 它 的 结果 仍然 是 一 个 相同 
维度 的 矩阵。 它们 之 间 的 乘法 非常 简单 ， 束 是 矩阵 的 每 个 元 素 和 该 标 
量 相 乘 。 以 3x3 的 矩阵 为 例 ， 其 公式 如 下 : 
区 77212 虽 区 大 77212 加 
KM = MK 一 大 ma 722 m3| = | 大 7221 大 77222 大 77223 


大 77231 ”天 77232 大 77233 


77231 77232 77233 


2. 矩阵 和 和 矩阵 的 乘法 


两 个 矩阵 的 乘法 也 很 简单， 它们 的 结果 会 是 一 个 新 的 矩阵 ， 并 且 
这 个 矩阵 的 维度 和 两 个 原 矩 阵 的 维度 都 有 关系 。 


一 个 rxn 的 矩阵 A 和 一 个 nxc 的 矩阵 B 相 乘 ， 它 们 的 结果 AB 将 会 是 
个 rxc 大 小 的 矩阵 。 请 读者 注意 它们 的 行列 关系 ， 第 一 个 矩阵 的 列 数 必 
须 和 第 二 个 矩阵 的 行 数 相同 ， 它 们 相 乘 得 到 的 逢 阵 的 行 数 是 第 一 个 甜 
阵 的 行 数 ， 而 列 数 是 第 二 个 矩阵 的 列 数 。 例 如 ， 如 果 和 矩阵 A 的 维度 是 
4x3， 甜 阵 B 的 维度 是 3x6， 那 么 AB 的 维度 就 是 4x6。 


如 果 两 个 矩阵 的 行列 不 满足 上 面 的 规定 怎么 办 ? 那么 很 抱歉 ， 这 
两 个 矩阵 就 不 能 相 乘 ， 因 为 它们 之 间 的 乘法 是 没有 被 定义 的 (当然 ， 
读 着 完全 可 以 目 己 定义 一 种 狐 的 乘法 ， 但 二 数学 家 们 会 不 会 买账 融 不 
一 定 了 ) 。 那 么 为 什么 会 有 上 面 的 规定 呢 ? 等 我 们 理解 了 矩阵 乘法 的 
操作 过 程 目 然 束 会 明日 。 


我 们 先 给 出 看 起 来 很 复杂 难 懂 ( 当 给 出 直观 的 表 式 后 读者 会 发 现 
其 实 它 没 那 么 难 懂 ) 的 数学 表达 式 : 设 有 rxn 的 矩阵 A 和 一 个 nxc 的 矩阵 
B， 它 们 相 乘 会 得 到 一 个 rxc 的 矩阵 C=AB。 那 么 ，C 中 的 每 一 个 元 素 cj 
等 于 A 的 第 i 行 所 对 应 的 矢量 和 B 的 第 j 列 所 对 应 的 天 量 进行 天 量 点 乘 的 
结果 ， 即 


nn 


Cij 一 il1b1; 下 Qi2poj 二 dinbnj= Cik br 
k=] 
看 起 来 很 复杂 对 吗 ? 但 是 ， 我 们 可 以 用 一 个 更 简单 的 方式 来 解 
释 : 对 于 每 个 元 素 c;， 我 们 找到 A 中 的 第 行 和 B 中 的 第 j 列 ， 然 后 把 它们 
的 对 应 元 素 相 乘 后 再 加 起 来 ， 这 个 和 残 是 cj 


一 种 更 直观 的 方式 如 图 4.30 所 示 。 假 设 A 的 大 小 是 4x2，B 的 大 小 是 
2x4， 那 么 如 果 要 计算 C 的 元 素 c>3 的 话 ， 先 找到 对 应 的 行 矩 阵 和 列 矩 
阵 ， 即 A 中 的 第 2 行 和 B 中 的 第 3 列 ， 把 它们 进行 矢量 点 积 后 就 可 以 得 到 
结果 值 。 因 此 ， c23=a21bD13+a2zzb23 。 


四 bl» |b13 网 
p21 b2» 1223| 2D24 


dll 412 Cll C12 C13 C14 
021 a22 C2 C22 ca4 
431 432 C31 C32 C33 C34 
C41 442 C41 C42 C43 C44 


A 图 4.30 ”计算 c23 的 过 程 


在 Shader 的 计算 中 ， 我 们 更 多 的 是 使 用 4x4 答 阵 来 运算 的 。 
和 窍 阵 乘法 满足 一 些 性 质 。 
性 质 一 : 矩阵 乘法 并 不 满足 交换 律 。 


也 就 是 说 ， 通 常情 况 下 : 


ABzBA 
性 质 二 : 矩阵 乘法 满足 结合 律 。 
也 吏 是 说 ， 
(AB)C=A(BC) 
矩阵 乘法 的 结合 律 可 以 扩展 到 更 多 和 矩阵 的 相 乘 。 例 如 ， 
ABCDE=((A(BC))D)E=(AB)(CD)E 
读者 可 根据 年 阵 乘法 的 定义 很 轻松 地 验证 上 述 结论 。 
4.4.4 ”特殊 的 矩阵 


有 一 些 特殊 的 矩阵 类 型 在 Shader 中 经 钊 见 到 。 这 些 特 殊 的 窍 阵 往往 
具有 一 些 重要 的 性 质 。 


1. 方块 矩阵 


方块 矩阵 square matrix) ， 简 称 方 阵 ， 是 指 那些 行 和 列 数目 相 
等 的 和 矩阵。 在 三 维 演 染 里 ， 最 党 使 用 的 就 是 3x3 和 4x4 的 方 阵 。 


方 阵 之 所 以 值得 单独 拿 出 来 讲 ， 是 因为 矩阵 的 一 些 运算 和 性 质 是 
只 有 方 阵 才 具有 的 。 例 如 ， 对 角 元 素 (diagonal elements) 。 方 阵 的 对 
角 元 素 指 的 是 行 号 和 列 号 相等 的 元 素 ， 例 如 mi1、m2，。、m3s 等 。 如 果 把 
方 阵 看 成 一 个 正方 形 的 话 ， 这 些 元 素 排列 在 正方 形 的 对 角 线 上 ， 这 也 
是 它们 名 字 的 由 来 。 如 果 一 个 抢 阵 除了 对 角 元 素 外 的 所 有 元 素 都 为 0， 


那么 这 个 矩阵 就 叫做 对 角 和 矩阵 《diagonal matrix) 。 例 如 ， 下 面 就 是 一 
个 4x4 的 对 角 和 矩阵 : 


2. 单位 矩阵 


一 个 特殊 的 对 角 和 矩阵 是 单位 矩阵 (identity matrix) ， 用 了 来 表 
示 。 一 个 3x3 的 单位 矩阵 如 下 : 


1 0 0 
13= |I0 1 0 
0 0 1 
为 什么 要 为 这 种 矩阵 单独 起 一 个 名 字 呢 ?这 是 因为 ， 任 何 矩 阵 和 
它 相 乘 的 结 采 都 还 是 原来 的 矩阵 。 也 怠 是 说 ， 
MI=IM=M 
这 就 跟 标 量 中 的 数字 1 一 样 ! 
3. 转 置 矩阵 


转 置 矩 阵 (transposed matrix) 实际 是 对 原 和 矩阵 的 一 种 运算 ， 即 转 
置 运算 。 给 定 一 个 rxc 的 矩阵 M， 它 的 转 置 可 以 表示 成 ML ， 这 是 一 个 
cxr 的 矩阵 。 转 置 盾 阵 的 计算 非常 简单 ， 我 们 只 需要 把 原 和 矩阵 翻转 一 下 
即 可 。 也 就 是 说 ， 原 矩阵 的 第 i 行 变 成 了 第 i 列 ， 而 第 j 列 变 成 了 第 j 行 。 


数学 公式 是 ， 


FT A 


例如 ， 


bh 
© 
Ut ~ 


z 


对 于 行 矩 阵 和 列 和 矩阵 来 总 ， 我 们 可 以 使 用 转 置 操作 来 转换 行列 矩 
阵 : 


转 置 矩阵 也 有 一 些 和 常用 的 性 质 。 
性 质 一 :和 矩阵 转 置 的 转 置 等 于 原 矩 阵 。 


很 容易 理解 ， 我 们 把 一 个 沧 阵 翻转 一 下 后 再 翻转 一 下 ， 等 于 没有 
对 矩阵 做 任何 操作 。 即 


(M')'=M 
性 质 二 : 甜 阵 串 授 的 转 置 ， 等 于 有 反 同 串 接 各 个 矩阵 的 转 置 。 


用 公式 表示 整 是 : 


(AB)I=BILAL 
该 性 质 同样 可 以 扩展 到 更 多 和 矩阵 相 乘 的 情况 。 
4. 逆 矩 阵 


道 和 矩阵 (inverse matrix) 大 概 是 本 书 讲 到 的 关于 和 矩阵 最 复杂 的 一 
种 操作 了 。 不 是 所 有 的 矩阵 都 有 逆 窍 隆 ， 第 一 个 前 提 束 是 ， 该 矩阵 必 
有 山 是 一 个 必 取 8 


给 定 一 个 方 阵 M， 它 的 逆 和 矩阵 用 M ! 来 表示 。 逆 矩阵 最 重要 的 性 质 
束 定 ， 如 采 我 们 把 M 和 M- 相 乘 ， 那 么 它们 的 结 采 将 会 定 一 个 单位 矩 
阵 。 也 束 是 说 ， 


MM 1!= MM:=I 


前 面 说 了 ， 并 非 所 有 的 方 阵 都 有 对 应 的 逆 矩 阵 。 一 个 明显 的 例子 
束 是 一 个 所 有 元 素 都 为 0 的 和 矩阵， 很 显然 ， 任 何 矩 阵 和 它 相 乘 都 会 得 到 
一 个 零 矩 阵 ， 即 所 有 的 元 素 仍 然 都 是 0°。 如果 一 个 矩阵 有 对 应 的 逆 甜 
阵 ， 我 们 就 说 这 个 矩阵 是 可 逆 的 (invertible) 或 者 说 是 非 奇 异 的 
(nonsingular) ; 相反 的 ， 如 果 一 个 矩阵 没有 对 应 的 刻 矩阵， 我 们 束 
说 它 是 不 可 首 的 noninvertible) 或 者 说 是 奇异 的 (singular) 。 


那么 如 何 判断 一 个 矩阵 是 否 是 可 地 的 呢 ? 简单 来 说 ， 如 条 一 个 矩 
阵 的 行列 式 (determinant) 不 为 0， 那 么 它 就 是 可 逆 的 。 关 于 和 矩阵 的 行 
列 式 是 什么 以 及 如 何 求 解 一 个 矩阵 的 逆 和 矩阵 ， 可 以 参见 本 章 的 扩展 阅 
读 部 分 。 由 于 这 部 分 内 容 涉及 较 多 计算 和 其 他 定义 ， 本 书 不 再 性 述 。 
在 写 Shader 的 过 程 中 ， 这 些 矩 阵 通常 可 以 通过 调用 第 三 方 库 《如 C++ 数 


学 库 Eigen) 来 直接 求 得 ， 不 需要 开发 者 手动 计算 。 在 Unity 中 ， 重 要 变 
换 窍 阵 的 刻 矩 阵 Unity 也 提供 了 相应 的 变量 供 我 们 使 用 。 关 于 这 些 Unity 
内 置 的 矩阵 ， 读 者 可 以 在 本 章 的 4.8 节 找到 更 详细 的 解释 。 


地 矩阵 有 很 多 非 稼 重要 的 性 质 。 


性 质 一 : 逆 矩 阵 的 逆 和 矩阵 是 原 窍 阵 本 号 。 
假设 矩阵 M 是 可 他 的 ， 那 么 


(MT=M 


性 质 二 : 单位 矩阵 的 逆 窍 阵 是 它 本 身 。 


11=I 


性 质 三 : 转 置 窍 阵 的 了 逆 窍 阵 是 地 矩阵 的 转 置 。 


(M7 I=(M DT 


性 质 四 : 矩阵 串 接 相 乘 后 的 逆 答 阵 等 于 反问 串 接 各 个 矩阵 的 敢 答 


(AB) '=B A 


这 个 性 质 也 可 以 扩展 到 更 多 和 窍 阵 的 连 乘 ， 如 : 


(ABCD)-I=D-IC-IB-IA- 1 


逆 矩 阵 是 具有 几何 意义 的 。 我 们 知道 一 个 矩阵 可 以 表示 一 个 变换 
( 详 见 4.5 辣 ) ， 而 赣 矩 阵 允 许 我 们 还 原 这 个 变换 ， 或 者 说 是 计算 这 个 
变换 的 反 回 变换 。 因 此 ， 如 果 我 们 使 用 变换 矩阵 M 对 矢量 v 进 行 了 一 次 
变换 ， 然 后 再 使 用 它 的 逆 矩 阵 M 进行 另 一 次 变换 ， 那 么 我 们 会 得 到 原 
来 的 矢量 。 这 个 性 质 可 以 使 用 答 阵 乘法 的 结合 律 很 容易 地 进行 证 明 : 


M i1(Mv)=(M +1M)v=Iv=v 
5. 正 交 和 矩阵 


另 一 个 特殊 的 方 阵 是 正 交 矩阵 (orthogonal matrix) 。 正 交 是 和 矩阵 
的 一 种 属性 。 如 果 一 个 方 阵 M 和 它 的 转 置 矩阵 的 乘积 是 单位 矩阵 的 
话 ， 我 们 就 说 这 个 矩阵 是 正 交 的 (orthogonal) 。 反 过 来 也 是 成 立 的 。 
也 就 是 说 ， 窍 阵 M 是 正 交 的 等 价 于 : 

MM’= MM=I 

读者 可 能 已 经 看 出 来 ， 上 式 和 我 们 在 上 一 节 讲 到 的 人 逆 矩阵 时 过 到 
的 公式 很 像 。 把 这 两 个 公式 结合 起 来 ， 我 们 就 可 以 得 到 一 个 重要 的 性 
质 ， 即 如 果 一 个 矩阵 是 正 交 的 ， 那 么 它 的 转 置 矩 阵 和 逆 和 矩阵 是 一 样 
的 。 也 就 是 说 ， 和 矩阵 M 是 正 交 的 等 价 于 : 


MIL=M-: 


这 个 式 子 非常 有 用 ， 因 为 在 三 维 变换 中 我 们 经 常会 需要 使 用 逆 矩 
阵 来 求解 反问 的 变换 。 而 逆 答 阵 的 求解 往往 计算 量 很 大 ， 但 转 鞋 矩阵 
却 非常 容易 求解 :我 们 只 需要 把 矩阵 翻转 一 下 就 可 以 了 。 那 么 ， 我 们 
如 何 提 前 判断 一 个 矩阵 是 否 是 正 交 矩阵 呢 ? 读 着 可 能 会 说 ， 判 断 
MM"=I 是 否 成 立 束 可 以 了 嘛 ! 但 是 ， 求 解 这 样 一 个 表达 式 无 疑 是 需要 
一 定 计 算 量 的 ， 这 些 计算 量 可 能 和 直接 求解 逆 矩 阵 无 异 。 而 且 ， 如 果 
我 们 判断 出 来 这 不 是 一 个 正 交 短 阵 ， 那 么 这 些 人 花 在 验证 是 否 古 正 交 短 
阵 上 的 计算 就 浪费 了 。 因 此 ， 我 们 更 想 不 需 要 计算 ， 而 仅仅 根据 一 个 
和 矩阵 的 构造 过 程 来 判断 这 个 矩阵 是 否 是 正 交 矩阵 。 为 此 ， 我 们 需要 来 
了 解 正 交 矩阵 的 几何 意义 。 


我 们 来 看 一 下 对 于 3x3 的 正 交 矩 陡 有 什么 特点 。 根 据 正 区 和 窍 阵 的 定 
义 ， 我 们 有 : 


cl cl Cl‘C2 C1°C3 
= |c2 cl C2*C2 CC3 


c3 .cl ca co C3'C3 
1 0 0 
= |10 1 0| = 了 
0 0 1 
这 样 ， 我 们 束 有 了 9 个 等 式 : 
C1°C1=1, Cc1'C2=0 c1'C3=0 
C2…C1=0， C2°Co=1, c2C3=0 


C3°C1=0 > ca'C2=0 5 C3'C3=1 


我 们 可 以 得 到 以 下 结论 : 


。 矩阵 的 每 一 行 ， 即 c1、c5 和 cs 十 单 位 天 量 ， 因 为 只 有 这 样 它们 与 日 
己 的 点 积 才能 是 1; 

。 阜 阵 的 每 一 行 ， 即 cl 、cz 和 cs 之 间 互 相 垂直 ， 因 为 只 有 这 样 它们 之 
间 的 点 积 才 能 走 0。 

。 上 述 两 条 结论 对 矩阵 的 每 一 列 同 样 适用 ， 因 为 如 琳 M 是 正 交 矩阵 
的 话 ，M! 也 会 是 正 交 矩阵 。 


也 束 是 说 ， 如 琳 一 个 矩阵 满足 上 面 的 条 件 ， 那 么 它 就 是 一 个 正 交 
和 矩阵。 读者 可 以 注意 到 ， 一 组 标准 正 交 基 (定义 详 见 4.2.2 节 ) 可 以 精 
确 地 满足 上 述 条件 。 在 4.6.2 廊 中， 我 们 会 使 用 坐标 空间 的 基 天 量 来 构 
建 用 于 空间 变换 的 矩阵 。 因 此 ， 如 果 这 些 基 矢量 是 一 组 标准 正 交 基 的 
话 〈 例 如 只 存在 旋转 变换 ) ， 那 么 我 们 就 可 以 直接 使 用 转 置 矩 阵 来 求 
得 该 变换 的 敢 变 换 。 


读者 :我 被 标准 正 交 、 正 交 这 些 概念 搞 混 了 ， 可 以 再 说 明 一 下 是 
什么 意思 吗 ? 


我 们 : 读者 应 该 已 经 知道 ， 一 个 坐标 空间 需要 指定 一 组 基 矢 量 ， 
也 就 是 我 们 理解 的 坐标 轴 。 如 果 这 些 基 矢量 之 间 是 互相 敢 直 的 ， 那 么 
我 们 就 把 它们 称 为 是 一 组 正 交 基 (orthogonal basis) 。 但 是 ， 它 们 的 
长 度 并 不 要 求 一 定 是 1°。 如 果 它 们 的 长 度 的 确 是 1 的 话 ， 我 们 就 说 它们 
是 一 组 标准 正 交 基 (orthonormal basis) 。 因 此 ， 一 个 正 交 矩阵 的 行 和 
列 之 间 分 别 构成 了 一 组 标准 正 交 基 。 但 是 ， 如 果 我 们 使 用 一 组 正 交 基 
来 构建 一 个 矩阵 的 话 ， 这 个 矩阵 可 能 就 不 是 一 个 正 交 秆 了 泗 ， 因 为 这 些 
基 矢 量 的 长 度 可 能 不 为 1， 也 就 是 说 它们 不 是 标准 正 交 基 。 


4.4.5 ” 行 矩 阵 还 是 列 和 矩阵 


我 们 已 经 7 了解 了 足够 多 的 数学 概念 ， 但 在 学 习 和 矩阵 的 几何 意义 之 
前 ， 我 们 有 必要 说 明 一 下 行 洽 阵 和 列 答 阵 的 问题 。 


在 前 面 的 章节 中 我 们 讲 到 ， 可 以 把 一 个 矢量 转换 成 一 个 行 矩 阵 或 
征 列 和 矩阵。 它们 本 喘 是 没有 区 别 的 ， 但 是 ， 当 我 们 需要 把 它 和 另 一 个 
和 窍 阵 相 乘 时 ， 束 会 出 现 一 些 老 异 。 


假设 有 一 个 天 量 v=(x,y,z)， 我 们 可 以 把 它 转换 成 行 答 阵 v= [xyz] 或 列 
矩阵 v= [xyz] 《这 里 使 用 了 转 置 符号 来 避免 列 和 矩阵 在 我 们 的 这 一 行 中 
显得 太 高 ) 。 现在 ， 有 男 一 个 矩阵 M: 


mil m12 m13 
M = 攻 77222 虽 
77231 77232 77233 
那么 M 分 别 和 行 矩 阵 以 及 列 和 矩阵 相 乘 后 会 是 什么 结果 呢 ? 我 们 先 
来 看 M 和 行 矩 阵 的 相 乘 。 由 和 矩阵 乘法 的 定义 可 知 ， 我 们 需要 把 行 矩 阵 


放 在 M 的 左边 (还 记得 吗 ， 和 矩阵 乘法 要 求 两 个 矩阵 的 行列 数 满足 一 定 
条件 ); 见 


VvIM 一 [zm 十 777221 十 277231 Z77212 十 77222 十 IN32 TIN13 TT YMN93 TT 277233] 
而 如 果 和 列 和 矩阵 相 科 的话， 结果 是 : 


T77211 十 77212 十 zm13 
Mv = | z77221 十 ?77222 十 z77223 


TM 十 Ym32 十 IN33 


读者 认真 对 比 吏 会 发 现 ， 结 末 矩 孟 除 了 行列 矩阵 的 区 别 外 ， 里 面 
的 元 素 也 是 不 一 样 的 。 这 就 意味 着 ， 在 和 矩阵 相 乘 时 选择 行 矩 阵 还 是 
列 矩 阵 来 表示 矢量 是 非常 重要 的 ， 因 为 这 决定 了 矩阵 乘法 的 书写 次 序 
和 结 采 值 。 


在 Unity 中 ， 和 规 做 法 是 把 天 量 放 在 矩阵 的 右 人 出， 即 把 天 量 转换 成 
列 矩阵 来 进行 运算 。 I 在 本 书后 面 的 内 容 中 ， 如 无 特殊 情况 ,我 
们 都 将 使 用 列 和 矩阵。 这 和 意味 着 ， 我 们 的 矩阵 乘法 通常 都 是 右 乘 ， 例 
如 : 


CBAv= (C(B(Av))) 


ee 我 们 的 阅读 顺序 是 从 右 到 左 ， 即 先 对 v 使 用 
变换 ， 再 使 用 B 进 行 变换 ， 最 后 使 用 C 进 行 变 换 。 


上 上 面 的 计算 等 价 于 下 面 的 行 矩 阵 运 算 : 
vA"B'CT = (((vA")B')C") 
如 有 果 你 还 古 不 能 明白 上 面 的 舍 义 ， 可 以 参见 练习 题 3。 
4.4.6 ”练习 题 
1. 判断 下 面 矩 阵 的 乘法 是 否 存在 。 如 果 存 在 ， 计 算 它 们 的 乘积 。 


DB do 


1 一 2 3 
5 1 4 
(3) 6 0 3 


2. 判断 下 面 的 窍 阵 是 否 是 正 交 矩阵 。 
1 0 0 
1 0 0 
(L100 
0 0 
0 0 
1 0 
0 1 


cosP 一 SP 0 
sing cos 0 
(3) 0 0 1 


3. 给 定 一 个 天 量 (3,2,6)， 分 别 把 它 当 成 行窃 阵 和 列 和 矩阵 与 下 面 的 
和 窍 阵 相 乘 。 考 虑 两 种 情况 下 得 到 的 天 量 结果 坪 否 一 样 。 如 采 不 一 样 ， 
考虑 如 何 得 到 相同 的 结 


1 0 0 
2 
(1) 0 1 


Me | 


om 二 


4.5 矩阵 的 几何 意义 ， 变 换 


天 于 和 窍 阵 ， 很 多 困扰 初学 人 者 的 问题 都 是 类 似 的 ; 


点 和 天 量 都 可 以 在 冬 像 中 画 出 来 ， 那 么 矩阵 可 以 吗 ? 

我 听 说 矩阵 和 线性 变换 、 仿 射 变换 有 关 ， 这 些 变换 到 奈 是 什么 意 
思 呢 ? 

我 总 是 听 到 齐 次 坐标 这 个 名 词 ， 它 是 什么 意思 呢 ? 

变换 和 矩阵 的 关系 又 是 什么 呢 ? 或 者 说 ， 给 定 一 个 变换 ， 我 如 何 
得 到 它 对 应 的 矩阵 呢 ? 


在 学 习 完 本 太后 ,希望 读者 们 能 够 回答 出 这 些 问 题 。 


对 于 第 一 个 问题 ， 在 三 维 泻 染 中 矩阵 可 以 可 视 化 吗 ? 笠 运 的 是 ， 
管 案 是 肯定 的 ， 这 个 可 视 化 的 结 琳 束 是 变换 。 因 此 ， 如 琳 读 者 在 后 面 
的 内 容 中 看 到 了 一 个 矩阵 ， 那 么 你 可 以 认为 目 己 看 到 的 就 古 一 个 变换 
(当然 ， 在 线性 代数 中 矩阵 的 用 处 不 仅 是 用 于 变换 ， 但 本 书 的 讨论 范 
围 仅 在 于 此 ) 。 


在 游戏 的 世界 中 ， 这 些 变换 一 般 包含 了 旋转 、 缩 放 和 和 平移。 游戏 
开发 人 员 硕 望 给 定 一 个 点 或 矢量 ， 再 给 定 一 个 变换 (例如 把 点 平移 到 


另 一 个 位 置 ， 把 矢量 的 方向 旋转 30" 等 ) ， 就 可 以 通过 某 个 数学 运算 来 
求 得 新 的 点 和 矢量 。 聪 明 的 和 完 人 们 发 现 ， 可 以 使 用 矩阵 来 完美 地 解决 
这 个 问题 。 那 么 问题 束 变 成 了 ， 我 们 如 何 使 用 矩阵 来 表示 这 些 变 换 ? 


4.5.1 什么 是 变换 

变换 (transform) ， 指 的 是 我 们 把 一 些 数 据 ， 如 点 、 方 向 矢量 其 
至 是 颜色 等 ， 通 过 某 种 方式 进行 转换 的 过 程 。 在 计算 机 图 形 学 领域 ， 
变换 非常 重要 。 尽 管 通 过 变换 我 们 能 够 进行 的 操作 是 有 限 的 ， 但 这 些 
操作 已 经 足够 黄 定 变换 在 图 形 学 领域 举足轻重 的 地 位 了 。 


我 们 先 来 看 一 个 非常 常见 的 变换 类 型 一 一 线性 变换 (linear 
transform) 。 线 性 变换 指 的 是 那些 可 以 保留 矢量 加 和 标量 乘 的 变换 。 
用 数学 公式 来 表示 这 两 个 条 件 束 是 : 


f(x)+f(y)=f(x+y) 
kf(x)=f(kx) 


上 面 的 式 子 看 起 来 很 抽象 。 缩 放 (scale) 就 是 一 种 线性 变换 。 例 
如 ，f(x)=2x， 可 以 表示 一 个 大 小 为 2 的 统一 缩放 ， 即 经 过 变换 后 矢量 x 
的 模 将 被 放大 两 倍 。 可 以 发 现 ，f(x)=2x 古 满足 上 面 的 两 个 条 件 的 。 同 
样 ， 旋 转 (rotation) 也 是 一 种 线性 变换 。 对 于 线性 变换 来 说 ， 如 果 我 
们 要 对 一 个 三 维 的 天 量 进行 变换 ， 那 么 仅仅 使 用 3x3 的 矩阵 就 可 以 表示 
所 有 的 线性 变换 。 


线性 变换 除了 包括 旋转 和 缩放 外 ， 还 包括 错 切 (shear) 、 镜 像 
(mirroring， 也 被 称 为 reflection ) `、 正 交 投影 (orthographic 


projection) 等 ， 但 本 书 着 重 讲述 旋转 和 缩放 变换 。 


但 是 ， 仪 有 线性 变换 十 不 够 的 。 我 们 来 考虑 平移 变换 ， 例 如 
f(x)=x+(1,2,3)。 这 个 变换 就 不 古 一 个 线性 变换 ， 它 既 不 满足 标量 乘法 ， 
也 不 满足 矢量 加 法 。 如 琳 我 们 令 x=(1,1,1)， 那 么 : 


f(x)+f(x)=(4,6,8) 


f(x+x)=(3,4,5) 


可 见 ， 两 个 运算 得 到 的 结果 是 不 一 样 的 。 因 此 ， 我 们 不 能 用 一 个 
3x3 的 和 矩阵 来 表示 一 个 平移 变换 。 这 是 我 们 不 希望 看 到 的 ， 毕 竞 平 移 变 
换 是 非常 常见 的 一 种 变换 。 


这 样 ， 就 有 了 仿 射 变换 (affine transform) 。 仿 射 变换 就 是 合 ; 
线性 变换 和 平移 变换 的 变换 类 型 。 念 射 变换 可 以 使 用 一 个 4x4 的 矩阵 来 
表示 ， 为 此 ， 我 们 需要 把 矢量 扩展 到 四 维 空间 下 ， 这 就 是 齐 次 坐标 空 


间 (homogeneous space) 。 


表 4.1 给 出 了 图 形 学 中 常见 变换 短 阵 的 名 称 和 它们 的 特性 。 


表 4.1 ”常见 的 变换 种 类 和 它们 的 特性 (N 表 示 不 满足 该 特性 ，Y 表 示 满 足 该 特性 ) 


是 线性 变换 | 是 仿 射 变换 | 是 可 逆 矩 阵 | 是 正 交 和 矩阵 


是 线性 变换 | 是 仿 射 变换 | 是 可 逆 和 矩阵 | 是 正 交 甜 阵 
吗 吗 吗 


绕 坐 标 负 旋转 的 旋转 矩 


人 标 轴 缩 放 的 缩放 和 矩 


= 
-= 


在 下 面 的 内 容 中 ， 我 们 将 学 习 其 中 一 些 基本 的 变换 类 型 ， 旋转， 
缩放 和 平移 。 对 于 正 交 投影 和 透视 投影 ， 我 们 将 在 4.6.7 广 中 给 出 它们 
的 表示 方法 。 而 对 于 其 他 变换 类 型 ， 本 书 不 再 具体 讨论 读者 可 以 在 
本 章 的 扩展 阅读 中 找到 更 多 内 容 。 


4.5.2” 齐 次 坐标 


我 们 知道 ， 由 于 3x3 矩 阵 不 能 表示 平移 操作 ， 我 们 束 把 其 扩展 到 了 
4x4 的 矩阵 (是 的 ， 只 要 多 一 个 维度 就 可 以 实现 对 平移 的 表示 ) 。 为 
此 ， 我 们 还 需要 把 原来 的 三 维 矢量 转换 成 四 维 矢 量 ， 也 就 是 我 们 所 说 
的 齐 次 坐标 (homogeneous coordinate) ”( 事 实 上 齐 次 坐标 的 维度 可 以 
超过 四 维 , 但 本 书 中 所 说 的 齐 次 坐标 将 泛 指 四 维 齐 次 坐标 ) 。 我 们 可 
以 发 现 ， 齐 次 坐标 并 没有 神秘 的 地 方 ， 它 只 是 为 了 方便 计算 而 使 用 的 
一 种 表示 方式 而 已 。 


如 上 所 说 ， 齐 次 坐标 是 一 个 四 维 矢 量 。 那 么 ， 我 们 如 何 把 三 维 矢 
量 转 换 成 章 次 坐标 呢 ? 对 于 一 个 护 ， 从 三 维 坐标 转换 成 章 次 坐标 是 把 
其 w 分 量 设 为 1， 而 对 于 方向 矢量 来 说 ， 需 要 把 其 w 分 量 设 为 0° 这 样 的 
设置 会 导致 ， 当 用 一 个 4x4 矩 阵 对 一 个 点 进行 变换 时 ， 平 移 、 旋 转 、 缩 
放 都 会 施加 于 该 点 。 但 十 如 琳 是 用 于 变换 一 个 方 喇 矢量 ， 平 移 的 效 末 
吏 会 家 名 略 。 我 们 可 以 从 下 面 的 内 容 中 理解 这 些 老 异 的 原因 。 


4.5.3 ”分 解 基础 变换 矩阵 


我 们 已 经 知道 ， 可 以 使 用 一 个 4x4 的 矩阵 来 表示 平移 、 旋 转 和 缩 
放 。 我 们 把 表示 纯 平 移 、 纯 旋转 和 纯 缩放 的 变换 矩阵 叫做 基础 变换 托 
阵 。 这 些 和 矩阵 具有 一 些 共同 点 ， 我 们 可 以 把 一 个 基础 变换 答 阵 分 解 成 4 
个 组 成 部 分 : 


M3x3 tax3 
01x3 1 


其 中 ， 左 上 和 角 的 矩阵 M3x3 用 于 表示 旋转 和 缩放 ，tsw1 用 于 表示 平 
移 ，01x3 是 零 矩 阵 ， 即 01x3=[0 0 ”0]， 右 下 角 的 元 素 就 是 标量 1 。 


接 下 来 ， 我 们 来 具体 学 习 如 何 用 这 样 一 个 4x4 的 窍 阵 来 表示 平移 、 
旋转 和 缩放 。 
4.5.4 ”平移 矩阵 

我 们 可 以 使 用 矩阵 乘法 来 表示 对 一 个 点 进行 平移 变换 : 
1 00 tt 
1 


0 .01 
000 1 


从 结果 来 看 我 们 可 以 很 容易 看 出 为 什么 这 个 矩阵 有 平移 的 效果 : 
点 的 x、y、z 分 量 分 别 增 加 了 一 个 位 置 偏 移 。 在 3D 中 的 可 视 化 效果 是 ， 
把 扣 (xy,z) 在 空间 中 平移 了 (5 个 蛙 位 。 


有 趣 的 是 ， 如 有 我们 对 一 个 方 癌 天 量 进行 平移 变换 ， 结 采 如 下 : 


1 00 让 
0 10 
0 0 1 上 二 
000 1 


可 以 发 现 ， 平 移 变 换 不 会 对 方向 天 量 产生 任何 影响 。 这 点 很 容易 
理解 ， 我 们 在 学 习 和 天 量 的 时 候 吏 说 过 了 ， 秋 量 没 有 位 置 属性 ， 也 束 是 
说 它 可 以 位 于 空间 中 的 任意 一 点 ， 因 此 对 位 置 的 改变 ( 即 平 移 ) 不 应 
该 对 方 问 天 量 产生 影响 。 


现在 ， 读 者 应 该 明白 当 给 定 一 个 平移 操作 时 如 何 构建 一 个 平移 先 
阵 : 基础 变换 矩阵 中 的 tx 矢量 对 应 了 平移 矢量 ， 左 上 角 的 矩阵 M3x3 为 
单位 矩阵 Is。 


平移 矩阵 的 着 抢 阵 就 是 反 向 平移 得 到 的 矩阵 ， 即 


站 和 
1 二 
0 0 1 —t. 
000 1 


可 以 看 出 ， 平 移 窍 阵 并 不 是 一 个 正 交 矩阵。 
4.5.5 ”缩放 和 矩阵 


我 们 可 以 对 一 个 模型 沿 空 间 的 x 轴 、y 轴 和 z 轴 进行 缩放 。 同 样 ， 我 
们 可 以 使 用 矩阵 乘法 来 表示 一 个 缩放 变换 : 


U 
ky 


0 0 
0 0 


0 k. 0 


0 


0 1 


| 


I 
y| _ 


1 


对 方 回 天 量 可 以 使 用 同样 的 矩阵 进行 缩放 : 


如 果 缩 放 系数 k=ky=k,。， 我 们 把 这 样 的 缩放 称 为 统一 缩放 

， 否 则 称 为 非 统 一 缩放 (nonuniform scale) 。 从 外 
观 上 看 ， 统 一 缩放 是 扩大 整个 模型 ， 而 非 统 一 缩放 会 拉 伸 或 挤 压 模 
型 。 更 重要 的 是 ， 统 一 缩放 不 会 改变 角度 和 比例 信息 ， 而 非 统 一 缩放 
会 改变 与 模型 相关 的 角度 和 比例 。 例 如 在 对 法 线 进 行 变换 时 ， 如 果 存 


(uniform scale) 


在 非 统 一 缩放 ， 直 接 使 用 用 于 变换 顶点 的 变换 矩阵 的 话 ， 就 会 得 到 错 
运 的 结 末 。 正 确 的 变换 方法 可 参见 4.7-J。 


缩放 矩阵 的 逆 和 矩阵 是 使 用 原 缩放 系数 的 倒数 来 对 点 或 方向 矢量 进 
行 缩放 ， 即 
让 0 0 0 
0 六 0 0 
0 0 过 0 
0 0 0 1 


缩放 和 矩阵 一 般 不 是 正 交 矩阵 。 


上 上面 的 矩阵 只 适用 于 沿 坐 标 轴 方 同 进行 缩放 。 如 来 我 们 布 望 在 任 
意 方向 上 进行 缩放 ， 就 需要 使 用 一 个 复合 变换 。 其 中 一 种 方法 的 主要 
思想 束 古 ， 先 将 缩放 轴 变 换 成 标准 坐标 轴 ， 然 后 进行 沿 坐 标 轴 的 缩 
放 ， 再 使 用 逆 变 换 得 到 原来 的 缩放 轴 朝 向 。 


4.5.6 ”旋转 矩阵 


旋转 是 三 种 第 见 的 变换 矩阵 中 最 复 灯 的 一 种 。 我 们 知道 ， 旋 转 操 
作 需 要 指定 一 个 旋转 轴 ， 这 个 旋转 轴 不 一 定 是 空间 中 的 坐标 轴 ， 但 本 
斑 所 讲 的 旋转 吏 是 指 统 看 宝 间 中 的 x 轴 、y 轴 或 z 轴 进行 旋转 。 


如 采 我 们 需要 把 点 绕 着 x 轴 旋 转 9 度 ， 可 以 使 用 下 面 的 矩阵 : 


0 sing cosg 0 


1 0 0 0 

， 0 _ cos 一 Sm ( 
R,(9) = )】 cos sin ) 
0 0 0 1 


统 y 轴 的 旋转 也 是 类 似 的 : 


cos 0 sing 0 
0 1 0 0 

人 三 
R,l ) —sing 0 cosp 0 


0 0 0 1 
最 后 ， 是 绕 z 轴 的 旋转 : 


cosg —sing 0 0 
sing cos 0 0 

.168) 一 
4 0 0 1 0 
0 0 0 1 


旋转 矩阵 的 逆 和 矩阵 是 旋转 相反 角度 得 到 的 变换 和 矩阵。 旋转 矩阵 是 
正 交 矩阵 ， 而 且 多 个 旋转 人 沧 阵 之 间 的 串联 同样 是 正 交 的 。 
4.5.7 复 合 变 换 

我 们 可 以 把 平移 、 旋 转 和 缩放 组 合 起 来 ， 来 形成 一 个 复杂 的 变换 
过 程 。 例 如 ， 可 以 对 一 个 模型 先进 行 大 小 为 (2, 2, 2) 的 缩放 ， 再 绕 y 轴 旋 


加 30*， 最 后 同 z 轴 平移 4 个 单位 。 复 合 变 换 可 以 通过 矩阵 的 串联 来 实 
现 。 上 面 的 变换 过 程 可 以 使 用 下 面 的 公式 来 计算 : 


Pnew = Miransiation Motation M scaie Poia 


由 于 上 面 我 们 使 用 的 是 列 和 矩阵 ， 因 此 阅读 顺序 是 从 右 到 左 ， 即 先 
进行 缩放 变换 ， 再 进行 旋转 变换 ， 最 后 进行 平移 变换 。 需 要 注意 的 
是 ， 变 换 的 结果 是 依赖 于 变换 顺序 的 ， 由 于 矩阵 乘法 不 满足 交换 律 ， 
因此 和 矩阵 的 乘法 顺序 很 重要 。 也 就 是 说 ， 不 同 的 变换 顺序 得 到 的 结果 
可 能 是 不 一 样 的 。 想 象 一 下 ， 如 果 让 读者 向 前 一 步 然后 左 转 ， 记 住 此 


时 的 位 置 。 然 后 回 到 原 位 ， 这 次 先 左 转 再 癌 前 走 一 步 ， 得 到 的 位 置 和 
上 一 次 是 不 一 样 的 。 究 其 本 质 ， 是 因为 矩阵 的 乘法 不 满足 交换 律 ， 因 
此 不 同 的 乘法 顺序 得 到 的 结果 是 不 一 样 的 。 


在 绝 大 多 数 情况 下 ， 我 们 约定 变换 的 顺序 就 是 先 缩放 ， 再 旋转 
最 后 平移 。 


读者 : 为 什么 要 约定 这 样 的 顺序 ， 而 不 是 其 他 顺序 呢 ? 


我 们 : 因为 这 样 的 变换 顺序 是 我 们 需要 的 。 想 象 我 们 对 奶牛 妞妞 
进行 一 个 复合 变换 。 如 果 我 们 按 移 平 移 、 再 缩放 的 顺序 进行 变换 ， 假 
设 初 始 情 况 下 妞妞 位 于 原点 ， 我 们 先 按 (0, 0, 5) 平 移 它 ， 现 在 它 距 离 原 
点 5 个 单位 。 然 后 再 将 它 放大 2 倍 ， 这 样 所 有 的 坐标 都 变 成 了 原来 的 2 
倍 ， 而 这 意味 着 妞妞 现在 的 位 置 是 (0, 0, 10)， 这 不 是 我 们 希望 的 。 正 确 
的 做 法 是 ， 先 缩放 再 平移 。 也 就 是 说 ， 我 们 先 在 原点 对 妞妞 进行 2 倍 的 
缩放 ， 再 进行 平移 ， 这 样 妞 妞 的 大 小 正确 了 ， 位 置 也 正确 了 。 


为 了 从 数学 公式 上 理解 变换 顺序 的 本 质 ， 我 们 可 以 对 比 不 同 变换 
顺序 产生 的 变换 矩阵 的 表达 式 。 如 采 我 们 只 考虑 对 y 轴 的 旋转 的 话 ， 按 
先 缩放 、 再 旋转 、 最 后 平移 这 样 的 顺序 组 合 3 种 变换 得 到 的 变换 矩阵 


三 | 
AE: 


100 #t cos 0 sing 0 kr 0 0 0 
0 1 0 0 1 0 0 0 kk 0 0 

Miransiation Mrotation Mscae = y ,| 
translation rotation SCAalt 0 0 1 t. _sing 0 cos 0 0 0 k. 0 


0 0 0 1 U 0 U l 0 0 0 1 


一 大 ， sin 9 0 k. COS [a t. 
0 0 0 1 


而 如 果 我 们 使 用 了 其 他 变换 顺序 ， 例 如 先 平移 ， 再 缩放 ， 最 后 旋 
转 ， 那 么 得 到 的 变换 矩阵 是 : 


Motation Mscar Miran siation = 


0 0 0 l 0 0 0 1 0 0 0 


0 kh 0 tyky 
一 Si 0 大 .cos —tikysingd +t.k.cosh 
0 0 0 1 


kicosg 0 ksing trkrcos0+t.k.sing : 


从 两 个 结 采 可 以 看 出 ， 得 到 的 变换 矩阵 是 不 一 样 的 。 


除了 需要 注意 不 同类 型 的 变换 顺序 外 ， 我 们 有 时 还 需要 小 心 旋转 
的 变换 顺序 。 在 4.5.6 广 中 ， 我 们 给 出 了 分 别 绕 x 轴 、y 轴 和 z 轴 旋转 的 变 
换 矩 阵 。 一 个 问题 是 ， 如 采 我 们 需要 同时 绕 着 3 个 轴 进 行 旋 转 ， 是 先 绕 
x 轴 、 表 绕 y 轴 最 后 绕 z 轴 旋转 还 是 按 其 他 的 旋转 顺序 呢 ? 


当 我 们 直接 给 出 (0,,0),9,) 这 样 的 旋转 角度 时 ， 需 要 定义 一 个 旋转 顺 
序 。 在 Unity 中 ， 这 个 旋转 顺序 是 zxy， 这 在 旋转 相关 的 API 文 档 中 都 有 
说 明 。 这 意味 着 ， 当 给 定 (6,,0,,9,) 这 样 的 旋转 角度 时 ， 得 到 的 组 合 旋转 
变换 矩阵 是: 


cosg 0 sing 0 kz0 0 0 1 00 
0 1 0 0 0 ky 0 0 Dk We 
—sing 0 cosg 0 0 0 k. 0 0 1 玉 


l 


z 


cosg。 一 sinbg 0 0 1 0 0 0 cosb 0 sing, 
sin 日 - cosb 0 0 0 cosbr 一 Sn 0 0 1 0 
Mrotatez Mrotatex Mrotatey = l l ee | 
[Mratates Mrotatex Mrotate, 0 0 10 0 singr cos0, 0 —sinb, 0 cosb, 


0 0 0 1 0 0 0 1 0 0 0 


一 些 读者 会 有 疑问 : 上 面 的 公式 书写 顺序 是 不 是 反 了 ? 不 是 说 列 
和 矩阵 要 从 右 往 左 读 吗 ? 这 样 一 来 顺序 不 就 颠倒 了 吗 ? 实际 上 ， 有 一 个 
非常 重要 的 东西 我 们 没有 说 明日 ， 那 束 古 旋转 时 使 用 的 坐标 系 。 给 定 
一 个 旋转 顺序 (例如 这 里 的 zxy) ， 以 及 它们 对 应 的 旋转 角度 (90,0,,0,)， 
有 两 种 坐标 系 可 以 选择 。 


绕 坐 标 系 E 下 的 z 轴 旋转 0,， 统 坐标 系 E 下 的 y 轴 旋转 9,， 绕 坐标 系 E 
下 的 x 轴 旋 转 6.， 即 进行 一 次 旋转 时 不 一 起 旋转 当前 坐标 系 。 


绕 坐 标 系 E 下 的 z 轴 旋转 9,， 在 坐标 系 E 下 绕 z 轴 旋转 6, 后 的 新 坐标 系 
E' 下 的 y 轴 旋转 9,， 在 坐标 系 E' 下 绕 y 轴 旋转 90, 后 的 新 坐标 系 E" 下 的 x 
轴 旋 转 6、， 即 在 旋转 时 ， 把 坐标 系 一 起 转动 。 


很 容易 知道 ， 这 两 种 选择 的 结果 是 不 一 样 的 。 但 如 果 把 它们 的 旋 
转 顺序 址 倒 一 下 ， 它 们 得 到 的 结果 就 会 是 一 样 的 ! 说 得 明日 点 ， 在 第 
一 种 情况 下 ， 按 zxy 顺 序 旋 转 和 在 第 二 种 情况 下 ， 按 yxz 顺 序 旋转 是 一 样 
的 。 而 Unity 文 档 中 说 明 的 旋转 顺序 指 的 是 在 第 一 种 情况 下 的 顺序 。 


和 上 面 不 同类 型 的 变换 顺序 导致 的 问题 类 似 ， 不 同 的 旋转 顺序 得 
到 的 结果 也 可 能 是 不 一 样 的 。 我 们 同样 可 以 通过 对 比 不 同 旋转 顺序 得 
到 的 变换 矩阵 来 理解 为 什么 会 出 现 这 样 的 不 同 。 而 这 个 验证 过 程 留 给 
读者 作为 练习 。 


4.6 坐标 空间 


0 
0 
0 


[En 


我 们 已 经 学 会 了 如 何 使 用 矩阵 来 表示 基本 的 变换 ， 如 平移 、 旋 转 
和 缩放 。 而 在 本 节 中 ， 我 们 将 关注 如 何 使 用 这 些 变换 来 对 坐标 空间 进 
行 变换 。 


我 们 在 第 2 章 渔 染 流水 线 中 就 接触 了 坐标 空间 的 变换 。 例 如 ， 在 学 
习 顶 点 着 色 器 流水 线 阶段 时 ， 我 们 说 过 ， 顶 点 着 色 器 最 基本 的 功能 就 
苹 把 模型 的 顶点 坐标 从 模型 空间 转换 到 齐 次 裁 术 坐 标 空间 中 。 


泻 染 游戏 的 过 程 可 以 理解 成 是 把 一 个 个 顶点 经 过 层 层 处 理 最 终 转 
化 到 屏幕 上 的 过 程 ， 那 么 本 我 们 就 将 学 习 这 个 转换 的 过 程 是 如 何 实 
现 的 。 更 具体 来 说 ， 顶 点 是 经 过 了 哪些 坐标 空间 后 ， 最 后 被 画 在 了 我 
们 的 屏幕 上 。 


4.6.1 为 什么 要 使 用 这 么 多 不 同 的 坐标 空间 


我 们 先 要 回答 读者 的 一 个 疑问 。 在 编写 Shader 的 过 程 中 ， 很 多 看 起 
来 很 难 理解 和 复 淋 的 数学 运算 都 是 为 了 在 不 同 坐 标 空 间 之 间 转 换 点 和 
矢量 。 看 起 来 ， 这 么 多 的 坐标 空间 整 是 “万 有 恶 之 源 ” 啊 ! 很 多 人 都 有 这 
样 的 疑问 :“ 为 什么 我 们 不 能 只 使 用 一 个 坐标 空间 来 做 所 有 的 事情 呢 ? 
这 样 一 来 我 们 不 束 不 用 学 习 这 些 烦人 的 数学 公式 了 上 吗 ? 这 样 世界 将 变 
得 多 美好 啊 ! ” 


事情 看 起 来 虽然 是 这 样 一 一 在 只 有 一 个 坐标 空间 的 世界 里 ，Shader 
的 开发 者 会 生活 得 更 加 美好 。 但 事实 是 ， 一 旦 你 真 的 这 么 做 了 ， 束 会 
发 现 理 想 和 现实 之 间 的 差距 ， 我 们 不 可 以 也 不 愿意 抛弃 这 些 不 同 的 坐 
标 空间 。 


事实 上 ， 在 我 们 的 生活 中 ， 我 们 也 总 是 使 用 不 同 的 坐标 空间 来 交 
流 。 现 在 正在 读 这 本 书 的 你 ， 很 可 能 正 坐 在 办 公 室 或 书房 中 。 如 采 问 
你 : “办 公 室 的 饮水 机 在 哪里 ? ”你 大 概 会 回答 : “在 办 公 室 门 的 左 方 3 米 
处 。” 这 里 ， 你 很 目 然 地 使 用 了 以 门 为 原点 的 坐标 空间 。 现 在 ， 公 司 的 
前 台 小 姐 走 进门 来 ， 你 非常 惊讶 地 看 到 她 脸 上 还 残留 有 中 午 吃 饭 的 米 
粒 ! 我 们 假设 正在 读 这 本 书 的 你 古 一 个 好 心 而 且 不 喜欢 看 别人 笑话 的 
人 ， 这 时 你 可 能 会 提醒 她 :“ 咖 ， 你 左 脸 上 面 有 些 东 西 没 有 擦 挥 ! ”此 
时 ， 你 又 使 用 了 以 前 台 小 姐 的 跨 巴 为 原点 的 坐标 空间 。 如 采 只 有 一 个 
坐标 系 会 怎么 样 昵 ?你 可 以 竹 斌 一 下 使 用 以 你 的 办 公 室 的 门 为 原点 的 
坐标 空间 来 插 述 前 台 小 姐 脸 上 的 一 粒 诉 粒 。 


再 比如 ， 我 们 每 个 人 所 生活 的 城市 可 以 看 成 是 一 个 世界 坐标 系 
(三 维 演 染 里 的 世界 坐标 系 将 在 4.6.5 节 中 讲 到 ) ， 这 个 坐标 系 的 坐标 
轴 可 以 认为 是 由 东南 西北 这 些 定义 的 方 同 轴 。 如 末 一 个 耻 生 人 辣 你 问 
路 ， 你 很 有 可 能 会 说 :“ 向 东 走 800 米 上 桥 ， 然 后 再 向 南 走 50 米 就 到 
了 ”。 但 是 我 们 知道 ， 现 实生 活 中 有 很 多 人 是 分 不 清 东 南西 北 的 【在 作 
首 小 时 候 ， 经 党 使 用 “上 北 下 南 左 西 右 东 ”来 傻 傻 地 判断 东南 西北 ， 因 
此 总 是 得 到 错误 方位 ) 。 如 果 现 在 有 一 个 饥 肠 办 转 又 分 不 清 东 南西 北 
的 路 人 来 问 你 最 近 的 餐厅 怎么 走 ， 你 可 能 会 说 :“ 你 先 往 前 走 50 米 ， 到 
了 路 口 癌 左 扮 100 米 菊 有 一 家 非常 好 吃 的 烤鸭 店 。? 此 时 ， 你 使 用 的 是 
以 这 个 路 人 为 原点 的 坐标 空间 。 想 象 一 下 ， 如 采 在 这 个 世界 上 我 们 只 
能 使 用 东南 西北 来 质 述 所 有 东西 的 话 ， 该 会 有 多 少 人 会 被 场 死 。 


由 此 可 见 ， 我 们 需要 在 不 同 的 情况 下 使 用 不 同 的 坐标 空间 ， 因 为 
一 些 概念 只 有 在 特定 的 坐标 空间 下 才 有 意义 ， 才 更 容易 理解 。 这 也 是 
为 什么 在 渔 染 中 我 们 要 使 用 这 么 多 坐标 空间 。 


在 开始 介绍 一 些 不 同 的 坐标 空间 之 前 ， 读 者 需要 注意 ， 所 有 的 坐 
标 空间 在 理论 上 都 是 平等 的 ， 没 有 谁 优 谁 劣 之 分 ， 不 会 因为 我 们 从 一 
个 坐标 空间 转换 到 另 一 个 坐标 空间 计算 就 出 错 了 。 但 是 ， 在 特定 的 情 
况 下 ， 一 些 坐 标 空间 的 确 比 另 一 些 坐 标 空间 更 加 吸引 人 。 


现在 ， 就 让 我 们 来 看 一 下 在 游戏 泻 染 流水 线 中 ， 一 个 顶点 到 故 经 
过 了 怎样 的 空间 变换 。 
4.6.2 ”坐标 空间 的 变换 


我 们 先 要 为 后 面 的 内 容 做 些 数学 铺垫 。 在 洽 染 流水 线 中 ， 我 们 往 
往 需 要 把 一 个 点 或 方向 矢量 从 一 个 坐标 空间 转换 到 男 一 个 坐标 空间 。 
这 个 过 程 到 压 是 怎么 实现 的 呢 ? 


我 们 把 问题 一 般 化 。 我 们 知道 ， 要 想 定义 一 个 坐标 空间 ， 必 须 指 
明 其 原点 位 置 和 3 个 坐标 轴 的 方向 。 而 这 些 数值 实际 上 是 相对 于 男 一 个 
坐标 空间 的 (读者 需要 记 住 ， i 。 也 就 是 说 ， 坐 标 
空间 会 形成 一 个 层次 结 空间 都 是 男 一 个 坐标 空间 的 子 
空间 ， 反 过 来 说 ， gem (parent) 坐标 空间 。 对 坐标 空 
间 的 变换 实际 上 就 古 在 父 空 间 和 子 空间 之 间 对 点 和 天 量 进行 变换 。 


假设 ， 现 在 有 父 坐 标 空间 P 以 及 一 个 子 坐 标 空间 C。 我 们 知道 在 父 
坐标 空间 中 子 坐 标 空间 的 原点 位 置 以 及 3 个 单位 坐标 轴 。 我 们 一 ee 
两 种 需求 : 一 种 需求 是 把 子 坐 标 空间 下 表示 的 点 或 矢量 A。 转 换 到 父 
标 空间 下 的 表示 A,， 男 一 个 需求 是 反 过 来 ， 即 把 父 坐 标 空 CC 
扩 或 天 量 B, 转 换 到 了 于 坐标 空间 下 的 表示 B。。 我 们 可 以 使 用 下 面 的 公式 
来 表示 这 两 种 需求 : 


A,=M, ,, A 


B.=M, ,. B, 


其 中 ，M ,表示 的 是 从 于 坐标 空间 变换 到 父 坐 标 空间 的 变换 算 
阵 ， 而 M， .是 其 逆 矩 阵 ( 即 反 向 变换 ) 。 那 么 ， 现 在 的 问题 就 是 ， 如 
何 求解 这 些 变换 矩阵 ? 事实 上 ， 我 们 只 需要 解 出 两 者 之 一 即 可 ， 另 一 
个 矩阵 可 以 通过 求 逆 和 窍 阵 的 方式 来 得 到 。 


下 面 ， 我 们 就 来 讲解 如 何 求 出 从 子 坐标 空间 到 父 坐 标 空间 的 变换 
矩阵 Me .，。 


首 匈 ， 我 们 来 回顾 一 个 看 似 很 简单 的 问题 : 当 给 定 一 个 坐标 空间 
以 及 其 中 一 点 (obo 时 ， 我 们 是 如 何 知道 该 点 的 位 置 的 呢 ? 我 们 可 以 通 
过 4 个 步骤 来 确定 它 的 位 置 : 


(1) 从 坐标 空间 的 原点 开始 
(2) 向 x 轴 方向 移动 aq 个 单位 ; 
(3) 向 y 轴 方向 移动 bp 个 单位 ; 
(4) 向 z 轴 方向 移动 c 个 单位 。 


需要 说 明 的 是 ， 上 面 的 步骤 只 是 我 们 的 想象 ， 这 个 点 实际 上 并 没 
有 发 生 移动 。 上 面 的 步 又 看 起 来 再 简单 不 过 了 ， 坐 标 空间 的 变换 就 强 
含 在 上 面 的 4 个 步骤 中 。 现 在 ， 我 们 已 知 子 坐 标 空 间 C 的 3 个 坐标 轴 在 父 
坐标 空间 P 下 的 表示 x、y、z， 以 及 其 原点 位 置 0.。 当 给 定 一 个 子 坐 


标 空 间 中 的 一 点 Ac = (六 cj， 我 们 同样 可 以 依照 上 面 4 个 步骤 来 确定 其 
在 父 坐 标 空间 下 的 位 置 Ap: 


1. 从 坐标 空间 的 原点 开始 
这 很 简单 ， 我 们 已 经 知道 了 子 坐 标 空间 的 原点 位 置 O0c。 
2. 向 x 轴 方 向 移动 a 个 单位 
仍然 很 简单 ， 因 为 我 们 已 经 知道 了 x 轴 的 天 量 表示 ， 因 此 可 以 得 到 


Oc + axe 
3. 向 y 轴 方向 移动 b 个 单位 
同样 的 道理 ， 这 一 步 就 是 : 
Oc + axc 二 jy。 
4. 疝 z 轴 方向 移动 c 个 单位 
最 后 ， 就 可 以 得 到 


Oc 十 axc + by 十 czc 


现在 ， 我 们 已 经 求 出 了 M 
一 下 最 后 得 到 的 式 子 : 


! 什么 ? 你 没 看 出 来 吗 ? 我 们 再 来 看 


6=>p 


Ap = Oc 十 axc + by + cze 


读者 可 能 会 癌 ， 这 个 式 了 里 根本 没有 甜 阵 啊 ! 其 实 我 们 只 要 稍稍 
使 用 一 点 “魔法 ”"， 和 矩阵 就 会 出 现在 上 面 的 式 子 中 : 


Ap 一 GO- 十 如 Xe 十 by. 十 CZe 
= {TO., YO., 20.) + a(Tz., Yre, re) + blTy, Yye, ye) + C(Ts, 2 ) 


Ty Th Tx a 
= (TO YO 20)+ | Yr Vy YY b 
A c 


: We ot 
= (To.,Yo., 20.) 十 2 b 
i C 


其 中 “符号 表示 是 按 列 展开 的 。 上 面 的 式 子 实际 上 束 古 使 用 了 我 
们 之 前 所 学 的 公开 而 已 。 但 这 个 最 后 的 表达 式 还 不 是 很 谭 腕 ， 因 为 还 
存在 加 法 表达 式 ， 即 平移 变换 。 我 们 已 经 知道 3x3 的 矩阵 无 法 表示 平移 
变换 ， 因 此 为 了 得 到 一 个 更 漂亮 的 结果 ， 我 们 把 上 面 的 式 子 扩展 到 齐 
次 坐标 空间 中 ， 得 


| | | 0 a 
Ap = (To., Yo., 20., 1) + 9 了 
0 0 0 1 1 
1 0 0 zo. | | | 0 a 
0 1 0 vo. Xe Ye Ze 0 b 
~ lo 0 1 zo | | | ol le 
0 0 0 1 0 0 0 1 1 
| | | zo] fe 
|x yy Zc yo b 
| | | #0.| |e 
0 0 0 1 1 


那么 现在 ， 你 看 到 M,, ,在 哪里 了 吧 ? 没 错 ， 


读者 : 这 个 看 起 来 太 神 奇 了 ! 怎么 就 变 着 变 着 束 出 现 了 矩阵 呢 ? 


我 们 :上面 只 是 运用 了 一 些 基础 的 矢量 和 和 矩阵 运算 ， 一 旦 当 你 真 
正 理解 了 这 些 运算 束 会 发 现 上 面 的 过 程 只 是 简单 地 推导 了 一 下 而 已 。 


一 旦 求 出 来 M。.。，M, .就 可 以 通过 求 逆 矩阵 的 方式 求 出 来 ， 因 为 


从 坐标 空间 C 变 换 到 坐标 空间 P 与 从 坐标 空间 P 变 换 到 坐标 空间 C 是 互 逆 
的 两 个 过 程 。 


可 以 看 出 来 ， 变 换 和 矩阵 Me "实际 上 可 以 通过 坐标 空间 C 在 坐标 至 
间 P 中 的 原点 和 坐标 轴 的 矢量 表示 来 构建 出 来 : 把 3 个 坐标 轴 依 次 放 入 
和 窍 阵 的 前 3 列 ， 把 原点 天 量 放 到 最 后 一 列 ， 再 用 0 和 1 填充 最 后 一 行 即 


可 。 


需要 注意 的 是 ， 这 里 我 们 并 没有 要 求 3 个 坐标 轴 xe、yc 和 ze 是 单位 
矢量 ， 事 实 上， 如 有 果 存 在 缩放 的 话 ， 这 3 个 天 量 值 很 可 能 不 是 单位 天 


三 


里 


更 加 令 人 振奋 的 是 ， 我 们 可 以 利用 反 向 思维 ， 从 这 个 变换 矩阵 反 
推 来 获取 子 坐标 空间 的 原点 和 坐标 轴 方 向! 例如 ， 当 我 们 已 知 从 模型 
空间 到 世界 空间 的 一 个 4x4 的 变换 和 矩阵， 可 以 提取 它 的 第 一 列 再 进行 归 
一 化 后 (为 了 消除 缩放 的 影响 来 得 到 模型 空间 的 x 轴 在 世界 空间 下 的 
单位 天 量 表 示 。 同 样 的 方法 可 以 提取 y 轴 和 z 轴 “。 我 们 可 以 从 另 一 个 角度 
来 理解 这 个 提取 过 程 。 因 为 矩阵 Me "可 以 把 一 个 方向 矢量 从 坐标 空间 


C 变 换 到 坐标 空间 P 中 ， 那 么 ， 我 们 只 需要 用 它 来 变换 坐标 空间 C 中 的 x 
轴 (1,0,0,0)， 即 使 用 和 窍 阵 乘法 Mj[1 0 0 0]， 得 到 的 结 来 正 是 
M6, 的 第 一 列 。 


男 一 个 有 趣 的 情况 是 ， 对 方 同 矢量 的 坐标 空间 变换 。 我 们 知道 ， 
矢量 是 没有 位 置 的 ， 因 此 坐标 空间 的 原点 变换 是 可 以 忽略 的 。 也 束 是 
说 ， 我 们 仅仅 平移 坐标 系 的 原点 是 不 会 对 天 量 造 成 任何 影响 的 。 那 
么 ， 对 天 量 的 坐标 至 间 变 换 融 可 以 使 用 3x3 的 窍 阵 来 表示 ， 因 为 我 们 不 
需要 表示 平移 变换 。 那 么 变换 矩阵 束 古 : 


ME 
M._,p = | Xec yc Zc 
| | | 


在 Shader 中 ， 我 们 利 币 会 看 到 和 规 取 变换 矩阵 的 前 3 行 前 3 列 来 对 法 线 
方 同 、 光 照 方向 来 进行 空间 变换 ， 这 正 是 原因 所 在 。 


现在 ， 我 们 再 来 关注 M,,。° 我 们 前 面 讲 到 ， 可 以 通过 求 M。 ,的 逆 
和 矩阵 的 方式 求解 出 来 反 向 变换 M,,。。 但 有 一 种 情况 我 们 不 需要 求解 逆 
答 阵 整 可 以 得 到 M,,。， 这 种 情况 束 是 M.,, 古 一 个 正 交 短 阵 。 如 来 它 古 
一 个 正 交 和 矩阵 的 话 ，M ,的 逆 和 矩阵 就 等 于 它 的 转 置 矩阵 。 这 意味 着 我 
们 不 需要 进行 复 洒 的 求 逆 操 作 束 可 以 得 到 反 疝 变换 。 也 就 是 说 ， 


而 现在 ， 我 们 不 仅 可 以 根据 变换 矩阵 Me .," 反 推 出 子 坐 标 空间 的 坐 
标 轴 方 向 在 父 坐 标 空间 中 的 表示 x。、yc 和 z。， 还 可 以 反 推 出 父 坐 标 空 间 
的 仅 标 轴 方 同 在 于 坐标 空间 中 的 表示 x,、yb 和 z,， 这 些 坐 标 轴 对 应 的 整 
和 证 Me ,的 每 一 行 ! 也 束 古 说 ， 如 琳 我 们 知道 坐标 空间 变换 矩阵 Mj ,Bs 
古 一 个 正 交 矩阵 ， 那 么 我 们 可 以 提取 它 的 第 一 列 来 得 到 坐标 空间 A 的 x 
轴 在 坐标 空间 B 下 的 表示 ， 还 可 以 提取 它 的 第 一 行 来 得 到 坐标 空间 B 的 x 
轴 在 坐标 空间 A 下 的 表示 。 反 过 来 ， 如 果 我 们 知道 坐标 空间 B 的 x 轴 、y 
轴 和 z 轴 必须 是 单位 天 量 ， 否 则 构建 出 来 的 就 不 是 正 交 矩阵 了 ) 在 坐 
标 空间 A 下 的 表示 ， 殊 可 以 把 它们 依次 放 在 矩阵 的 每 一 行 束 可 以 得 到 从 
A 到 B 的 变换 矩阵 了 。 


读者 :天 呐 ， 我 的 脑子 已 经 完全 乱 掉 了 ， 一 会 儿 从 P 到 C， 一 会 儿 
又 从 C 到 P， 一 会 儿 是 行 ， 一 会 儿 又 和 是 列 ， 我 目 己 写 的 时 候 一 定 会 搞 不 


清楚 | 


我 们 : 我 们 知道 这 个 过 程 很 容易 造成 思维 的 混乱 ， 因 此 才 要 人 花 寓 
大 量 的 篇 幅 来 解释 背后 的 数学 原理 。 只 有 知道 了 这 些 原 理 ， 遇 到 疑问 
时 你 才 知 道 怎 样 去 验证 结果 的 正确 性 。 例 如 像 下 面 这 样 。 


当 你 不 知道 把 坐标 轴 的 表示 是 按 行 放 还 是 按 列 放 的 时 候 ， 不 妨 先 
选择 一 种 撑 放 方式 来 得 到 变换 和 矩阵。 例如 ， 现 在 我 们 想 把 一 个 和 天 量 从 
坐标 空间 A 变换 到 坐标 空间 B， 而 且 我 们 已 经 知道 坐标 空间 B 的 x 轴 、y 
轴 、z 轴 在 空间 A 下 的 表示 ， 即 xp、yp 和 和 zp。 那么 想 要 得 到 从 A 到 B 的 变 
换 和 矩阵 MA4 ,sp， 我 们 是 把 它们 按 列 放 呢 还 是 按 行 放 呢 ?如 果 读 者 实在 想 
不 起 来 正确 答案 ， 我 们 不 妨 移 随便 选择 一 种 方式 ， 例 如 按 列 摆 放 。 那 
A， 


， 注 意 ， 这 个 矩阵 是 不 对 的 
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现在 ， 我 们 可 以 非常 快速 地 来 验证 它 是 否 是 正确 的 。 方 法 就 是 ， 
用 MA .8 来 变换 xp。 在 计算 前 我 们 移 想 一 下 这 个 结 末 ， 如 采 我 们 用 变换 
和 窍 阵 来 变换 B 的 x 轴 的 话 ， 那 么 结果 应 该 是 (10,0) 才 对 。 因 为 当 变换 到 择 
间 B 中 时 ，x 轴 的 指 回 束 是 (1.0,0)。 好 了 ， 我 们 可 以 来 进行 真正 的 计算 来 
验证 它 了 : 


读者 看 到 这 里 会 有 疑问 ,“ 我 不 知道 这 个 结果 是 什么 啊 ”。 没 错 ， 
这 不 是 你 的 计算 有 问题 ， 而 是 上 式 的 计算 结 末 的 确 不 可 知 。 这 种 时 候 
你 束 会 发 现 我 们 的 摆 放 方式 选择 错 了 。 现 在 ， 我 们 使 用 正确 的 摆 放 方 
式 ， 即 按 行 来 摆 放 ， 那 么 下 有 : 


— ys 一 | zZB= |ys-xB| = |0 
= ZB XB 0 


这 次 结 有 末 束 和 我 们 预期 的 一 样 了 。 


Ma_,BXB = 


理解 上 面 的 原理 和 过 程 非 党 重要 。 我 们 在 本 书 的 后 面 也 会 经 芝 直 
到 坐标 空间 的 变换 。 


4.6.3 ”顶点 的 坐标 空间 变换 过 程 


我 们 知道 ， 在 渔 染 流水 线 中 ， 一 个 顶点 要 经 过 多 个 坐标 空间 的 变 
换 才能 最 终 被 画 在 屏幕 上 。 一 个 顶点 最 开始 是 在 模型 空间 ( 见 4.6.4 
忆 ) 中 定义 的 ， 最 后 它 将 会 变换 到 屏幕 空间 〈《 见 4.6.8 节 ) 中 ， 得 到 真 
正 的 屏幕 像素 坐标 。 因 此 ， 接 下 来 的 内 容 我 们 将 解释 顶点 要 进行 的 各 
种 空间 变换 的 过 程 。 


为 了 帮助 读者 理解 这 个 过 程 ， 我 们 将 建立 在 农场 游戏 的 实例 背景 
下 ， 每 讲 到 一 种 空间 变换 ， 我 们 会 解释 如 何 应 用 到 这 个 案例 中 。 


在 我 们 的 农场 游戏 中 ， 妞 妞 很 好 奇 自己 是 如 何 被 泻 染 到 屏幕 上 
的 。 它 只 知道 自己 和 一 群 小 伙伴 在 农场 里 快乐 地 吃 草 ， 而 前 面 有 一 个 
摄像 机 一 直 在 观察 它们 ， 如 图 4.31 所 示 。 妞 妞 特别 喜欢 自己 的 明子 ， 它 
想 知道 描 子 是 怎么 被 画 到 屏幕 上 的 ? 


a 


2 1 4 (| 2 
场景 中 妞妞 的 鼻子 外 下 屏 古 上 旭 妇 的 鼻 了 


H 屏 幕 上 的 妞妞 〈 右 图 ) 。 妞 妞 想 知道 ， 自 己 的 鼻子 是 如 们 
被 画 到 屏幕 上 的 


A 图 4.31 场景 中 的 妞妞 ( 左 图 


在 下 面 的 内 容 中 ， 我 们 将 了 解 妞妞 的 鼻子 是 如 何 一 步 步 画 到 屏幕 
Es 


4.6.4 ”模型 空间 


模型 空间 (model space) ， 如 它 的 名 字 所 暗示 的 那样 ， 是 和 某 个 
模型 或 者 说 是 对 象 有 关 的 。 有 时 模型 空间 也 被 称 为 对 象 空 间 (object 
space) 或 局 部 空间 (local space) 。 每 个 模型 都 有 自己 独立 的 坐标 空 
间 ， 当 它 移 动 或 旋转 的 时 候 ， 模 型 空间 也 会 跟着 它 移动 和 旋转 。 把 我 
们 上 自己 当成 游戏 中 的 模型 的 话 ， 当 我 们 在 办 公 室 里 移动 时 ， 我 们 的 模 
型 空间 也 在 跟 痢 移动 ， 当 我 们 转 号 时 ， 我 们 本 吴 的 前 后 左右 方向 也 在 
跟着 改变 。 


在 模型 空间 中 ， 我 们 经 常 使 用 一 些 方向 概念 ， 例 如 “前 
(forward) ”后 (back) ”“ 左 (eft) ”\“ 右 (right) *、“ 上 
(up) ”、“ 下 (down) ”。 在 本 书 中 ， 我 们 把 这 些 方 向 称 为 自然 方向 。 
模型 空间 中 的 坐标 轴 通 常会 使 用 这 些 目 然 方 向 。 在 4.2.4 节 中 我 们 讲 
由 


AY 


过 ，Unity 在 模型 空间 中 使 用 的 是 左手 坐标 系 ， 因 此 在 模型 空间 中 ，+x 
轴 、+y 轴 、+z 轴 分 别 对 应 的 是 模型 的 右 、 上 和 前 向 。 需 要 注意 的 是 ， 
模型 坐标 空间 中 的 x 轴 、y 轴 、z 轴 和 自然 方向 的 对 应 不 一 定 是 上 述 这 种 
关系 ， 但 由 于 Unity 使 用 的 是 这 样 的 约定 ， 因 此 本 书 将 使 用 这 种 方式 。 
我 们 可 以 在 Hierarchy 视 图 中 单 击 任意 对 象 就 可 以 看 见 它 们 对 应 的 模型 
空间 的 3 个 坐标 轴 。 


模型 空间 的 原点 和 坐标 轴 通 常 是 由 美术 人 员 在 建 模 软件 里 确定 好 
的 。 当 导入 到 Unity 中 后 ， 我 们 可 以 在 顶 扣 着色 右 中 访问 a 到 模型 的 顶点 
信息 ， 其 中 包 侣 了 每 个 顶点 的 坐标 。 这 些 坐标 都 是 相对 于 模型 至 间 中 
的 原点 (通常 位 于 模型 的 重心 ) 定义 的 。 


当 我 们 把 妞妞 放 到 场景 中 时 ， 就 会 有 一 个 模型 坐标 空间 时 刻 跟 随 
着 它 。 妞 妞 鼻子 的 位 置 可 以 通过 访问 顶点 属性 来 得 到 。 假 设 这 个 位 置 
是 (0, 2, 4)， 由 于 顶点 变换 中 往往 包含 了 平移 变换 ， 因 此 需要 把 其 扩展 
到 齐 次 坐标 系 下 ， 得 到 顶点 坐标 是 (0, 2, 4, 1)， 如 图 4.32 所 示 。 


+Z (前 ) 


图 4.32 ”在 我 们 的 农场 游戏 中 ， 每 个 奶牛 都 有 自己 的 模型 坐标 系 。 在 模型 坐标 系 中 妞妞 鼻子 
的 位 置 是 (0, 2, 4, 1) 


> 


4.6.5 ”世界 空间 


世界 空间 (world space) 是 一 个 特殊 的 坐标 系 ， 因 为 它 建 立 了 我 
们 所 关心 的 最 大 的 空间 。 一 些 读 者 可 能 会 指出 ， 空 间 可 以 是 无 限 大 


的 ， 怎 么 会 有 “最 大 "这 一 说 呢 ? 这 里 说 的 最 大 指 的 是 一 个 宏观 的 概 
念 ， 也 殊 是 说 它 是 我 们 所 关心 的 最 外 层 的 坐标 空间 。 以 我 们 的 农场 游 
戏 为 例 ， 在 这 个 游戏 里 世界 空间 指 的 束 是 农场 ， 我 们 不 关心 这 个 农场 
是 在 什么 地 方 ， 在 这 个 虚拟 的 游戏 世界 里 ， 农 场 就 是 最 大 的 空间 概 


全。 


人 
yp 
/LAY 


世界 空间 可 以 被 用 于 描述 绝对 位 置 (较真 的 读者 可 能 会 再 一 次 提 
桓 我 ， 没 有 绝对 的 位 置 。 没 错 ， 但 我 相信 读者 可 以 明日 这 里 绝对 的 意 
思 ) 。 在 本 书 中 ， 绝 对 位 置 指 的 就 是 在 世界 坐标 系 中 的 位 置 。 通 常 ， 
我 们 会 把 世界 空间 的 原点 放置 在 游戏 至 间 的 中 心 。 


在 Unity 中 ， 世 弄 空间 同样 使 用 了 左手 坐标 系 。 但 它 的 x 轴 、y 轴 、z 
轴 是 固定 不 变 的 。 在 Unity 中 ， 我 们 可 以 通过 调整 Transform 组 件 中 的 
Position 属 性 来 改变 模型 的 位 置 ， 这 里 的 位 置 指 的 是 相对 于 这 个 
Transform 的 父 节点 (parent) 的 模型 坐标 空间 中 的 原点 定义 的 。 如 果 
一 个 Transform 没 有 任何 父 方 点， 那么 这 个 位 置 束 是 在 世界 坐标 系 中 的 
位 置 ， 如 图 4.33 所 示 。 我 们 可 以 想象 成 还 有 一 个 虚拟 的 根 模型 ， 这 个 根 
模型 的 模型 空间 就 是 世界 空间 ， 所 有 的 游戏 对 象 都 附属 于 这 个 根 模 
型 。 同 样 ，Transform 中 的 Rotation 和 Scale 也 是 同样 的 道理 。 


顶点 变换 的 第 一 步 ， 就 是 将 顶点 坐标 从 模型 空间 变换 到 世界 空间 
中 。 这 个 变换 通常 叫做 模型 变换 (model transform) 。 


现在 ， 我 们 来 对 妞妞 的 蜡 子 进行 模型 变换 。 为 此 ， 我 们 首 移 需 要 
知道 妞妞 在 世界 坐标 系 中 进行 了 哪些 变换 ， 这 可 以 通过 面板 中 的 
Transform 组 件 来 得 到 相关 的 变换 信息 ， 如 图 4.34 所 示 。 


Xx[-1.71 ]Yi0 Zz1055 
Rotation X[0 Y[I5035]z10 | 
Scale 。 xTI Wi |2| | 


A 图 4.33 Unity 的 Transform 组 件 可 以 调 世 模型 的 位 置 。 如 果 Transform 有 父 世 点 ， 如 图 中 
的 “Mesh”， 那 么 Position 将 是 在 其 父 节 点 (这 里 是 “Cow”) 的 模型 空间 中 的 位 置 ， 如果 没 有 父 
方 点 ，Position 束 是 在 世界 空间 中 的 位 置 


图 4.34 ”农场 游戏 中 的 世界 空间 。 世 界 空 间 的 原点 被 放置 在 农场 的 中 心 。 左 下 角 显 示 了 妞妞 
在 世界 空间 中 所 做 的 变换 。 我 们 想 要 把 妞妞 的 鼻子 从 模型 空间 变换 到 世界 空间 中 
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根据 Transform 组 件 上 的 信息 ， 我 们 知道 在 世界 空间 中 ， 妞 妞 进行 
了 (2, 2, 2) 的 缩放 ， 又 进行 了 (0, 150, 0) 的 旋转 以 及 (5, 0, 25) 的 平移 。 注 


意 这 里 的 变换 顺序 是 不 能 互 换 的 ， 即 先进 行 缩放 ， 再 进行 旋转 ， 最 后 
征 平 移 。 据 此 我 们 可 以 构建 出 模型 变换 的 变换 矩阵 : 


1 0 0 二 cosg 0 sing 0 ji 0 0 0 
M  _|010 多 0 1 0 0 0 00 
ER 0 0 1 上 —sing 0 cosg 0| |0 0 fk 0 
00 0 1 0 0 0 1 0 0 01 
100 5 -0.866 0 05 0| [2000 
010 0 0 1 0 0 0200 
~ lo 0 1 25 -0.5 0 -0.866 0 0020 
000 1 0 0 0 1 0001 
-1.732 0 1 5 
0 2 0 0 
dl 0 I. 0 
0 0 0 1 


现在 我 们 可 以 用 它 来 对 妞妞 的 田子 进行 模型 变换 了 : 
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也 就 是 说 ， 在 世界 空间 下 ， 妞 妞 盟 子 的 位 置 是 (9, 4, 18.072)。 注 
意 ， 这 里 的 浮 点 数 都 是 近似 值 ， 这 里 近似 到 小 数 点 后 3 位 。 实 际 数值 和 
Unity 采 用 的 浮 点 值 精度 有 关 。 


4.6.6 ”观察 空间 


观察 空间 (view space) 也 被 称 为 摄像 机 空间 (camera space) 。 
观察 空间 可 以 认为 是 模型 空间 的 一 个 特例 一 一 在 所 有 的 模型 中 有 一 个 
非常 特殊 的 模型 ， 即 摄像 机 (虽然 通常 来 说 摄像 机 本 身 是 不 可 见 
的 ) ， 它 的 模型 空间 值得 我 们 单独 拿 出 来 讨论 ， 也 就 是 观察 空间 。 


摄像 机 决定 了 我 们 泻 染 游戏 所 使 用 的 视角 。 在 观察 空间 中 ， 摄 像 
机 位 于 原点 ， 同 样 ， 其 坐标 轴 的 选择 可 以 是 任意 的 ， 但 由 于 本 书 讨论 
的 是 以 Unity 为 主 ， 而 Unity 中 观 绎 空间 的 坐标 轴 选 择 是 ，+x 轴 指 同 右 
方 ，+y 轴 指 癌 上 方 ， 而 +z 轴 指 同 的 是 摄像 机 的 后 方 。 读 者 在 这 里 可 能 
觉得 很 奇怪 ， 我 们 之 前 讨论 的 模型 空间 和 世界 空间 中 +z 轴 指 的 都 是 物 
体 的 前 方 ， 为 什么 这 里 不 一 样 了 呢 ? 这 是 因为 ，Unity 在 模型 空间 和 世 
前 空间 中 选用 的 都 是 左手 坐标 系 ， 而 在 观察 空间 中 使 用 的 是 右手 坐标 
系 。 这 是 符合 OpenGL 传 统 的 ， 在 这 样 的 观察 空间 中 ， 摄 像 机 的 正 前 方 
指向 的 是 -z 轴 方向 。 


这 种 左右 手 坐 标 系 之 间 的 改变 很 少 会 对 我 们 在 Unity 中 的 编程 产生 
影响 ， 因 为 Unity 为 我 们 做 了 很 多 渔 染 的 辰 层 工作 ， 包 括 很 多 坐标 空间 
的 转换 。 但 是 ， 如 有 果 读 者 需要 调用 类 似 Camera.cameraToWorldMatrix 、 
Camera.worldTIoCameraMtatrix 等 接口 目 行 计算 某 模 型 在 观察 至 间 中 的 位 
置 ， 就 要 小 心 这 样 的 差异 。 


最 后 要 提醒 读者 的 一 点 是 ， 观 察 空间 和 屏幕 空间 ( 详 见 4.6.8 节 ) 
是 不 同 的 。 观 察 空 间 是 一 个 三 维 空间 ， 而 屏幕 空间 是 一 个 二 维 空间 。 
从 观察 空间 到 屏幕 空间 的 转换 需要 经 过 一 个 操作 ， 那 就 是 投影 
(projection) 。 我 们 后 面 就 会 讲 到 。 


a 


顶点 变换 的 第 二 步 ， 束 是 将 顶点 坐标 从 世界 空间 变换 到 观察 空间 
中 。 这 个 变换 通常 叫做 观察 变换 (view transform) 


回 到 我 们 的 农场 游戏 。 现 在 我 们 需要 把 妞妞 的 鼻子 从 世界 空间 变 
ee 。 为 此 ， 我 们 需要 知道 世界 坐标 系 下 摄像 机 的 变换 信 
这 同样 可 以 通过 摄像 机 面板 中 的 Transform 组 件 得 到 ， 如 图 4.35 所 

示 o 


(9, 4, 18.072, D3 
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Transform 
Position Xi0 IY 10 [| 
Rotation Xi30 |Yl0 
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A 图 4.35 ”农场 游戏 中 摄像 机 的 观察 空间 。 观 察 空间 的 原点 位 于 摄像 机 处 。 注 时 在 观察 空 
中 ， 摄 像 机 的 前 向 是 z 轴 的 负 方 向 (图 中 只 画 出 了 z 轴 正方 向 ' ， 这 是 因为 Unity 在 观察 空 
用 了 右手 坐标 系 。 左 下 角 显 示 了 摄像 机 在 世界 空间 中 所 做 的 变换 。 我 们 想 要 把 妞妞 的 民 子 从 | 
界 空 间 变换 到 观察 空间 中 


为 了 得 到 顶点 在 观察 空间 中 的 位 置 ， 我 们 可 以 有 两 种 方法 。 一 种 
方法 是 计算 观察 空间 的 三 个 坐标 轴 在 世界 空间 下 的 表示 ， 然 后 根据 
4.6.2 节 中 讲 到 的 方法 ， 构 建 出 从 观察 空间 变换 到 世界 空间 的 变换 矩 
阵 ， 再 对 该 矩阵 求 寺 来 得 到 从 世界 至 间 变 换 到 观察 空间 的 变换 矩阵 。 
我 们 还 可 以 使 用 男 一 种 方法 ， 即 想象 平移 整个 观察 空间 ， 让 摄像 机 原 
点 位 于 世界 坐标 的 原点 ， 坐 标 轴 与 世界 至 间 中 的 坐标 轴 重 合 即 可 。 这 
两 种 方法 得 到 的 变换 矩 孟 都 是 一 样 的 ， 不 同 的 只 是 我 们 思考 的 方式 。 


这 里 我 们 使 用 第 二 种 方法 。 由 Transform 组 件 可 以 知道 ， 摄 像 机 在 
世界 空间 中 的 变换 是 先 按 (30, 0, 0) 进 行 旋转 ， 然 后 按 (0, 10, -10) 进 行 了 
平移 。 那 么 ， 为 了 把 摄像 机 重新 移 回 到 初始 状态 (这 里 指 摄 像 机 原点 
位 于 世界 坐标 的 原点 、 坐 标 轴 与 世界 空间 中 的 坐标 轴 重 合 ) ， 我 们 需 
要 进行 逆 同 变换 ， 即 先 按 (0, -10, 10) 平 移 ， 以 便 将 摄像 机 移 回 到 原点 ， 
再 按 (-30, 0, 0) 进 行 旋 转 ， 以 便 让 坐标 轴 重 合 。 因 此 ， 变 换 和 矩阵 就 是 : 
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但 是 ， 由 于 观察 空间 使 用 的 是 右手 坐标 系 ， 因 此 需要 对 z 分 量 进行 
取 反 操作 。 我 们 可 以 通过 乘 以 男 一 个 特殊 的 矩阵 来 得 到 最 终 的 观察 变 
换 矩 阵 : 
ML =Megare zMyiew 
1 0 0 0 1 0 0 0 


0 1 0 0 0 0.866 0.5 —3.66 
0 0 —1 0 0 一 0.5 0.866 13.66 


00 0 1 0 0 0 1 
1 0 0 0 
0 0.866 0.5 一 3.66 
|o 0.5 —0.866 一 13.66 
0 0 0 1 


现在 我 们 可 以 用 它 来 对 妞妞 的 里 子 进行 顶点 变换 了 : 


bevy —M sg Bd 
1 0 0 0 9 9 
0 0.866 0.5 —3.66 4 8.84 
0 0.5 —0.866 一 13.66 18.072| |—27.31 
0 0 0 1 1 1 


这 样 ， 我 们 就 得 到 了 观察 空间 中 妞妞 鼻子 的 位 置 一 一 (9， 
8.84,-27.31) 。 
4.6.7 “裁剪 空间 


顶点 接 下 来 要 从 观察 空间 转换 到 裁剪 空间 (dlip space， 也 被 称 为 
齐 次 裁剪 空间 ) 中 ， 这 个 用 于 变换 的 矩阵 叫做 裁剪 矩阵 (clip 
matrix) ， 也 被 称 为 投影 矩阵 (projection matrix) 。 


裁 又 空间 的 目标 是 能 够 方便 地 对 泻 染 图 元 进行 裁 允 :完全 位 于 这 
块 空 间 内 部 的 图 元 将 会 被 保留 ， 完 全 位 于 这 块 空 间 外 部 的 图 元 将 会 被 
别 除 ， 而 与 这 块 空 间 边界 相交 的 图 元 束 会 被 裁 于 。 那 么 ， 这 块 空间 是 
如 何 决定 的 呢 ? 答案 是 由 视 锥 体 (view frustum) 来 决定 。 


视 锥 体 指 的 是 空间 中 的 一 块 区 域 ， 这 块 区 域 决 定 了 摄像 机 可 以 看 
到 的 空间 。 视 锥 体 由 六 个 平面 包围 而 成 ， 这 些 平 面世 被 称 为 裁剪 平面 
(dlip planes) 。 视 锥 体 有 两 种 类 型 ， 这 涉及 两 种 投影 类 型 ， 一 种 是 正 
交 投 影 (orthographic projection) ， 一 种 是 透视 投影 (perspective 
projection) 。 图 4.36 显 示 了 从 同一 位 置 、 同 一 角度 泻 染 同一 个 场景 的 
两 种 摄像 机 的 浑 染 结果 。 
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和 图 4.36 ”透视 投影 ( 左 图 ) 和 正 交 投影 ( 右 图 ) 。 左 下 角 分 别 显示 了 当前 摄像 机 的 投影 模式 
和 相关 属性 


从 图 中 可 以 发 现 ， 在 透视 投影 中 ， 地 板 上 的 平行 线 并 不 会 保持 平 
行 ， 离 摄像 机 越 近 网 格 越 大 ， 离 摄像 机 越 远 网 格 越 小 。 而 在 正 交 投影 
中 ， 所 有 的 网 格 大 小 都 一 样 ， 而 且 平 行 线 会 一 直 保 持平 行 。 可 以 注意 
到 ， 透 视 投 影 模拟 了 人 眼看 世界 的 方式 ， 而 正 交 投影 则 完全 保留 了 物 


体 的 距离 和 角度 。 因 此 ， 在 追求 真实 感 的 3D 游 戏 中 我 们 往往 会 使 用 透 
视 投 影 ， 而 在 一 些 2D 游 戏 或 演 染 小 地 图 等 其 他 HUD 元 素 时 ， 我 们 会 使 
用 正 交 投影 。 

在 视 锥 体 的 6 块 裁剪 平面 中 ， 有 两 块 裁剪 平面 比较 特殊 ， 它 们 分 别 


被 称 为 近 剪 裁 平面 near clip plane) 和 远 剪裁 平面 (far clip 
plane) 。 它 们 决定 了 摄像 机 可 以 看 到 的 深度 范围 。 正 交 投 影 和 透视 投 


影 的 视 锥 体 如 图 4.37 所 示 。 


图 4.37 ” 视 锥 体 和 裁剪 平面 。 左 图 显示 了 透视 投影 的 视 锥 体 ， 厂 图 显示 了 正 交 投影 的 视 锥 体 


由 图 4.37 可 以 看 出 ， 透 视 投影 的 视 锥 体 是 一 个 金字 塔 形 ， 侧 面 的 4 
个 裁剪 平面 将 会 在 摄像 机 处 相交 。 它 更 符合 视 锥 体 这 个 词语 。 正 交 投 
影 的 视 锥 体 是 一 个 长 方 体 。 前 面 讲 到 ， 我 们 希望 根据 视 锥 体 围 成 的 区 
图 元 进行 裁 草 ， 但 是 ， 如 果 直 接 使 用 祝 锥 体 定义 的 空间 来 进行 裁 

， 那 么 不 辣 的 视 维 体 就 需要 不 同 的 处 理 过 程 ， 而 且 对 于 透视 投影 的 
ii 想 要 判断 一 个 顶点 是 否 处 于 一 个 金字 塔 内 部 是 比较 厅 烦 
的 。 因 此 ， 我 们 想 用 一 种 更 加 通用 、 方便 和 整洁 的 方式 来 进行 裁 盘 的 


p> 


工作 ， 这 种 方式 吏 生 通过 一 个 投影 矩阵 把 顶点 转换 到 一 个 裁 级 空间 


投影 矩阵 有 两 个 目的 : 


首先 是 为 投影 做 准备 。 这 是 个 迷惑 点 ， 虽 然 投 影 矩 阵 的 名 称 包含 
了 投影 二 字 ， 但 是 它 并 没有 进行 真正 的 投影 工作 ， 而 是 在 为 投影 
做 准备 。 真 正 的 投影 发 生 在 后 面 的 齐 次 除法 (homogeneous 
division) 过 程 中 。 而 经 过 投影 矩阵 的 变换 后 ， 顶 点 的 w 分 量 将 会 
具有 特殊 的 意义 。 


读者 投影 到 的 是 什么 意思 呢 ? 


我 们 : 可 以 理解 成 是 一 个 空间 的 降 维 ， 例 如 从 四 维 空 间 投影 到 三 
维 空间 中 。 而 投影 矩阵 实际 上 并 不 会 真 的 进行 这 个 步 又， 它 会 为 真正 
的 投影 做 准备 工作 。 真 正 的 投影 会 在 屏幕 映射 时 发 生 ， 通 过 齐 次 除法 
来 得 到 二 维 坐 标 。 具 体会 在 4.6.8 广 中 讲 到 。 


。 其 次 古 对 x、y、z 分 量 进行 缩放 。 我 们 上 面 讲 过 直接 使 用 视 锥 体 的 6 
个 裁 可 平 面 来 进行 裁 闻 会 比较 矿 烦 。 而 经 过 投影 矩阵 的 缩放 后 ， 
我 们 可 以 直接 使 用 w 分 量 作为 一 个 范围 值 ， 如 采 x、y、2 分 量 都 位 
于 这 个 范围 内 ， 就 说 明 该 顶点 位 于 裁剪 空间 内 。 


在 裁 筋 至 间 之 前 ， 虽 然 我 们 使 用 了 齐 次 坐标 来 表示 点 和 天 量 ， 但 
它们 的 第 四 个 分 量 都 是 固定 的 : 点 的 w 分 量 是 1， 方 癌 天 量 的 w 分 量 十 
0。 经 过 投影 矩阵 的 变换 后 ， 我 们 束 会 赋予 章 次 坐标 的 第 4 个 坐标 更 加 
丰 训 的 合 义 。 下 面 ， 我 们 来 看 一 下 两 种 投影 类 型 使 用 的 投影 矩阵 具体 
汪汪 


1. 透视 投影 


视 锥 体 的 意义 在 于 定义 了 场景 中 的 一 块 三 维 空间 。 所 有 位 于 这 块 
空间 内 的 物体 将 会 被 泻 染 ， 否 则 就 会 被 别 除 或 入 剪 。 我 们 已 经 知道 ， 
这 块 区 域 由 6 个 裁 瘟 平面 定义 ， 那 么 这 6 个 裁 术 平面 义 是 怎么 决定 的 
呢 ? 在 Unity 中 ， 它 们 由 Camera 组 件 中 的 参数 和 Game 视 图 的 横 纵 比 共同 
决定 ， 如 图 4.38 所 示 。 
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图 4.38 ”透视 摄像 机 的 参数 对 透视 投影 视 锥 体 的 影响 


也 


由 图 4.38 可 以 看 出 ， 我 们 可 以 通过 Camera 组 件 的 Field of View ( 简 
称 FOV) 属性 来 改变 视 锥 体 竖 直 方向 的 张 开 角 度 ， 而 Clipping Planes 中 
的 Near 和 Far 参 数 可 以 控制 视 锥 体 的 近 裁 前 平面 和 远 入 前 平面 距离 摄像 
机 的 远近 。 这 样 ， 我 们 可 以 求 出 视 锥 体 近 裁剪 平面 和 远 裁剪 平面 的 高 
度 ， 也 就 是 : 


FOV 


nearClipPlaneHeight = 2: Near tan 


2) 


一 


现在 我 们 还 缺乏 横向 的 信息 。 这 可 以 通过 摄像 机 的 横 纵 比 得 到 。 
在 Unity 中 ， 一 个 摄像 机 的 横 纵 比 由 Game 视 图 的 模 纵 比 和 Viewport Rect 
中 的 W 和 HH 属性 共同 决定 〈 实 际 上 ，Unity 人 允许 我 们 在 脚本 里 通过 
Camera.aspect 进 行 更 改 ， 但 这 里 不 做 讨论 ) 。 假 设 ， 当 前 摄像 机 的 横 纵 
比 为 Aspect， 我 们 定义 : 


nearClipPlaneW idth 


Aspect 二 一 一 
nearClipPlaneHeight 


farClipPlaneW idth 
了 SP (1 三 一 一 
farClipPlaneHeight 


现在 ， 我 们 可 以 根据 已 知 的 Near、Far、FOV 和 Aspect 的 值 来 确定 
透视 投影 的 投影 矩阵 。 如 下 : 


0 0 0 
FOV 


0 ‘Ot 一 0 U 

NM frustum = [ 7 [ 2 Fari+Near 2.Near-Far 
) ) ~ Far-Near ~ Far—Near 
0 0 一 1 0 


上 面 公式 的 推导 部 分 可 以 参见 本 章 的 扩展 阅读 部 分 。 需 要 注意 的 
是 ， 这 里 的 投影 矩阵 是 建立 在 Unity 对 坐标 系 的 假定 上 面 的 ， 也 就 是 
说 ， 我 们 针对 的 是 观察 空间 为 右手 坐标 系 ， 使 用 列 矩 阵 在 矩阵 右 侧 进 
行 相 乘 ， 且 变换 后 z 分 量 范 围 将 在 [-w w] 之 间 的 情况 。 而 在 类 似 DirectX 
这 样 的 图 形 接口 中 ， 写 们 斋 望 变换 后 z 分 量 范 围 将 在 [0, w] 之 间 ， 因 此 束 
需要 对 上 面 的 透视 矩阵 进行 一 些 更 改 。 这 不 在 本 书 的 讨论 范围 内 。 


而 一 个 顶点 和 上 述 投影 矩阵 相 乘 后 ， 可 以 由 观察 空间 变换 到 裁剪 
空间 中 ， 结 果 如 下 : 


Pwip =MIrustumPview 
"ot FoV . : 
1 0 0 I 
.SPect FoV 
0 cot 一 0 0 y 
上 下 0 0 下 _ FartNear —2:Near.Far 2 
: Far—Near Far—Near 
0 0 -1 0 1 
.Cot 
1 pact 
y cot 二 
~ |_ ,FartNear 2.Near:Far 
~ Far—Near Far—Near 


从 结 末 可 以 看 出 ， 这 个 投影 窒 阵 本 质 束 是 对 x、y 和 和 z 分 量 进行 了 不 
同 程度 的 缩放 (当然 ，z 分 量 还 做 了 一 个 平移 ) ， 缩 放 的 目的 是 为 了 方 
便 裁 瘤 。 我 们 可 以 注意 到 ， 此 时 顶点 的 w 分 量 不 再 是 1， 而 十 原 先 z 分 量 


的 取 反 结果 。 现 在 ,我 们 就 可 以 按 如 下 不 等 式 来 判断 一 个 变换 后 的 顶点 
是 否 位 于 视 锥 体内 。 如 果 一 个 顶点 在 视 锥 体内 ， 那 么 它 变换 后 的 坐标 
必须 满足 : 


—wW<x<w 
—w<y<w 


—w<z<w 


任何 不 满足 上 述 条 件 的 图 元 都 需要 被 别 除 或 者 裁 芍 。 图 4.39 显 示 了 
经 过 上 述 投影 矩阵 后 ， 视 锥 体 的 变化 。 


~ x = farClipPlaneWidth / 2 


x = -farClipPlaneWidth /2 y= farClipPtaneHeight / 2 


y= -farClipPlaneHeight / z= -Far 
z= -Far w=1 
wa=l1 
坊 筋 矩阵 
x = nearClipPlaneWidth /2 
y= -nearClipPlaneHeight /2 
z= -Near 
w=1 
X=-Near 
X = nearClipPlaneWidth /2 二 ta 
y= nearClipPlaneHeight / 2 W = Near 六 


z= -Near 
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图 4.39 ”在 透视 投影 中 ， 投 影 和 矩阵 对 顶点 进行 了 缩放 。 图 中 标注 了 4 个 关键 点 经 过 投影 矩阵 
变换 后 的 结果 。 从 这 些 结果 可 以 看 出 x、y、z 和 w 分 量 的 范围 发 生 的 变化 


从 图 4.39 还 可 以 注意 到 ， 裁 草 矩 阵 会 改变 空间 的 旋回 性 : 空间 从 碳 
手 坐 标 系 变 换 到 了 左手 坐标 系 。 这 意味 着 ， 离 摄像 机 越 远 ，z 值 将 越 
大 。 


2. 正 交 投影 


首先 ， 我 们 还 是 看 一 下 正 交 投影 中 的 6 个 裁剪 平面 是 如 何 定 义 的 。 
和 透视 投影 类 似 ， 在 Unity 中 ， 它 们 也 是 由 Camera 组 件 中 的 参数 和 Game 
视图 的 横 纵 比 共 同 决 是 ， 如 图 4.40 所 示 。 
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4 图 4.40” 正 交 摄像 机 的 参数 对 正 交 投影 视 锥 体 的 影响 


正 交 投影 的 视 锥 体 是 一 个 长 方 体 ， 因 此 计算 上 相 比 透视 投影 来 说 
更 加 人 简单。 由 图 可 以 看 出 ， 我 们 可 以 通过 Camera 组 件 的 Size 属 性 来 改变 
视 锥 体 竖 直方 向 上 高 度 的 一 半 ， 而 Clipping Planes 中 的 Near 和 Far 参 数 可 


以 控制 视 锥 体 的 近 裁 藤 平 面 和 远 裁 藤 平 面 距离 摄像 机 的 远近 。 这 样 ， 
我 们 可 以 求 出 视 锥 体 近 裁 况 平面 和 远 裁 艾 平面 的 蜗 度 ， 也 避 ® 是 : 


nearClipPlaneHeight = 2: Size 
farClipPlaneHeight = nearClipPlaneHeight 


现在 我 们 还 缺乏 横 辐 的 信息 。 同样， 我 们 可 以 通过 摄像 机 的 横 纵 
比 得 到 。 假 设 ， 当 前 摄像 机 的 横 纵 比 为 Aspect， 那 么 : 


nearClipPlaneWidth = Aspectnear ClipPlaneHeight 
farClipPlaneWidth = nearClipPlaneW idth 


现在 ， 我 们 可 以 根据 已 知 的 Near、Far、Size 和 Aspect 的 值 来 确定 正 
交 投 影 的 裁 檀 和 矩阵。 如 下 : 


Aspect.S? 0 0 

0 一 一 0 0 
Mortno 0 i Se 2 _ Fari+Near 
Far—Near Far—Near 

0 0 0 1 


上 面 公式 的 推导 部 分 可 以 参见 本 章 的 扩展 阅读 部 分 。 同 样 ， 这 里 
的 投影 矩阵 是 建立 在 Unity 对 坐标 系 的 假定 上 面 的 。 


一 个 项 点 和 上 述 投 影 矩 孟 相 乘 后 的 结 采 如 下 : 


Pu/ ip Mtno PView 


A TY Far 十 Near 
Far—Near Far—Near 
l 


注意 到 ， 和 透视 投影 不 同 的 是 ， 使 用 正 交 投影 的 投影 矩阵 对 顶点 
进行 变换 后 ， 其 w 分 量 仍然 为 1。 本 质 是 因为 投影 窍 阵 最 后 一 行 的 不 
同 ， 透 视 投影 的 投影 矩阵 的 最 后 一 行 是 [0 0-1 0]， 而 正 交 投影 的 投 
影 矩 阵 的 最 后 一 行 是 [0 0 0 1]。 这 样 的 选择 是 有 原因 的 ， 是 为 了 为 
齐 次 除法 做 准备 。 具 体会 在 下 一 广 中 讲 到 。 


判断 一 个 变换 后 的 顶点 是 否 位 于 视 锥 体内 使 用 的 不 等 式 和 透视 投 
影 中 的 一 样 ， 这 种 通用 性 也 是 为 什么 要 使 用 投影 矩阵 的 原因 之 一 。 图 
4.41 显 示 了 经 过 上 述 投 影 和 给 阵 后 ， 正 交 投 影 的 视 锥 体 的 变化 。 


同样 ， 裁 藤 矩 阵 改 变 了 空间 的 旋 向 性 。 可 以 注意 到 ， 经 过 正 交 投 
影 变 换 后 的 顶点 实际 已 经 位 于 一 个 立方 体内 了 。 


希望 看 到 这 里 读者 的 脑袋 还 没有 爆炸 。 现 在 ， 我 们 继续 来 看 我 们 
的 农场 游戏 。 在 4.6.6 世 的 最 后 ， 我 们 已 经 帮助 妞妞 确定 了 它 的 鼻子 在 
观察 空间 中 的 位 置 一 (9, 8.84, -27.31)。 现 在 ， 我 们 要 计算 它 在 裁剪 空 
间 中 的 位 置 。 


首先 ， 我 们 需要 知道 农场 游戏 中 使 用 的 摄像 机 类 型 。 由 于 农场 游 
戏 是 一 个 3D 详 戏 ， 因 此 这 里 我 们 使 用 了 透视 摄像 机 。 援 像 机 参数 和 
Game 视 图 的 模 纵 比如 图 4.42 所 示 。 
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A 图 4.41 在 正 交 投影 中 ， 投 影 算 阵 对 顶点 进行 了 缩放 。 图 中 标注 了 4 个 关键 点 经 过 投影 矩阵 


AN 一 


变换 后 的 结果 。 从 这 些 结果 可 以 看 出 x、y、z 和 w 分 量 范 围 发 生 的 变化 。 
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A 图 4.42 
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农场 游戏 使 用 的 摄像 机 参数 和 游戏 画面 的 横 纵 比 


据 此 ， 我 们 可 以 知道 透视 投影 的 参数 : FOV 为 60*，Near 为 5，Far 
为 40，Aspect 为 4/3 = 1.333。 那 么 ， 对 应 的 投影 矩阵 就 是 : 


-一 一 2 0 0 0 
Aspect yy 
Vf 县 0 et 0 0 
frustum 一 0 0 Fari+Near 2:N ear:Far 
Far—-Near ~ Far—Near 
0 0 一 ] 0 
1.299 U 0 U 
0 LT32 0 0 
- 0 0 一 1.280 一 11.429 
0 0 一 ] 0 


EA 我 们 用 这 个 投影 矩阵 来 把 妞妞 的 盟 子 从 观察 空间 转换 到 裁 


Peip =MyusnumnEview 
1.299 0 U U 9 11.691 
让 U 1.732 0 0 8.84 . 15.311 
本 0 U 一 1.286 一 11.429 一 27.31| |23.692 
0 0 —1 0 1 27.31 


这 样 ， 我 们 就 求 出 了 妞妞 的 鼻子 在 裁剪 空间 中 的 位 置 一 (11.691， 
15.311, 23.692, 27.31)。 接 下 来 ，Unity 会 判断 妞妞 的 鼻子 是 否 需 要 裁 
剪 。 通 过 比较 得 到 ， 妞 妞 的 瞄 子 满足 下 面 的 不 等 式 : 


—w<x<w— -27.31<11.691<27.31 


—w<y<w— -27.31<15.311<27.31 


—w<z<w — -27.31<23.692<27.31 


由 此 ， 我 们 可 以 判断 ， 妞 妞 的 蜡 子 位 于 视 锥 体内 ， 不 需要 被 裁 
前 。 


4.6.8 ”屏幕 空间 
经 过 投影 矩阵 的 变换 后 ， 我 们 可 以 进行 裁剪 操作 。 当 完成 了 所 有 
的 裁剪 工作 后 ， 就 需要 进行 真正 的 投影 了 ， 也 惑 是 说 ， 我 们 需要 把 视 


锥 体 投影 到 屏幕 空间 (screen space) 中 。 经 过 这 一 步 变 换 ， 我 们 会 得 
到 真正 的 像 隶 位 置 ， 而 不 是 虚拟 的 三 维 坐标 。 


屏 妖 空 间 是 一 个 二 维 空 间 ， 因 此 ， 我 们 必须 把 顶点 从 裁 草 空 间 投 
影 到 屏幕 空间 中 ， 来 生成 对 应 的 2D 坐 标 。 这 个 过 程 可 以 理解 成 有 两 个 
步骤 。 


首先 ， 我 们 需要 进行 标准 齐 次 除法 (homogeneous division) ， 也 

被 称 为 透视 除法 (perspective division) 。 虽 然 这 个 步骤 听 起 来 很 陌 
生 ， 但 是 它 实 际 上 非常 简单 ， 束 是 用 齐 次 坐标 系 的 w 分 量 去 除 x、y、z 
分 量 。 在 OpenGL 中 ， 我 们 把 这 一 步 得 到 的 坐标 叫做 归 一 化 的 设备 坐标 

(Normalized Device Coordinates，NDC) 。 经 过 这 一 步 ， 我 们 可 以 把 
坐标 从 齐 次 裁剪 坐标 空间 转换 到 NDC 中 。 经 过 透视 投影 变换 后 的 裁剪 
空间 ， 经 过 齐 次 除法 后 会 变换 到 一 个 立方 体内 。 按 照 OpenGL 的 传统 ， 
这 个 立方 体 的 x、y、z 分 量 的 范围 都 是 [-1, 1]。 但 在 DirectX 这 样 的 API 
中 ，z 分 量 的 范围 会 是 [0, 1]。 而 Unity 选 择 了 OpenGL 这 样 的 齐 次 裁剪 空 
则 。 如 图 4.43 所 示 。 


齐 次 除法 


图 4.43 ”经 过 齐 次 除法 后 ， 透 视 投 影 的 裁剪 空间 会 变换 到 一 个 立方 体 


> 


而 对 于 正 交 投影 来 说 ， 它 的 裁剪 空间 实际 已 经 是 一 个 立方 体 了 ， 
而 且 由 于 经 过 正 交 投影 窍 阵 变换 后 的 顶点 的 w 分 量 征 1， 因 此 齐 次 除法 
并 不 会 对 顶点 的 x、y、 了 ?坐标 产生 影响 。 如 图 4.44 所 示 。 
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A 图 4.44 ”经 过 齐 次 除法 后 ， 正 交 投影 的 裁剪 空间 会 变换 到 一 个 立方 体 


经 过 齐 次 除法 后 ， 透 视 投影 和 正 交 投影 的 视 锥 体 都 变换 到 一 个 相 
同 的 立方 体内 。 现 在 ， 我 们 可 以 根据 变换 后 的 x 和 y 上 坐标 来 映射 输出 窗 
口 的 对 应 像素 坐标 。 


在 Unity 中 ， 屏 幕 空间 左下 角 的 像素 坐标 是 (0, 0) ， 右 上 角 的 像素 
坐标 是 (pixelWidth, pixelHeighb。 由 于 当前 x 和 y 坐 标 都 是 [-1 1]， 因 此 
这 个 映射 的 过 程 就 是 一 个 缩放 的 过 程 。 


齐 次 除法 和 屏幕 映射 的 过 程 可 以 使 用 下 面 的 公式 来 总 结 : 


上 面 的 式 子 对 x 和 y 分 量 都 进行 了 处 理 ， 那 么 z 分 量 呢 ? 通 前 ，z 分 量 
clip. 


会 被 用 于 深度 缓冲 。 一 个 传统 的 方式 是 把 czpu 的 值 直接 存 进 深度 缓冲 
中 ， 但 这 并 不 是 必须 的 。 通 利 张 动 生 产 商会 根据 硬件 来 选择 最 好 的 存 
储 格式 。 此 时 clipv 也 并 不 会 被 抛 章 ， 虽 然 它 已 经 完成 了 它 的 主要 工作 
一 一 在 齐 次 除法 中 作为 分 母 来 得 到 NDC， 但 它 仍然 会 在 后 续 的 一 些 工 
作 中 起 到 重要 的 作用 ， 例 如 进行 透视 校正 插值 。 


在 Unity 中 ， 从 裁剪 空间 到 屏幕 空间 的 转换 是 由 底层 帮 有 我 们 完成 
的 。 我 们 的 顶点 着 色 邵 只 需要 把 顶点 转换 到 裁剪 空间 即 可 。 


在 上 一 步 中 ， 我 们 知道 了 裁剪 空间 中 妞妞 鼻子 的 位 置 一 (11.691， 
15.311, 23.692, 27.31)。 现 在 ， 我 们 终于 可 以 确定 妞妞 的 锚 子 在 屏幕 上 
的 像素 位 置 。 假 设 ， 当 前 屏幕 的 像素 宽度 为 400， 高 度 为 300。 首 先 ， 


我 们 需要 进行 齐 次 除法 ， 把 裁剪 空间 的 坐标 投影 到 NDC 中 。 然 后 ， 再 
映射 到 屏幕 空间 中 。 这 个 过 程 如 下 : 


ae 本 ee "Drz- 工 “0 TE 2 
screenz = clip 一 wth pireli uith 
让 的 1.400 400 
221.3] 2 
= 285.617 
3 chpy-pirel Height pirel Height 
We = 
_ 15.811:300 ，300 
2-21.31 2 


= 234.096 


由 此 ， 我 们 知道 了 妞妞 蛋子 在 屏 偶 上 的 位 置 一 一 (285.617， 
234.096) 。 


4.6.9 总结 


心口 


以 上 就 是 一 个 顶点 如 何 从 模型 空间 变换 到 屏幕 坐标 的 过 程 。 图 4.45 
总 结 了 这 些 空间 和 用 于 变换 的 矩阵 。 


顶点 着 色 需 的 最 基本 的 任务 就 是 把 顶点 坐标 从 模型 空间 转换 到 裁 
前 空间 中 。 这 对 应 了 图 4.45 中 的 前 3 个 顶点 变换 过 程 。 而 在 片 元 着 色 锋 
中 ， 我 们 通常 也 可 以 得 到 该 片 元 在 屏幕 空间 的 像素 位 置 。 我 们 会 在 
4.9.3 广 中 看 到 如 何 得 到 这 些 像素 位 置 。 


在 Unity 中 ， 化 标 系 的 旋 癌 性 也 随 看 变换 发 生 了 改变 。 图 4.46 忌 结 
了 Unity 中 各 个 空间 使 用 的 坐标 系 旋 癌 性 。 


从 图 4.46 中 可 以 发 现 ， 只 有 在 观察 空间 中 Unity 使 用 了 右手 坐标 
系 。 


需要 注意 的 是 ， 这 里 仅仅 给 出 的 是 一 些 最 重要 的 坐标 空间 。 还 有 
一 些 空间 在 实际 开发 中 也 会 遇 到 ， 例 如 切线 空间 (tangent space) 
线 空 间 通常 用 于 法 线 映 射 ， 在 后 面 的 4.7 世 中 我 们 会 讲 到 。 


联 
MVYP 和 矩阵 ， 用 于 将 项 
点 从 模型 空间 转换 到 
裁剪 空间 中 


和 图 4.45 ” 泻 染 流水 线 中 顶点 的 空间 变换 过 程 


和 图 4.46 ”Unity 中 各 个 坐标 空间 的 旋 向 性 
4.7 法 线 变换 
在 本 章 的 最 后 ， 我 们 来 看 一 种 特殊 的 变换 : 法 线 变 换 。 


法 线 (normal) ， 也 被 称 为 法 矢量 (normal vector) 。 在 上 面 我 
们 已 经 看 到 如 何 使 用 变换 矩阵 来 变换 一 个 顶点 或 一 个 方 加 矢量， 但 法 
线 是 需要 我 们 特殊 处 理 的 一 种 方向 矢量 。 在 游戏 中 ， 模 型 的 一 个 顶点 
往往 会 携带 额外 的 信息 ， 而 顶点 法 线 就 是 其 中 一 种 信息 。 当 我 们 变换 
一 个 模型 的 时 候 ， 不 仅 需 要 变换 它 的 顶点 ， 还 需要 变换 顶点 法 线 ， 以 
便 在 后 续 处 理 (如 片 元 着 色 器 ) 中 计算 光照 等 。 


一 般 来 说 ， 点 和 绝 大 部 分 方向 天 量 都 可 以 使 用 同一 个 4x4 或 3x3 的 
变换 矩阵 MA ,p 把 其 从 侍 标 空间 A 变换 到 侍 标 空间 B 中 。 但 在 变换 法 线 
的 时 候 ， 如 有 宁 使 用 同一 个 变换 矩阵 ， 可 能 融 无 法 确保 维持 法 线 的 垂直 
性 。 下 面 束 来 了 解 一 下 为 什么 会 出 现 这 样 的 问题 。 


我 们 先 来 了 解 一 下 另 一 种 方向 矢量 一 切线 (tangent) ， 也 被 称 
为 切 矢 量 (tangent vector) 。 与 法 线 类 似 ， 切 线 往往 也 是 模型 顶点 携 
带 的 一 种 信息 。 它 通 利 与 纹理 空间 对 齐 ， 而 且 与 法 线 方 回 垂直 ， 如 图 
4.47 所 示 。 


图 4.47 ”顶点 的 切线 和 法 线 。 切 线 和 法 线 互 相 垂直 


p> 


由 于 切线 是 由 两 个 顶点 之 间 的 差 值 计算 得 到 的 ， 因 此 我 们 可 以 直 
接 使 用 用 于 变换 顶点 的 变换 矩阵 来 变换 切线 。 假 设 ， 我 们 使 用 3x3 的 变 
换 和 矩阵 MA_,p 来 变换 顶点 〈 注 意 ， 这 里 涉及 的 变换 矩阵 都 是 3x3 的 矩 
阵 ， 不 考虑 平移 变换 。 这 是 因为 切线 和 法 线 都 是 方向 矢量 ， 不 会 受 平 
移 的 影响 ) ， 可 以 由 下 面 的 式 子 直接 得 到 变换 后 的 切线 : 


Tp=MA ,BTA 
其 中 Ts 和 Tp 分 别 表 示 在 坐标 空间 A 下 和 坐标 空间 B 下 的 切线 方向 。 


但 如 果 直 接 使 用 MA ,gp 来 变换 法 线 ， 得 到 的 新 的 法 线 方向 可 能 束 不 会 
表面 垂直 了 “。 图 4.48 给 出 了 这 样 的 一 个 例子 。 


按 (1, 2, 1) 进行 
非 统一 缩放 
一 -一 一 一 


法 线 


图 4.48 进行 非 统一 缩放 时 ， 如 果 使 用 和 变换 顶点 相同 的 变换 矩阵 来 变换 法 线 ， 就 会 得 到 错 
误 的 结果 ， 即 变换 后 的 法 线 方向 与 平面 不 再 牌 直 


也 


那么 ， 应 该 使 用 哪个 矩阵 来 变换 法 线 呢 ? 我 们 可 以 由 数学 约束 条 
件 来 推出 这 个 和 矩阵。 我 们 知道 同一 个 顶 后 的 切线 Ts 和 法 线 Na 必 须 满足 
和 垩 直 条 件 ， 即 TANA=0。 给 定 变 换 答 阵 MA ,Bp， 我 们 已 经 知道 Tp=MA ,Bp 
Ta。 我 们 现在 想 要 找到 一 个 矩阵 G 来 变换 法 线 NA， 使 得 变换 后 的 法 线 
仍然 与 切线 垂直 。 即 


Tp Np=(MA ,Bp TA)'(GNA)=0 


对 上 式 进 行 一 些 推 导 后 可 得 


(Ma ,BTaA)-(GA4) = (Ma ,BT4) (GNa) = TIMY DGN4 = TI(MT ,spG)NAa = 
0 


由 于 Ta :Na = 0， 因 此 如 果 M3_,sG = 工 那么 上 式 即 可 成 立 。 也 
就 是 说 ， 如 果 G = (M1 ,sp) ”= (Me ， 即 使 用 原 变换 矩阵 的 逆转 置 
矩阵 来 变换 法 线 就 可 以 得 到 正确 的 结果 。 


值得 注意 的 是 ， 如 果 变 换 矩 阵 MA ,gp 是 正 交 和 矩阵， 那么 
MB = M4 ,8， 因 此 (M3 ,gp) ”= M4 8， 也 就 是 说 我 们 可 以 使 用 用 于 
变换 顶点 的 变换 矩阵 来 直接 变换 法 线 。 如 果 变 换 只 包括 旋转 变换 ， 那 
么 这 个 变换 矩阵 就 是 正 交 和 矩阵。 而 如 果 变 换 只 包含 旋转 和 统一 缩放 ， 
而 不 包含 非 统一 缩放 ， 我 们 利用 统一 缩放 系数 k 来 得 到 变换 矩阵 M，， 


1 
的 逆转 置 矩 阵 Ok 


| \ 一 ] 1 
(Ma 8) 一 RM- 。 这 样 就 可 以 避免 计算 逆 矩 阵 的 过 
程 。 如 果 变 换 中 包含 了 非 统一 变换 ， 那 么 我 们 就 必须 要 求解 逆 矩 阵 来 
得 到 变换 法 线 的 矩阵 。 


4.8 Unity Shader 的 内 置 变量 (数学 篇 ) 


使 用 Unity 写 Shader 的 一 个 好 处 在 于 ， 它 提供 了 很 多 内 置 的 参数 ， 
这 使 得 我 们 不 再 需要 自己 手动 计算 一 些 值 。 本 节 将 给 出 Unity 内 置 的 用 
于 空间 变换 和 摄像 机 以 及 屏幕 参数 的 内 置 变量 。 这 些 内 置 变 量 可 以 在 
UnityShaderVariables.cginc 文 件 中 找到 定义 和 说 明 。 


4.8.1 变换 矩阵 


目 先 是 用 于 坐标 空间 变换 的 矩阵 。 表 4.2 给 出 了 Unity 5.2 版 本 提供 
的 所 有 内 转变 换 答 阵 。 下 面 所 有 的 答 阵 部 是 float4x4 类 型 的 。 


读者 : 为 什么 在 我 的 Unity 中 ， 有 些 变量 不 存在 呢 ? 


我 们 :可 能 是 由 于 你 使 用 的 Unity 版 本 和 本 书 使 用 的 版 本 不 同 。 在 
写本 书 时 ， 我 们 使 用 的 Unity 版 本 是 最 新 的 5.2。 而 在 4.x 版 本 中 ， 一 些 内 


置 变量 可 能 会 与 之 不 同 。 


表 4.2 ”Unity 内 置 的 变换 矩阵 


当前 的 模型 观察 投影 矩阵 ， 用 于 将 顶点 /方向 矢量 从 模型 


UNITY_MATRIX MVP 


空间 变换 到 裁剪 空间 


当前 的 模型 观察 矩阵 ， 
变换 到 观察 空间 


UNITY_MATRIX MV 


于 将 顶点 /方向 矢量 从 模型 空间 


当前 的 观察 矩阵 ， 
UNITY MATRIX_V a 
到 观察 空间 


于 将 顶点 /方向 矢量 从 ; 


于 将 顶点 /方向 矢量 从 观察 空间 变换 


当前 的 投影 矩阵 ， 
UNITY MATRIX_P hs 
到 裁剪 空间 


当前 的 观察 投影 矩阵 ， 
变换 到 裁剪 空间 


UNITY_MATRIX_VP 


UNITY_MATRIX_MV 的 逆转 置 矩 阵 ， 用 于 将 法 线 从 模型 


于 将 顶点 /方向 矢量 


UNITY_MATRIX_IT_MYV | 空间 变换 到 观察 空间 ， 


也 可 用 于 得 到 


UNITY_MATRIX_MV 的 逆 和 矩阵 


当前 的 模型 矩阵 ， 
到 世界 空间 


_Object2World 


_Object2World 的 逆 和 矩阵 ， 用 于 将 顶点 /方向 矢量 从 世 
间 变 换 到 模型 空间 


_World2Object 


表 4.2 给 出 了 这 些 矩 阵 的 常用 用 法 。 但 读者 可 以 根据 需求 来 达到 不 
同 的 目的 ， 例 如 我 们 可 以 提取 坐标 至 间 的 坐标 轴 ， 方 法 可 回顾 4.6.2 
节 。 


其 中 有 一 个 矩阵 比较 特殊 ， 即 UNITY_MATRIX_T_MV 知 阵 。 很 多 
对 数学 不 了 解 的 读者 不 理解 这 个 矩阵 有 什么 用 处 。 如 果 读 者 认真 看 过 
矩阵 一 节 的 知识 ， 应 该 还 会 记得 一 种 非常 吸引 人 的 矩阵 类 型 一 一 正 交 
和 矩阵。 对 于 正 交 移 阵 来 说 ， 它 的 逆 和 矩阵 就 是 转 置 乍 孟 。 因 此 ， 如 果 
UNITY_MATRIX_MV 是 一 个 正 交 算 阵 的 话 ， 那 么 
UNITY_MATRIX_T_MV 就 是 它 的 逆 和 矩阵， 也 就 是 说 ， 我 们 可 以 使 用 
UNITY_MATRIX_ T_MV 把 顶点 和 方向 矢量 从 观察 空间 变换 到 模型 空 
间 。 那 么 问题 是 ，UNITY_MATRIX_MV 什 么 时 候 是 一 个 正 交 和 矩阵 呢 ? 
读者 可 以 从 4.5 下 找到 答案 。 总 结 一 下 ， 如 果 我 们 只 考虑 旋转 、 平 移 和 
缩放 这 3 种 变换 的 话 ， 如 果 一 个 模型 的 变换 只 包括 旋转 ， 那 么 
UNITY_MATRIX_MV 吏 是 一 个 正 交 矩阵 。 这 个 条 件 似 乎 有 些 奇 刻 ， 我 
们 可 以 把 条 件 再 放宽 一 些 ， 如 有 果 只 包括 旋转 和 统一 缩放 (假设 缩放 系 
数 是 ， 那 和 UNITY_MATRIX_MV 就 几乎 是 一 个 正 交 和 矩阵 了 。 为 什 
么 是 几乎 呢 ? 因 为 统一 缩放 可 能 会 导致 每 一 行 (或 每 一 列 ) 的 矢量 长 


度 不 为 1， 而 是 k， 这 不 符合 正 交 矩 阵 的 特性 ， 但 我 们 可 以 通过 除 以 这 
个 统一 缩放 系数 ， 来 把 它 变 成 正 交 和 矩阵。 在 这 种 情况 下 ， 
] 


UNITY_MATRIX_MV 的 逆 和 矩阵 就 是 UNITY_MATRIX T_MV。 而 且 ， 

如 有 果 我 们 只 是 对 方向 矢量 进行 变换 的 话 ， 条 件 可 以 放 得 更 宽 ， 即 不 用 

考虑 有 没有 平移 变换 ， 因 为 平移 对 方向 矢量 没有 影响 。 因 此 ， 我 们 可 

以 截取 UNITY_MATRIX_T_MV 的 前 3 行 前 3 列 来 把 方向 矢量 从 观察 空间 
变换 到 模型 空间 (前 提 是 只 存在 旋转 变换 和 统一 缩放 ) 。 对 于 方向 天 

量 ， 我 们 可 以 在 使 用 前 对 它们 进行 归 一 化 处 理 ， 来 消除 统一 缩放 的 影 

啊 。 


还 有 一 个 矩阵 需要 说 明 一 下 ， 那 瓯 是 UNITY_MATRIX_IT_MV 移 
阵 。 我 们 在 4.7 节 已 经 知道 ， 法 线 的 变换 需要 使 用 原 变换 矩阵 的 逆转 置 
矩阵。 因此 UNITY_MATRIX_IT_MV 可 以 把 法 线 从 模型 空间 变换 到 观 
察 空 间 。 但 只 要 我 们 做 一 点 手脚 ， 它 也 可 以 用 于 直接 得 到 
UNITY_MATRIX_MV 的 逆 和 矩阵 一 一 我 们 只 需要 对 它 进 行 转 置 束 可 以 
了 。 因 此 ， 为 了 把 顶点 或 方向 矢量 从 观察 空间 变换 到 模型 空间 ， 我 们 
可 以 使 用 类 似 下 面 的 代码 : 


// 方法 一 : 使 用 transpose 函 数 对 UNITY_MATRIX_IT_MV 进 行 转 置 ， 
// 得 到 UNITY_MATRIX_MV 的 逆 和 矩阵 ， 然 后 进行 列 和 矩阵 乘法 ， 
// 把 观察 空间 中 的 点 或 方向 矢量 变换 到 模型 空间 中 
float4 modelPos = mul(transpose(UNITY_MATRIX_IT_MV), viewPos); 


// 方法 二 : 不 直接 使 人 而 是 交换 mu1 参 数 的 位 置 ， 使 用 行 矩阵 乘法 
// 本 质 和 方法 一 是 完全 一 样 的 
float4 modelPos = mul(viewPos, UNITY_MATRIX_IT_MV); 


关于 mul 罚 数 参 数位 置 导 人 致 的 不 同 ， 在 4.9.2 广 中 我 们 会 继续 讲 到 。 
4.8.2 ”摄像 机 和 屏幕 参数 


Unity 提 供 了 一 些 内 置 变 量 来 让 我 们 访问 当前 正在 泻 染 的 摄像 机 的 
参数 信息 


给 出 了 Unity 5.2 版 本 提供 的 这 些 变 量 。 


X= width, y= height, z= 1.0+ 

1.0/width，w = 1.0 + 1.0/height， 其 中 
_ScreenParams float4 es We 

width 和 height 分 别 是 该 摄像 机 的 演 染 目 

(render target) 的 像素 宽度 和 高 度 

X= 1- Far/Near, y= Far/Near, z= 
_ZBufferParams float4 ”|x/Far，w = WEFar， 该 变量 用 于 线性 化 Z 缓 

存 中 的 深度 值 (可 参考 13.1 节 ) 


x=width，y = heigth，z 没 有 定义 ，w = 
, 1.0 (该 摄像 机 是 正 交 摄像 机 ) 或 w = 0.0 
unity_OrthoParams float4 、 a 
(该 摄像 机 是 透视 摄像 机 ) ， 其 中 width 
和 height 是 正 交 投影 摄像 机 的 宽度 和 高 度 


。 这些 参 数 对 应 了 摄像 机 上 的 Camera 组 件 中 的 属性 值 。 表 4.3 


表 4.3 Unity 内置 的 摄像 机 和 屏幕 参数 


_WorldSpaceCameraPos 该 摄像 机 在 1 


x= 1.0 (或 -1.0， 如 果 正 在 使 用 一 个 翻转 
的 投影 矩阵 进行 渲染 ) ，y = Near, z= 

_ProjectionParams float4 |Far，w=1.0+1.0/Far， 其 中 Near 和 Far 分 
别 是 近 裁 前 平面 和 远 裁剪 平面 和 摄像 机 
的 距离 


| 
pe 


该 摄像 机 的 投影 矩阵 的 逆 和 矩阵 


该 摄像 机 的 6 个 裁剪 平面 在 世界 空间 下 的 
unity_CameraWorldClipPlanes[6] | float4 “| 等 式 ， 按 如 下 顺序 : 左 、 右 、 下 、 上 、 
近 、 远 裁剪 平面 


4.9 答疑 解 惑 


茶 喜 你 已 经 几乎 完成 了 本 书 所 有 的 数学 训练 ! 我 们 希望 你 能 从 上 
面 的 内 容 中 得 到 很 多 收获 和 局 发 。 但 是 ， 我 们 也 相信 在 读 完 上 面 的 内 
容 后 你 可 能 对 某 些 概 念 仍然 感到 迷惑 。 不 要 担心 ， 管 疑 解 惑 一 节 束 可 
以 帮 你 跨 过 一 些 障 碍 。 


4.9.1 ”使 用 3x3 还 是 4x4 的 变换 矩阵 


对 于 线性 变换 〈 例 如 旋转 和 缩放 ) 来 说 ， 仅 使 用 3x3 的 矩阵 就 足够 
表示 所 有 的 变换 了 “。 但 如 果 存 在 平移 变换 ， 我 们 就 需要 使 用 4x4 的 矩 
阵 。 因 此 ， 在 对 顶点 的 变换 中 ， 我 们 通 利 使 用 4x4 的 变换 矩 孟 。 当 然 ， 
在 变换 前 我 们 需要 把 点 坐标 转换 成 齐 次 坐标 的 表示 ， 即 把 项 点 的 w 分 量 
设 为 1。 而 在 对 方 同 矢量 的 变换 中 ， 我 们 通 音 使 用 3x3 的 窍 阵 束 足 够 
了 ， 这 十 因为 平移 变换 对 方向 天 量 是 没有 影响 的 。 


4.9.2 Cg 中 的 矢量 和 矩阵 类 型 


我 们 通常 在 Unity Shader 中 使 用 Cg 作为 着 色 需 编程 语言 。 在 Cg 中 变 
量 类 型 有 很 多 种 ， 但 在 本 市 我 们 是 想 解 释 如 何 使 用 这 些 类 型 进行 数学 
运算 。 因 此 ， 我 们 只 以 float 家 族 的 变量 来 做 说 明 。 


在 Cg 中 ， 和 矩阵 类 型 是 由 float3x3、float4x4 等 关键 词 进 行 声 明和 定义 
的 。 而 对 于 float3、float4 等 类 型 的 变量 ， 我 们 既 可 以 把 它 当 成 一 个 天 
量 ， 也 可 以 把 它 当 成 是 一 个 1xmb 的 和 3 和 曙 或 者 一 个 wl 的 列 和 了 这 取 
决 于 运算 的 种 类 和 它们 在 运算 中 的 位 置 。 例 如 ， 当 我 们 进行 点 积 操作 
时 ， 两 个 操作 数 融 被 当成 天 量 类 型 ， 如 下 : 


float4 a = float4(1.0, 
float4 b float4(1.0, 
// 对 两 个 矢量 进行 点 积 操作 
float result = dot(a， 


但 在 进行 矩阵 乘法 时 ， 参 数 的 位 置 将 决定 是 按 列 矩阵 还 是 行 矩 阵 
进行 乘法 。 在 Cg 中 ， 算 阵 乘 法 是 通过 mul 函 数 实 现 的 。 例 如 : 


float4 v = float4(1.0, 2.0, 3.0, 4. Br 
float4x4 M = = float4x4( E 


1. 
0. 
0. 
0. 


// 把 v 当 成 列 矩 阵 和 甜 阵 M 进 行 不 


float4 column mul_result mul(M, v); 
// 把 v 当 成 行 算 阵 和 和 矩阵 M 进 行 左 乘 
float4 row mul _ result = mul(v, M); 
// 注意 : column_mul_result 不 等 于 row_mul_result， 而 是 : 
// mul(M,v) == mul(v, tranpose(M)) 
// mul(v,M) == mul(tranpose(M), v) 


因此 ， 参 数 的 位 置 会 直接 影响 结果 值 。 通 常 在 变换 顶点 时 ， 我 们 
都 是 使 用 右 乘 的 方式 来 按 列 矩 阵 进 行 乘法 。 这 是 因为 ，Unity 近 供 的 内 


置 矩阵 (如 UNITY_MATRIX_MVP 等 ) 都 是 按 列 存储 的 。 但 有 时 ， 我 
们 也 会 使 用 左 乘 的 方式 ， 这 是 因为 可 以 省 去 对 和 矩阵 转 置 的 操作 。 


需要 注意 的 一 点 是 ，Cg 对 和 矩阵 类 型 中 元 素 的 初始 化 和 访问 顺序 。 
在 Cg 中 ， 对 float4x4 等 类 型 的 变量 是 按 行 优先 的 方式 进行 填充 的 。 什 么 
意思 呢 ? 我 们 知道 ， 想 要 填充 一 个 矩阵 需要 给 定 一 串 数字 ， 例 如 ， 如 
采 需 要 声明 一 个 3x4 的 矩阵 ， 我 们 需要 提供 12 个 数字 。 那 么 ， 这 上 串 数 字 
是 一 行 一 行 地 填充 矩阵 还 是 一 列 一 列 地 填充 矩阵 呢 ? 这 两 种 方式 得 到 
的 矩阵 是 不 同 的 。 例 如 ， 我 们 使 用 (1, 2, 3, 4, 5, 6, 7, 8, 9) 去 填充 一 个 3x3 
的 和 矩阵， 如 果 是 按照 行 优先 的 方式 ， 得 到 的 矩阵 是 : 


Cg 使 用 的 古 行 优先 的 方法 ， 即 古 一 行 一 行 地 填充 矩阵 的 。 因 此 ， 
如 有 果 读 者 需要 目 己 定义 一 个 矩阵 时 (例如 ， 目 己 构 建 用 于 空间 变换 的 
矩阵) ， 就 要 注意 这 里 的 初始 化 方式 。 


类 似 地 ， 当 我 们 在 Cg 中 访问 一 个 矩阵 中 的 元 素 时 ， 也 是 按 行 来 索 
引 的 。 例 如 : 


// 按 行 优先 的 方式 初始 化 矩阵 M 
float3x3 M = float3x3(1.0, 2.0, 3.0, 
4.0, 5.0, 6.0, 


.0, 8.0, 9.0); 
// 得 到 M 的 第 一 行 ， 即 (1.9， 0, 3.0) 
float3 row = M[0]; 


// 得 到 M 的 第 2 行 第 1 列 的 元 素 ， 即 4.0 


float ele = M[1][0]; 


之 所 以 Unity Shader 中 的 矩阵 类 型 满足 上 述 规 则 ， 是 因为 使 用 的 古 
Cg 语言 。 换 句 话 说 ， 上 面 的 特性 都 是 Cg 的 规定 。 


如 采 读 者 熟悉 Unity 的 API， 可 能 知道 Unity 在 脚本 中 提供 了 一 种 矩 
EE Matrix4x4。 脚本 中 的 这 个 矩阵 类 型 则 是 采用 列 优 先 的 方 
式 。 这 与 Unity Shader 中 的 规定 不 一 样 ， 布 望 读者 在 过 到 时 不 会 感到 困 


一 


J 


EH 


4.9.3 Unity 中 的 屏幕 坐标 : ComputeScreenPos/VPOS/WPOS 


我 们 在 4.6.8 节 中 讲 了 屏幕 空间 的 转换 细 世 。 在 写 Shader 的 过 程 中 ， 
我 们 有 时 候 和 希望 能 够 获得 片 元 在 屏 医 上 的 像 隶 位置 。 


在 顶点 / 片 元 着 色 器 中 ， 有 两 种 方式 来 获得 片 元 的 屏幕 坐标 。 


种 是 在 片 元 着 色 器 的 输入 中 声明 VPOS 或 WPOS 语 义 (关于 什么 
是 语义 ， 可 参见 5.4 节 ) 。VPOS 是 HLSL 中 对 屏幕 坐标 的 语义 ， 而 
WPOS 是 Cg 中 对 屏 医 坐标 的 语义 。 两 者 在 Unity Shader 中 是 等 价 的 。 我 
们 可 以 在 HLSL/Cg 中 通过 语义 的 方式 来 定义 顶点 / 片 元 着 色 器 的 默认 输 
入 ， 而 不 需要 自己 定义 输入 输出 的 数据 结构 。 这 里 的 内 容 有 一 些 超 
前 ， 因 为 我 们 还 没有 具体 讲解 顶点 / 片 元 着 色 器 的 写法 ， 读 者 在 这 里 可 
以 只 天 注 VPOS 和 WPOS 的 语义 。 使 用 这 种 方法 ， 可 以 在 片 元 着 色 句 中 
这 样 写 : 


fixed4 frag(float4 sp : VPOS) : SV_Target { 
// 用 屏幕 坐标 除 以 屏幕 分 辨 率 ScreenParams .xy， 得 到 视 口 空间 中 的 坐标 


return fixed4(sp.xy/_Screenparams .xy,0.0,1.0); 


} 


得 到 的 效果 如 图 4.49 所 示 。 


4 图 4.49 ”由 片 元 的 像素 位 置 得 到 的 图 像 


VPOS/WPOS 语 义 定 义 的 输入 是 一 个 float4 类 型 的 变量 。 我 们 已 经 
知道 它 的 xy 值 代 表 了 在 屏幕 空间 中 的 像素 坐标 。 如 果 屏 幕 分 辨 率 为 400 
x300， 那 么 x 的 范围 就 是 [0.5,400.5]，y 的 范围 是 [0.5,300.5]。 注 意 ， 这 
里 的 像素 坐标 并 不 是 整数 值 ， 这 是 因为 OpenGL 和 DirectX 10 以 后 的 版 
本 认为 像素 中 心 对 应 的 是 浮 点 值 中 的 0.5。 那 么 ， 它 的 zw 分 量 是 什么 
呢 ? 在 Unity 中 ，VPOS/WPOS 的 z 分 量 苑 围 是 [0,1]， 在 摄像 机 的 近 和 裁剪 
平面 处 ，z 值 为 0， 在 远 裁剪 平面 处 ，z 值 为 1。 对 于 w 分 量 ， 我 们 需要 考 
虑 摄像 机 的 投影 类 型 。 如 果 使 用 的 是 透视 投影 ， 那 么 w 分 量 的 范围 是 


l 1 
[es | Near 和 Far 对 应 了 在 Camera 组 件 中 设置 的 近 裁 前 平面 和 远 
裁剪 平面 距离 摄像 机 的 远近 ;如果 使 用 的 是 正 交 投影 ， 那 么 w 分 量 的 值 
恒 为 1。 这 些 值 是 通过 对 经 过 投影 矩阵 变换 后 的 w 分 ) 量 取 倒 数 后 得 到 
的 。 在 代码 的 最 后 ， 我 们 把 屏幕 空间 除 以 屏幕 分 辨 率 来 得 到 视 口 空间 
(viewport space) 中 的 坐标 。 视 口 坐标 很 简单 ， 就 是 把 屏幕 坐标 归 一 


化 ， 这 样 屏 幕 左下 角 就 是 (0, 0)， 右 上 和 角 就 是 (1, 1)。 如 果 已 知 屏 幕 坐标 
的 话 ， 我 们 只 需要 把 xy 值 除 以 屏幕 分 辨 率 即 可 。 


一 种 方式 是 通过 Unity 提 供 的 ComputeScreenPos 函 数 。 这 个 函数 
在 UnityCG.cginc 里 被 定义 。 通 癌 的 用 法 需要 两 个 步骤 ， 首 移 在 顶点 着 
色 器 中 将 ComputeScreenPos 的 结果 保存 在 et 然后 在 片 元 着 
色 器 中 进行 一 个 齐 次 除法 运算 后 得 到 视 口 空间 下 的 坐标 。 例 如 : 


struct vertOut { 
float4 pos:SV_POSITION; 
float4 scrPos : TEXCOORDO; 
}; 


vertOut vert(appdata base v) { 
vertOut 0o; 
oO.pos = mul (UNITY_MATRIX_ MVP, v.vertex); 
// 第 一 步 : 把 computeScreenPos 的 结果 保存 到 scrPpos 
oO.scrPos = ComputeScreenPos(o.pos); 
return o; 


} 


fixed4 frag(vertOut i) : SV_Target { 
// 第 二 步 : 用 scrPos .xy 除 以 scrPos .w 得 到 视 口 空间 
float2 wcoord = (i,.scrPos.xy/i.scrPos.w); 
return fixed4(wcoord,0.0,1.0); 


} 


上 上 面 代码 的 实现 效果 和 图 4.49 中 的 一 样 。 我 们 现在 来 看 一 下 这 种 方 
式 的 实现 细节 。 这 种 方法 实际 上 是 手动 实现 了 屏幕 映射 的 过 程 ， 而 且 
它 得 到 的 坐标 直接 吏 是 视 口 至 间 中 的 坐标 。 我 们 在 4.6.8 世 中 已 经 看 到 
了 如 何 将 裁剪 坐标 空间 中 的 点 映 喘 到 屏幕 坐标 中 。 据 此 ， 我 们 可 以 得 
到 视 口 空 间 中 的 坐标 ， 公 式 如 下 : 


clipy ] 


viewportr = - 
| 2.clzpo 2 


上 面 公式 的 思想 就 是 ， 首 先 对 裁 六 空 间 下 的 坐标 进行 章 次 除法 ， 
得 到 范围 在 [-1, 1] 的 NDC， 然 后 再 将 其 映射 到 范围 在 [0, 1] 的 视 口 空间 
下 的 坐标 。 那 么 ComputeScreenPos 究 竟 是 如 何 做 到 的 呢 ? 我 们 可 以 在 
UnityCG.cginc 文 件 中 找到 ComputeScreenPos 函 数 的 定义 。 如 下 : 


inline float4 ComputeScreenPos (float4 pos) { 

float4 0 = pos * 0.5f， 

#if defined(CUNITY_HALF_TEXEL_OFFSET ) 

oO.Xy = float2(o.x, oOo.y*_Projectionparams.x) + O.w * 
_ScreenParams .zw; 

#else 


oO.Xxy = float2(0o.x, oOo.y*_ProjectionParams.x) + oO.w; 
#endif 


0.Zw = pos.Zzw; 
return o; 


ComputeScreenPos 的 输入 参数 pos 是 经 过 MVP 和 矩阵 变换 后 在 裁剪 至 
间 中 的 顶点 坐标 。UNITY_HALF_TEXEL_OFFSET 是 Unity 在 某 些 
DirectX 平 台 上 使 用 的 安 ， 在 这 里 我 们 可 以 忽略 它 。 这 样 ， 我 们 可 以 只 
关注 #else 的 部 分 。_ProjectionParams.x 在 默认 情况 下 是 1 (如 果 我 们 使 用 
了 一 个 翻转 的 投影 矩阵 的 话 就 是 -1， 但 这 种 情况 很 少见 ) 。 那 么 上 述 
代码 的 过 程 实际 是 输出 了 : 


Output. = clip: 


Outputy, = clipw 


可 以 看 出 ， 这 里 的 xy 并 不 是 真正 的 视 口 空间 下 的 坐标 。 因 此 ， 我 
们 在 片 元 着 色 器 中 再 进行 一 步 处 理 ， 即 除 以 裁剪 坐标 的 w 分 量 。 至 此 ， 
完成 整个 映射 的 过 程 。 因 此 ， 虽 然 ComputeScreenPos 的 函数 名 字 似 乎 意 
味 着 会 直接 得 到 屏幕 空间 中 的 位 置 ， 但 并 不 是 这 样 的 ， 我 们 仍 需 在 片 
元 着 色 器 中 除 以 它 的 w 分 量 来 得 到 真正 的 视 口 空间 中 的 位 置 。 那 么 ， 为 
什么 Unity 不 直接 在 ComputeScreenPos 中 为 我 们 进行 除 以 w 分 量 的 这 个 步 
骤 呢 ? 为 什么 还 需要 我 们 来 进行 这 个 除法 ? 这 是 因为 ， 如 果 Unity 在 顶 
点 大 色 屁 中 这 么 做 的 话 ， 束 会 破坏 插值 的 结果 。 我 们 知道 ， 从 顶点 看 
色 器 到 片 元 着 色 器 的 过 程 实际 会 有 一 个 插值 的 过 程 (如 果 你 忘 了 的 
话 ， 可 以 回顾 2.3.6 小 市 )。 如 果 不 在 顶点 着 色 器 中 进行 这 个 除法 ， 保 
留 x、y 和 w 分 量 ， 那 么 它们 在 揪 值 后 再 进行 这 个 除法 ， 得 到 的 $\frac{x} 
{w}$ 和 S$\frac{y}{w}$ 束 是 正确 的 〈 我 们 可 以 认为 是 除法 抵消 了 插值 的 
影响 ) 。 但 如 果 我 们 直接 在 顶点 着 色 器 中 进行 这 个 除法 ， 那 么 就 需要 
对 $\frac{x}{w}$ 和 和 S$\frac{y}{w}$ 直 接 进 行 插值 ， 这 样 得 到 的 插值 结 来 
束 会 不 准确 。 原 因 是 ， 我 们 不 可 以 在 投影 空间 中 进行 插值 ， 因 为 这 并 
不 是 一 个 线性 空间 ， 而 插值 往往 是 线性 的 。 


经 过 除法 操作 后 ， 我 们 束 可 以 得 到 该 片 元 在 视 口 空间 中 的 付 标 
了 ， 也 就 是 一 个 浆 范围 都 在 [0, 1] 之 间 的 值 。 那 么 它 的 zw 值 是 什么 呢 ? 
可 以 看 出 ， 我 们 在 顶点 着 色 胡 中 直接 把 裁 台 空 间 的 zw 值 存 进 了 输出 结 
构 体 中 ， 因 此 片 元 着 色 此 输 入 的 束 古 这 些 插值 后 的 裁剪 空间 中 的 zw 
值 。 这 意味 着 ， 如 果 使 用 的 是 透视 投影 ， 那 么 z 值 的 范围 是 [-Neamr 
Farl，w 值 的 范围 是 [Nean Far]; 如 采 使 用 的 是 正 交 投影 ， 那 么 z 值 范围 
征 [-1 1]， 而 w 值 恒 为 1 。 


4.10 扩展 阅读 


计算 机 图 形 学 使 用 的 数学 还 有 很 多 ， 本 书 仅 釉 击 了 其 中 非常 小 的 
一 部 分 。 如 果 读 者 想 要 深入 学 习 这 些 知识 的 话 ， 书 籍 中 中 是 非常 好 的 图 
形 学 数学 学 习 资 料 ， 读 者 可 以 在 那里 找到 更 多 类 型 的 变换 及 其 数学 表 
示 。 关 于 如 何 从 左手 坐标 系 转换 到 右手 坐标 系 同时 又 保持 视觉 效果 一 
样 ， 可 以 参考 资料 B]。 关 于 如 何 得 到 线性 的 深度 值 可 以 参考 资料 办 。 


[1] Fletcher Dunn, Ian Parberry. 3D Math Primer for Graphics and 
Game Development (2nd Edition). November 2, 2011 by A K Peters/CRC 


Press ° 


[2] Eric Lengyel. Mathematics for 3D game programming and 
computer graphics (3rd Edition). 2011 by Charles River Media ° 


[3] David Eberly. Conversion of Left-Handed Coordinates to Right- 


Handed Coordinates ° 


[4] http:/www.humus.name/temp/Linearize%20depth.txt ° 


4.11 练习 题 答 案 


4.2.5 节 


1. 右手 坐标 系 。 


2. (1, 0, 0)。(1, 0, 0)。 从 坐标 表示 来 看 ， 结 果 是 完全 一 样 的 。 左 手 
坐标 系 和 右手 坐标 系 在 绝 大 多 数 情 况 下 不 会 对 底层 的 数学 运算 造成 影 
啊 ， 但 是 会 在 视觉 表现 上 有 所 差异 。 以 本 题 为 例 ， 虽 然 旋 转 之 前 点 的 


坐标 是 一 样 的 ， 但 如 果 把 它们 统一 在 同一 个 空间 中 显示 出 来 ， 其 绝对 
位 置 是 不 同 的 。 如 图 4.50 所 示 。 


右手 坐标 系 中 的 (0, 0, 1) 点 


一 +x 


右手 坐标 系 中 的 +z 旋转 90 后 的 (1, 0, 0) 点 


A 图 4.50 图 中 两 个 坐标 系 的 x 轴 和 y 轴 是 重合 的 ， 区 别 仅 在 于 z 轴 的 方向 。 左 手 坐 标 系 的 《0, 0， 


i 
1) 点 和 右手 坐标 系 中 的 《0, 0, 1) 点 是 不 同 的 ， 但 它们 旋转 后 的 点 却 对 应 到 了 同一 点 


因此 ， 如 有 果 我 们 想 要 在 左手 和 右手 坐标 系 中 表示 同一 个 点 ， 就 需 
要 把 其 中 一 个 坐标 系 中 的 表示 方法 中 的 某 个 轴 反 向 ， 一 般 是 把 z 值 取 
反 。 在 本 例 中 ， 左 手 坐 标 系 的 (0, 0, D) 点 和 右手 坐标 系 中 的 (0, 0, -1 点 
是 同一 点 。 但 是 ， 如 有 果 此 时 对 该 点 再 次 分 别 在 左手 和 右手 坐标 系 中 组 y 
轴 正 方向 旋转 90"， 结 果 怠 不 是 同一 个 点 了 ， 如 图 4.51 所 示 。 


在 右手 坐标 系 中 绕 +Y 


旋转 90* 后 的 (1, 0, 0) 点 有 


在 左手 坐标 系 中 绕 +y 


右手 坐标 系 中 的 +z 旋转 90° 后 的 (1, 0, 0) 点 


图 4.51 ”绝对 空间 中 的 同一 点 ， 在 左手 和 右手 坐标 系 中 进行 同样 角度 的 旋转 ， 其 旋转 方向 是 
不 一 样 的 。 在 左手 坐标 系 中 将 按 顺 时 针 方向 旋转 ， 在 右手 坐标 系 中 将 按 逆 时 针 方向 旋转 


> 


3. -10。10。 这 是 因为 ， 在 Unity 中 ， 模 型 空间 使 用 的 是 左手 坐标 
系 。 球 体 所 在 的 位 置 位 于 摄像 机 模型 空间 中 的 z 轴 正方 向 ， 因 此 在 模型 
空间 下 其 z 值 为 10。 而 观察 空间 使 用 的 右手 坐标 系 ， 摄 像 机 的 正 前 方 是 z 
轴 的 负 方 向 ， 因 此 在 观察 空间 下 其 z 值 为 -10。 


4.3.3 节 


(1) 错误 ， 完 全 说 反 了 “。 对 于 矢量 来 说 它 有 两 个 属性 : 模 ( 即 大 
小 ) 和 方向 ， 矢 量 是 没有 位 置 属 性 的 ， 也 就 是 说 ， 我 们 可 以 随意 把 它 
放 在 空间 的 任何 位 置 。 


(2) 正确 。 


(3) 错误 。 坐 标 系 的 选择 不 会 对 底层 的 数学 计算 产生 影响 ， 对 于 
义 积 来 说 ， 我 们 总 可 以 使 用 公式 


axb=(ay,ay,az)*(b,by,b;) 


=(ayb,—azby, azpx- axb,, axby— ayby) 


YD 2 7 RX XTy 


来 计算 。 但 是 ， 不 同 的 坐标 系 会 影响 最 后 的 显示 结 末 ， 即 视觉 上 
的 表现 。 数 学 是 一 门 非常 严谨 的 学 科 ， 但 人 类 往往 需要 可 视 化 一 些 东 
西 ， 例 如 在 屏幕 上 显示 虚拟 的 三 维 空间 ， 在 把 数字 转换 成 视觉 表现 的 
时 候 ， 选 择 不 同 的 坐标 系 可 能 会 得 到 不 同 的 结 


(1) V62 ~~ 7.874 
(2) (12.5,10,25) 


(3) (1.5,2) 


5 12 ee 
(a5) 0.3850.923 
4 | 


1 | Ree 
( ) /V3 0.o710.57170.571 
5 VoOVoOV: 


(1) 75 
(2) 13 
(3) 13 


(4) (-9,-13,7) 


(5) (9,13,-7)， 注 意 ， 结 果 和 答案 (4) 是 相反 的 。 这 是 因为 ， 又 
积 满足 反 交 换 律 。 


(1) 我 们 可 以 通过 判断 x-p 和 v 点 积 的 符号 来 判断 x 是 否 在 NPC 的 前 
方 。 这 是 因为 : 


(x-p)'v=|vllx-plcos0 


其 中 6 是 xz-p 和 v 之 间 的 夹 角 。 如 果 它 们 点 积 的 结果 大 于 0， 那 么 说 明 
9 < 90*， 即 点 x 在 NPC 的 前 方 ， 如果 点 积 结果 小 于 0， 那 么 说 明 6 > 90。， 
即 点 x 在 NPC 的 后 方 ， 如 果 点 积 结果 等 于 0， 那 么 说 明 6 = 90*， 即 点 x 在 
NPC 的 正 左 侧 或 正 右 侧 。 


(2) 并 入 得 
(x-—p):v=((10,6)— (4, 2)).(-3,4)=(6,4).(-3,4)=-18+16=-2<0 
因此 ， 点 x 在 NPC 的 后 方 。 


(3) 我 们 现在 需要 判断 cosg 和 ?os 2 的 大 小 。 如 果 [@@Imaia Equation )， 
那么 说 明 ， 即 NPC 可 以 看 到 该 点 ， 如 果 ， 那 么 说 明 ， 即 NPC 无 法 看 到 


(X 一 PD) :TY 


cos 日 一 
该 点 。cos9 可 以 由 lx 一 Pllv| 来 得 到 ， 而 可 直接 计算 得 到 。 


(4) 如 果 有 距离 限制 ， 我 们 只 需要 判断 该 点 到 p 的 距离 是 否 小 于 
该 限制 值 即 可 。 


7. 令 u =py-p1，V = ps -pi。 由 于 三 点 都 位 于 xy 平面 ， 那 么 有 : 
u =(Ux, Uy,0), V =(VVy,0) 
它们 的 又 积 为 : 
uxv=(0,0,uxvy—uUyVvx) 


我 们 可 以 通过 判断 uvy-uyv 的 符号 来 判断 三 角形 的 朝 癌 。 如 琳 该 值 
为 负 ， 则 由 左手 法 则 判断 可 得 到 3 个 顶点 的 顺序 是 顺 时 针 方向 ， 如 果 为 
正 ， 则 为 敢 时 针 方 向。 如 图 4.52 所 示 。 


A 图 4.52 ”在 左手 坐标 系 中 ， 如 果 又 积 结果 为 负 ， 那 么 3 点 的 顺序 是 顺 时 针 方向 


4.4.6 小 节 


1 3||-1 5 |(1)(—1)+(3)(0) (1)(5)+(3)(2)| 11-L1 1 
(1) 2 10 2 [2D)+(4)(0) (2)(5)+(4)(2) [一 2 18 


(2) 无 法 进行 矩阵 乘法 ， 两 个 矩阵 相 乘 要 求 第 一 个 矩阵 的 列 数 等 
于 第 二 个 的 行 数 ， 因 此 我 们 无 法 对 2x3 和 4x2 的 矩阵 进行 乘法 。 


1 -2 3] [-5 (1)(—5) 十 (一 2)(4) + (3)(8) 11 
5 1 4 = | (5)( 一 5)+ (1)(4)+ (4)(8) | = | 11 
(3) [6 0 3| Ls (6)(—5) + (0)(4) + (3)(8) 一 6 


rd 一 


(1) 不 是 正 交 矩阵。 它 的 转 置 矩 阵 和 本 身 相 乘 的 结果 不 是 单位 托 
阵 。 也 可 以 通过 难 证 矩 孟 的 行 是 否 构成 一 组 标准 正 交 基 来 判断 。 


(2) 是 正 交 和 矩阵 。 
(3) 是 正 交 矩阵。 这 实际 上 是 一 个 绕 z 轴 旋转 9° 的 旋转 矩阵 。 


3. 
1 0 0 (3)(1) 填 (2)(0) 寺 (6)(0) 
3 2 6 10 1 0|= |(3)(0)+(2)(1)+(6)(0)| = 2 6] 
(1) 0 0 1 (3)(0) 十 (2)(0) + (6)(1) 


三 | (0)(3) 十 (1)(2) 填 (0)(6) 


3 (1)(3) 填 (0)(2) 十 (0)(6) 
2| = 
6 (3)(0)(3) + (0)(2) + (1)(6) 


得 到 的 结果 转换 成 矢量 都 是 (3,2,6)， 是 一 样 的 。 这 是 因为 ， 该 矩阵 
古 一 个 单位 和 矩阵， 单位 和 矩阵 和 任何 矩阵 相 乘 都 是 原 矩 阵 本 映 。 


10 2 (3)(1) 十 (2)(0) 十 (6)(0) 
3 2 6 40 1 -3|= | (3)(0)+(2)(D)+(6)(0) | =[3 2 18] 
0 0 3 (3)(2) + (2)(—3) + (6)(3) 


1] 0 2 3 (1)(3) 填 (0)(2) 填 (2)(6) 15 
0 1 -3| |2| = |(0)(3) + (D(2) + (-3)(6)| = |-16 
0 0 3 6 (0)(3) 十 (0)(2) 十 (3)(6) 18 

得 到 的 结果 不 一 致 。 为 了 得 到 一 致 的 结果 ， 我 们 可 以 对 矩阵 进行 
转 置 。 例 如 ， 为 了 得 到 和 列 矩 阵 相 同 的 结 末 ， 在 进行 行 乍 阵 乘法 时 ， 
对 年 阵 进 行 转 置 ， 得 


下 1 0 0 
[3 2 6|0 1 -3| =[3 2 6|0 1 0 
00 3 2 
(3)(1) + (2)(0) + (6)(2) 
一 [CGO =[15 一 16 18] 
(3)(0) + (2)(0) + (6)(3) 


2 二 (3)(2) + (2)( 一 1) + (6)(3) 
3 2 6|-1 5 -3|= |(3)(-1)+(2)(5)+(60)(-3)| =[22 -11 27] 


(3)(3) 十 (2)( 一 3) 十 16)(4) 
» 3 3 (2)(3) 十 (一 1)(2) 十 (3)(6) 22 
= 2 (一 1)(3) 十 (5)(2) 填 {一 3)(6) —11 
3 一 3 4 6 (3)(3) 十 (一 3){2) 十 14)16) 27 


得 到 的 结果 转换 成 矢量 都 是 (22,-1127)， 是 一 样 的 。 这 是 因为 ， 该 


和 矩阵 是 一 个 对 称 和 矩阵 (symmetric matrix) 。 对 称 和 矩阵 的 转 置 是 其 本 
身 ， 因 此 行 矩 阵 和 列 和 矩阵 不 会 对 结果 产生 影响 。 


kt 
二 一 


第 2 篇 ”初级 篇 


在 学 习 完 基础 篇 后 ， 我 们 就 正式 开始 了 Unity Shader 的 学 习 之 旅 。 
初级 篇 将 会 从 最 简单 的 Shader 开 始 ， 讲 解 Shader 中 基础 的 光照 模型 、 
纹理 和 透明 效果 等 初级 演 染 效果 。 需 要 注意 的 是 ， 我 们 在 初级 篇 中 实 
现 的 Unity Shader 大 多 不 能 直接 用 于 真实 项 目 中 ， 因 为 它们 缺少 了 完整 
的 光照 计算 ， 例 如 阴影 、 光 照 袁 减 等 ， 仅 仅 是 为 了 阐述 一 些 实现 原 
理 。 在 第 9 章 ， 会 给 出 包含 了 完整 光照 计算 的 Unity Shader。 


第 5 章 开始 Unity Shader 学 习 之 旅 


本 章 将 实现 一 个 简单 的 顶点 / 片 元 着 色 郁 ， 并 详细 解释 其 中 每 个 步 
又 的 原理 ， 还 会 给 出 关于 Unity Shader 的 一 些 常用 的 辅助 技巧 等 。 


第 6 章 Unity 中 的 基础 光照 


本 章 将 学 习 如 何在 Shader 中 实现 基本 的 光照 模型 ， 如 漫 反 射 、 高 
光 反 射 等 。 


这 一 章 首 先 介绍 了 渲染 的 实现 原理 ， 并 给 出 了 和 Unity 的 痊 染 顺序 
相关 的 重要 内 容 。 在 了 解 了 这 些 内 容 的 基础 上 ， 我 们 将 学 习 如 何 实 现 
透明 度 测试 和 透明 度 混 合 等 透明 效果 。 


第 5 章 ”开始 Unity Shader 学 习 之 旅 


欢迎 来 到 本 书 的 第 2 篇 一 初级 篇 。 在 基础 篇 中 ， 我 们 学 习 了 演 
染 流水 线 ， 并 给 出 了 Unity Shader 的 基本 概况 ， 同 时 还 打下 了 一 定 的 数 
学 基础 。 从 本 章 开 始 ， 我 们 将 真正 开始 学 习 如 何在 Unity 中 编写 Unity 
Shader ° 


本 章 的 结构 如 下 : 在 5.1 节 ， 我 们 将 给 出 编写 本 书 时 使 用 的 软件 ， 
包括 Unity 的 版 本 等 。 这 是 为 了 让 读者 可 以 在 实践 时 不 会 出 现 因 版 本 不 
同 而 造成 困扰 。 在 5.2 节 ， 我 们 将 看 到 一 个 最 简单 的 顶点 / 片 元 着 色 器 ， 
并 详细 地 解释 这 个 顶点 / 片 元 着 色 器 的 组 成 结构 。5.3 节 将 介绍 Unity 内 置 
的 Unity Shader 文 件 ， 以 及 提供 给 用 户 的 一 些 包含 文件 、 内 置 变量 和 画 
数 等 。5.4 节 则 向 读者 阐述 Unity Shader 中 使 用 的 Cg 语义 ， 这 是 很 多 初学 
者 容易 困惑 的 地 方 。 在 5.5 节 中 ， 我 们 会 介绍 如 何 对 Unity Shader 进 行 调 
试 。5.6 节 将 介绍 平台 差异 对 Unity Shader 的 影响 。 最 后 ，5.7 节 将 给 出 一 
些 在 编写 Unity Shader 时 很 容易 实现 的 优化 技巧 。 为 了 让 读者 养 成 良好 
的 编程 习惯 ， 我 们 在 这 节 也 给 出 了 一 些 建 议 。 


5.1 本 书 使 用 的 软件 和 环境 


本 书 使 用 的 Unity 版 本 是 Unity 5.2.1 免 费 版 。 使 用 更 高 版 本 的 Unity 
通 肖 不 会 有 什么 影响 。 但 如 来 你 打算 使 用 更 低 版 本 的 Unity， 那 么 在 学 
习 本 书 时 可 能 束 会 过 到 一 些 问题 。 例 如 ， 你 发 现 有 些 采 单 或 变量 在 你 
安 痛 的 Unity 中 找 不 到 ， 可 能 吏 是 因为 Unity 版 本 不 同 造成 的 。 绝 大 多 数 


情况 下 ， 本 书 的 代码 和 指令 仍然 可 以 工作 恨 好 ， 但 在 一 些 特殊 情况 
下 ，Unity 可 能 会 更 改 改 层 的 实现 细 市 ， 造 成 同样 的 代码 得 到 不 一 样 的 
效果 (例如 ， 在 非 统 一 缩放 时 对 法 线 进行 变换 ， 详 见 19.3 节 ) 。 还 有 一 
些 问 题 是 Unity 提 供 的 内 置 变 量 、 安 和 函数 ， 例 如 我 们 在 书 中 经 党 会 使 
用 UnityObjectToWorldNormal 内 置 函 数 把 法 线 从 模型 空间 变换 到 世界 衬 
间 中 ， 但 这 个 函数 是 在 Unity 5 中 被 引入 的 ， 因 此 如 果 读 者 使 用 的 是 
Unity 5 之 前 的 版 本 束 会 报错 。 类 似 的 情况 还 有 和 阴影 相关 的 宏和 变量 
等 。 和 Unity 4.x 版 本 相 比 ，Unity 5.x 最 大 的 变化 之 一 就 是 很 多 以 前 只 有 
在 专业 版 才 支 持 的 功能 ， 在 免费 版 也 同样 提供 了 。 因 此 ， 如 果 读 者 使 
用 的 是 Unity 4.x 免 费 版 ， 可 能 会 发 现 本 书 中 的 某 些 示例 无 法 实现 。 


本 书 工程 编写 的 系统 环境 是 Mac OS X 10.9.5。 如 果 读 者 使 用 的 是 
其 他 系统 ， 绝 大 部 分 情况 也 不 会 有 任何 问题 。 但 有 时 会 由 于 图 像 编 程 
接口 的 种 类 和 版 本 不 同 而 有 一 些 差 别 ， 这 是 因为 Mac 使 用 的 图 像 编程 接 
口 是 基 于 OpenGL 的 ， 而 其 他 平台 如 Windows， 可 能 使 用 的 是 DirectX。 
例如 ， 在 OpenGL 中 ， 演 染 纹理 (Render Texture) 的 (0, 0) 点 是 在 左下 
角 ， 而 在 DirectX 中 ，(0, 0) 点 是 在 左上 角 。 在 5.6 节 ， 我 们 将 总 结 一 些 由 
于 平台 而 造成 的 差异 问题 。 


5.2 一 个 最 简单 的 顶 总 / 片 元 着 色 需 


现在 ， 我 们 正式 开始 学 习 如 何 编写 Unity Shader， 更 准确 地 说 是 ， 
学 习 如 何 编写 顶点 / 片 元 着 色 器 。 


5.2.1 顶 护 / 片 元 着 色 器 的 基本 结构 


我 们 在 3.3 节 已 经 看 到 了 Unity Shader 的 基本 结构 。 它 包含 了 
Shader、Properties、SubShader、Faljlback 等 语义 块 。 顶 点 / 片 元 着 色 器 
的 结构 与 之 大 体 类 似 ， 它 的 结构 如 下 : 

Shader "MyShaderName" { 


Properties { 
// 属性 


} 
SubShader { 
// 针对 显卡 A 的 SubShader 
Pass { 
// 设置 泻 染 状态 和 标签 


// 开始 Cg 代码 片段 
CGPROGRAM 

// 该 代码 片段 的 编译 指令 ， 例 如 : 
#pragma vertex Vert 
#pragma fragment frag 


// Cg 代码 写 在 这 里 


ENDCG 


他 设置 


} 
// 其 他 需要 的 Pass 


} 
SubShade 


{ 
// 针对 显卡 B 的 SubShader 
} 


// 上 述 SubShader 都 失败 后 用 于 回调 的 Unity Shader 
Fallback "VertexLit" 


其 中 ， 最 重要 的 部 分 是 Pass 语 义 块 ， 我 们 绝 大 部 分 的 代码 都 是 写 
在 这 个 语义 块 里 面 的 。 下 面 我 们 头 来 创建 一 个 最 简单 的 顶点 / 片 元 着 色 


局 避 
O 


(1) 新 建 一 个 场景 ， 把 它 命名 为 Scene_ 5_2。 在 Unity 5 中 可 以 得 
到 图 5.1 中 的 效果 。 


A 图 5.1 在 Unity 5 中 新 建 一 个 场景 得 到 的 效果 


可 以 看 到 ， 场 景 中 已 经 包含 了 一 个 摄像 机 、 一 个 平行 光 。 而 且 ， 
场景 的 背景 不 是 纯色 ， 而 是 一 个 天 空 盒 子 (Skybox) 。 这 是 因为 在 
Unity 5.x 版 本 中 ， 默 认 的 天 空 盒子 不 为 空 ， 而 是 Unity 内 置 的 一 个 天 空 
盒子 。 为 了 得 到 更 加 原始 的 效果 ， 我 们 选择 去 掉 这 个 天 空 信子 "做 法 
是 ， 在 Unity 的 菜单 中 ， 选 择 Window -> Lighting -> Skybox， 把 该 项 置 
为 空 。 注 意 ， 在 Unity 4.x 版 本 中 ， 设 置 天 空 盒子 的 位 置 与 这 里 并 不 一 
样 。 


(2) 新 建 一 个 Unity Shader， 把 它 命名 为 Chapter5-SimpleShader 。 


(3) 新 建 一 个 材质 ， 把 它 命名 为 SimpleShaderMat。 把 第 2 步 中 新 
建 的 Unity Shader 赋 给 它 。 


(4) 新 建 一 个 球体 ， 拖 鼻 它 的 位 置 以 便 在 Game 祝 图 中 可 以 合适 
地 显示 出 来 。 把 第 3 步 中 新 建 的 材质 拖 息 给 它 。 


(5) 双击 打开 第 2 步 中 创建 的 Unity Shader。 删 除 里 面 的 所 有 代 
码 ， 把 下 面 的 代码 粘贴 进去 : 


Shader "Unity Shaders Book/Chapter 5/Simple Shader™" { 
SubShader { 
Pass { 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


float4 vert(float4 v : POSITION) : SV_POSITION { 
return mul (UNITY_MATRIX_MVP, Vv); 


fixed4 frag() : SV_Target { 
return fixed4(1.0, 1.0, 1.0, 1.0); 


ENDCG 


保存 并 返回 Unity 查 看 结果 。 
最 后 ， 我 们 得 到 的 结果 如 图 5.2 所 示 。 


4 图 5.2 用 一 个 最 简单 的 顶点 / 片 元 着 色 器 得 到 一 个 白色 的 球 


这 是 我 们 遇见 的 第 一 个 真正 意义 上 的 顶点 /请 元 着 色 峰 ， 我 们 有 必 
要 来 详细 地 解释 一 下 它 。 


首先 ， 代 码 的 第 一 行 通过 Shader 语 义 定 义 了 这 个 Unity Shader 的 名 
字 一 一 “Unity Shaders Book/Chapter 5/Simple Shader”。 保持 良好 的 命名 
习惯 有 助 于 我 们 在 为 材质 球 选 择 Shader 时 快速 找到 自 定义 的 Unity 
Shader。 需 要 注意 的 是 ， 在 上 面 的 代码 里 我 们 并 没有 用 到 Properties 语 
义 块 。Properties 语 义 并 不 是 必需 的 ， 我 们 可 以 选择 不 声明 任何 材质 属 
性 。 


然后 ， 我 们 声明 了 SubShader 和 Pass 语 义 块 。 在 本 例 中 ， 我 们 不 需 
要 进行 任何 泻 染 设 置 和 标签 设置 ， 因 此 SubShader 将 使 用 默认 的 泻 染 设 
置 和 标签 设置 。 在 SubShader 语 义 块 中 ， 我 们 定义 了 一 个 Pass， 在 这 个 
Pass 中 我 们 同样 没有 进行 任何 目 定 义 的 泻 染 设置 和 标签 设置 。 


接着 ， 就 是 由 CGPROGRAM 和 ENDCG 所 包围 的 CG 代码 片段 。 这 
是 我 们 的 重点 。 首 先 ， 我 们 直到 了 两 行 非常 重要 的 编译 指令 : 


#pragma fragment frag 
它们 将 告诉 Unity， 哪 个 函数 包含 了 顶点 着 色 器 的 代码 ， 哪 个 函数 
包含 了 片 元 着 色 姨 的 代码 。 更 通用 的 编译 指令 表示 如 下 : 


#pragma vertex name 
#pragma fragment name 


其 中 name 束 是 我 们 指定 的 函数 名 ， 这 两 个 贸 数 的 名 字 不 一 定 是 
vert 和 frag， 它 们 可 以 是 任意 自 定 义 的 合法 函数 名 ， 但 我 们 一 般 使 用 vert 
和 frag 来 定义 这 两 个 函 数 ， 因 为 它们 很 直观 。 


接 下 来 ， 我 们 具体 看 一 下 vert 函 数 的 定义 : 


float4 vert(float4 v : POSITION) : SV_POSITION { 
return mul (UNITY_MATRIX_MVP, v); 


这 就 是 本 例 使 用 的 顶点 着 色 器 代码 ， 它 是 逐 顶 点 执行 的 。vert 函 数 
的 输入 v 包 含 了 这 个 顶点 的 位 置 ， 这 是 通过 POSITION 语 义 指 定 的 。 它 
的 返回 值 是 一 个 float4 类 型 的 变量 ， 它 是 该 顶点 在 裁剪 空间 中 的 位 置 ， 
POSITION 和 SV_POSITION 都 是 Cg/HLSL 中 的 语义 (semantics) ， 它 们 
是 不 可 省 略 的 ， 这 些 语义 将 告诉 系统 用 户 需 要 哪些 输入 值 ， 以 及 用 户 
的 输出 是 什么 。 例 如 这 里 ，POSITION 将 告诉 Unity， 把 模型 的 顶点 坐标 
填充 到 输入 参数 v 中 ，SV_POSITION 将 告诉 Unity， 顶 点 着 色 器 的 输出 是 
裁剪 空间 中 的 顶点 坐标 。 如 采 没 有 这 些 语义 来 限定 输入 和 输出 参数 的 
话 ， 泻 染 器 就 完全 不 知道 用 户 的 输入 输出 是 什么 ， 因 此 就 会 得 到 错误 
的 效果 。 在 5.4 节 中 ， 我 们 将 总 结 这 些 语义 。 在 本 例 中 ， 顶 点 着 色 器 只 
包含 了 一 行 代 码 ， 这 行 代码 读者 应 该 已 经 很 熟悉 了 (起 码 对 这 个 数学 
操作 应 该 很 熟悉 了 ) ， 这 一 步 就 是 把 顶点 坐标 从 模型 空间 转换 到 裁剪 
空间 中 。UNITY_MATRIX_MVP 和 窍 阵 是 Unity 内 置 的 模型 .观察 .投影 矩 
阵 ， 我 们 在 4.8 世 已 经 见 过 它 了 。 


然后 ， 我 们 再 来 看 一 下 frag 函 数 : 


fixed4 frag() : SV_Target { 


return fixed4(1.0, 1.0, 1.0, 1.0); 


在 本 例 中 ，frag 函 数 没 有 任何 输入 。 它 的 输出 是 一 个 fixed4 类 型 的 
变量 ， 并 且 使 用 了 SV_Target 语 义 进行 限定 。SV_Target 也 是 HLSL 中 的 一 
个 系统 语义 ， 它 等 同 于 告诉 泻 染 器 ， 把 用 户 的 输出 颜色 存储 到 一 个 泻 
染 目 标 (render target) 中 ， 这 里 将 输出 到 默认 的 帧 缓存 中 。 片 元 着 色 
器 中 的 代码 很 简单 ， 返 回 了 一 个 表示 白色 的 fixed4 类 型 的 变量 。 片 元 着 
色 器 输出 的 颜色 的 每 个 分 量 范围 在 [0, 1]， 其 中 (0, 0, 0) 表 示 黑 色 ， 而 (1， 
1, 1) 表 示 白 色 。 

至 此 ， 我 们 已 经 对 第 一 个 顶点 / 片 元 着 色 器 进行 了 详细 的 解释 。 但 
是 ， 现 在 得 到 的 效果 实在 是 太 简 单 了 ， 如 何 丰 富 它 呢 ? 下 面 我 们 将 一 
步 步 为 它 添加 更 多 的 内 容 ， 以 得 到 一 个 更 加 具有 实践 意义 的 顶点 / 片 元 
着 色 器 。 


5.2.2 ”模型 数据 从 哪里 来 


在 上 面 的 例子 中 ， 在 顶点 看 色 郁 中 我 们 使 用 POSITION 语义 得 到 了 
模型 的 顶点 位 置 。 那 么 ， 如 琳 我 们 想 要 得 到 更 多 模型 数据 怎么 办 呢 ? 


现在 ， 我 们 想 要 得 到 模型 上 每 个 顶点 的 纹理 坐标 和 法 线 方 向 。 这 
个 需求 是 很 常见 的 ， 我 们 需要 使 用 纹理 坐标 来 访问 纹理 ， 而 法 线 可 用 
于 计算 光照 。 因 此 ， 我 们 需要 为 顶点 着 色 需 定义 一 个 新 的 输入 参数 ， 
这 个 参数 不 再 和 一 个 简单 的 数据 类 型 ， 而 是 一 个 结构 体 。 修 改 后 的 代 
码 如 下 : 


Shader "Unity Shaders Book/Chapter 5/Simple Shader™" { 
SubShader { 
Pass 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


// 使 用 一 个 结构 体 来 定义 顶点 着 色 器 的 输入 
struct a2v 
// POSITION 语义 告诉 Unity， 用 模型 空间 的 顶点 坐标 填充 vertex 


凡 
部 


float4 vertex : POSITION 
// NORMAL 语 义 告诉 Unity， 用 模型 空间 的 法 线 方向 填充 normal1 变 


wl 


float3 normal : NORMAL; 
// TEXCOORD0 语 义 告诉 Unity， 用 模型 的 第 一 套 纹理 坐标 填充 


texcoord 变 量 


float4 texcoord : TEXCOORDO; 
}; 


float4 vert(a2v v) : SV_POSITION { 
// 使 用 v.vertex 来 访问 模型 空间 的 顶点 坐标 
return mul (UNITY_MATRIX_MVP, v.vertex); 


} 


fixed4 frag() : SV_Target { 


} 


ENDCG 


return fixed4(1.0, 1.0, 1.0, 1.0); 


在 上 面 的 代码 中 ， 我 们 声明 了 一 个 新 的 结构 体 a2v， 它 包含 了 顶点 
着 色 器 需要 的 模型 数据 。 在 a2v 的 定义 中 ， 我 们 用 到 了 更 多 Unity 支 持 的 
语义 ， 如 NORMAL 和 TEXCOORD0， 当 它们 作为 顶点 着 色 器 的 输入 时 都 
是 有 特定 含义 的 ， 因 为 Unity 会 根据 这 些 语义 来 填充 这 个 结构 体 。 对 于 
顶点 着 色 器 的 输入 ，Unity 支 持 的 语义 有 : POSITION, TANGENT,， 
NORMAL, TEXCOORDO, TEXCOORD!1, TEXCOORD2, 
TEXCOORD3，COLOR 等 。 


为 了 创建 一 个 自 定 义 的 结构 体 ， 我 们 必须 使 用 如 下 格式 来 定义 
它 : 


struct StructName { 
Type Name : Semantic,; 


Type Name : Semantic,; 


其 中 ， 语 义 古 不 可 以 被 省 略 的 。 在 5.4 太 中， 我 们 将 给 出 这 些 语义 
的 含义 和 用 法 。 


然后 ， 我 们 修改 了 vert 函 数 的 输入 参数 类 型 ， 把 它 设置 为 我 们 新 定 
义 的 结构 体 a2v。 通 过 这 种 自 定 义 结构 体 的 方式 ， 我 们 就 可 以 在 顶点 着 
色 亏 中 访问 模型 数据 。 


读者 :a2v 的 名 字 是 什么 意思 呢 ? 


我 们 : a 表示 应 用 (application) ,Vv 表示 顶点 着 色 器 (vertex 
shader) ，a2v 的 意思 就 是 把 数据 从 应 用 阶段 传递 到 顶点 着 色 器 中 。 


那么 ， 填 充 到 POSITION，TANGENT，NORMAL 这 些 语义 中 的 数据 

究竟 是 从 哪里 来 的 呢 ? 在 Unity 中 ， 它 们 是 由 使 用 该 材质 的 Mesh Render 
组 件 提供 的 。 在 每 帧 调用 Draw Call 的 上 时候，Mesh Render 组 件 会 把 它 负 
责 泻 染 的 模型 数据 发 送 给 Unity Shader。 我 们 知道 ， 一 个 模型 通常 包含 

了 一 组 三 角 面 片 ， 每 个 三 角 面 片 由 3 个 顶点 构成 ， 而 每 个 顶点 义 包 含 了 
一 些 数据 ， 例 如 顶点 位 置 、 法 线 、 切 线 、 纹 理 坐 标 、 顶 点 颜色 等 。 通 
过 上 面 的 方法 ， 我 们 就 可 以 在 顶点 着 色 句 中 访问 顶点 的 这 些 模型 数 
据 。 


5.2.3 ”顶点 着 色 器 和 片 元 着 色 器 之 间 如 何 通信 


在 实践 中 ， 我 们 往往 希望 从 顶点 着 色 器 输出 一 些 数据 ， 例 如 把 模 
型 的 法 线 、 2 中 和 片 
元 着 色 器 之 间 的 通 


为 此 ， 我 们 需要 再 定义 一 个 新 的 结构 体 。 修 改 后 的 代码 如 下 : 


Shader "Unity Shaders Book/Chapter 5/Simple Shader™" { 


SubShader { 
Pass { 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


struct a2v { 
float4 vertex : POSITION; 
float3 normal : NORMAL; 
float4 texcoord : TEXCOORDO; 


}; 


// 使 用 一 个 结构 体 来 定义 顶点 着 色 器 的 输出 
struct v2f { 
// SV_POSITION 语 义 告 诉 Unity，pos 里 包含 了 顶点 在 裁剪 空间 


的 位 置信 息 


float4 pos : SV_POSITION 


// COLORO 语 义 可 以 3 于 存储 颜色 信 | 二 
fixed3 color : COLORO 


}; 


v2f vert(a2v v) { 
// 声明 输出 结构 
v2f oOo; 
0o.pos = mul(UNITY_MATRIX_MVP, Vv.vertex); 
// v.normal 包 含 了 顶点 的 法 线 方向 ， 其 分 量 范围 在 [-1.06，1.0] 
// 下 面 的 代码 把 分 量 范 围 映 射 到 了 [0.0，1.0] 
// 存储 到 o. color 中 传递 给 片 元 着 色 器 
oOo.color = v.normal * 0.5 + fixed3(0.5, 0.5, 0.5); 
return o; 


} 


fixed4 frag(v2f i) : SV_Target { 
// 将 插值 后 的 i .color 显 示 到 屏幕 上 
return fixed4(i.color, 1.0); 


} 
ENDCG 


在 上 面 的 代码 中 ， 我 们 声明 了 一 个 新 的 结构 体 v2f。v2f 用 于 在 顶点 
着 色 器 和 片 元 着 色 器 之 间 传 递 信息 。 同 样 的 ，v2f 中 也 需要 指定 每 个 变 
量 的 语义 。 在 本 例 中 ， 我 们 使 用 了 SV_POSITION 和 COLOR0 语 义 。 顶 点 
着 色 器 的 输出 结构 中 ， 必 须 包 含 一 个 变量 ， 它 的 语义 是 
SV_POSITION。 人 否则， 泻 染 独 将 无 法 得 到 裁 藤 空间 中 的 顶点 坐标 ， 也 
就 无 法 把 顶点 泻 染 到 屏幕 上 。COLOR0 语 义 中 的 数据 则 可 以 由 用 户 自 行 
定义 ， 但 一 般 都 是 存储 颜色 ， 例 如 逐 顶 点 的 漫 反 射 颜 色 或 逐 顶 点 的 高 
光 反 射 颜 色 。 类 似 的 语义 还 有 COLORI 等 ， 具 体 可 以 详 见 5.4 节 。 


至 此 ， 我 们 就 完成 了 顶点 着 色 器 和 厂 元 着 色 器 之 间 的 通信 。 需 要 
注意 的 是 ， 顶 点 着 色 器 是 逐 顶 点 调用 的 ， 而 片 元 着 色 锋 是 逐 片 元 调用 
的 。 扩 元 看 色 融 中 的 输入 实际 上 是 把 顶点 厦 色 万 的 输出 进行 插值 后 得 
到 的 结果 。 


5.2.4 ”如 何 使 用 属性 


在 3.1.1 世 中， 我 们 残 提 到 了 材质 和 Unity Shader 之 则 的 紧密 联系 。 
材质 提供 给 我 们 一 个 可 以 方便 地 调节 Unity Shader 中 参数 的 方式 ， 通 过 
这 些 参数 ， 我 们 可 以 随时 调整 材质 的 效果 。 而 这 些 参 数 就 需要 写 在 
Properties 语 义 块 中 。 


现在 ， 我 们 有 了 新 的 需求 。 我 们 想 要 在 材质 面板 显示 一 个 颜色 拾 
取 器 ， 从 而 可 以 直接 控制 模型 在 屏幕 上 显示 的 颜色 。 为 此 ， 我 们 继续 
修改 上 面 的 代码 。 


Shader "Unity Shaders Book/Chapter 5/Simple Shader™" { 
Properties { 
// 声明 一 个 color 类 型 的 属性 
_Color ("Color Tint", Color) = (1.0,1.0,1.0,1.0) 


} 
SubShader { 
Pass { 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


// 在 Cg 代码 中 ， 我 们 需要 定 》 属性 名 称 和 类 型 都 匹 本 
fixed4 _Color; 


struct a2v { 
float4 vertex : POSITION; 
float3 normal : NORMAL; 
float4 texcoord : TEXCOORDO; 


}; 


struct v2f { 
float4 pos : SV_POSITION; 
fixed3 color : COLORO; 


}; 


v2f vert(a2v v) { 
v2f oOo; 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 
oO.color = v.normal * 0.5 + fixed3(0.5, 0.5, 
return o; 


} 


fixed4 frag(v2f i) : SV_Target { 
fixed3 c = i.color; 
// 使 用 _Color 属 性 来 控制 输出 颜色 
C *= _Color.rgb; 
return fixed4(c, 1.0); 


} 
ENDCG 


在 上 面 的 代码 中 ， 我 们 首先 添加 了 Properties 语 义 块 中 ， 并 在 其 中 
声明 了 一 个 属性 _Color， 它 的 类 型 是 Color， 初 始 值 是 (1.0,1.0,1.0,1.0)， 


对 应 白色 。 We ee 我 们 还 需要 在 Cg 代码 片段 中 
提前 定义 一 个 新 的 变量 ， 这 个 变量 的 名 称 和 类 型 必须 与 Properties 语 义 
块 中 的 属性 定义 相 匹配 


ShaderLab 中 属性 的 类 型 和 Cg 中 变量 的 类 型 之 间 的 匹配 关系 如 表 5.1 
所 示 。 


表 5.1 ShaderLab 属 性 类 型 和 Cg 变量 类 型 的 匹配 关系 


ShaderLab 属 性 类 型 Cg 变量 类 型 


有 时 ， 读 者 可 能 会 发 现在 Cg 变量 前 会 有 一 个 uniform 天 键 字 ， 例 
如 : 


uniform fixed4 _Color; 


uniform 关 键 词 是 Cg 中 修饰 变量 和 参数 的 一 种 修饰 词 ， 它 仅仅 用 于 
提供 一 些 天 于 该 变量 的 初始 值 是 如 何 指定 和 存储 的 相关 信息 (这 和 其 


他 一 些 图 像 编 程 接口 中 的 uniform 关 键 词 的 作用 不 太一 样 ) 。 在 Unity 
Shader 中 ，uniform 天 键 词 是 可 以 省 略 的 。 


5.3 强大 的 援手 : Unity 提 供 的 内 置 文件 和 变量 


上 一 下 讲述 了 如 何在 Unity 中 编写 一 个 基本 的 顶点 / 片 元 春色 郁 的 过 
程 。 顶 点 / 片 元 着 色 的 复杂 之 处 在 于 ， 很 多 事情 都 需要 我 们 “ 杀 力 订 
为 ”， 例 如 我 们 需要 目 己 转换 法 线 方向 ， 目 己 处 理光 照 、 阴 影 等 。 为 了 
方便 开发 着 的 编码 过 程 ，Unity 拓 供 了 很 多 内 荀 文件 ， 这 些 文件 包含 了 
很 多 提前 定义 的 钞 数 、 变 量 和 宏 等 。 如 末 读 考 在 学 习 他 人 编写 的 Unity 
Shader 代 码 时 ， 巡 到 了 一 些 从 未 见 过 的 变量 、 画 数 ， 而 义 无 法 找到 对 应 
的 声明 和 定义 ， 那 么 很 有 可 能 束 是 这 些 代码 使 用 了 Unity 内 置 文件 提供 
的 函数 和 变量 。 


本 下 将 给 出 这 些 文件 和 变量 的 概览 。 
5.3.1 ”内置 的 包含 文件 


包含 文件 (include file) ， 是 类 似 于 C++ 中 头 文件 的 一 种 文件 。 在 
Unity 中 ， 它 们 的 文件 后 缀 是 .cginc。 在 编写 Shader 时 ， 我 们 可 以 使 用 
#include 指 令 把 这 些 文件 包含 进来 ， 这 样 我 们 就 可 以 使 用 Unity 为 我 们 提 
供 的 一 些 非常 有 用 的 变量 和 帮助 函数 。 例 如 ; 


CGPROGRAM 
AR 


#include "UnityCG.cginc" 
/7 


ENDCG 


那么 ， 这 些 文件 在 哪里 呢 ? 我 们 可 以 在 官方 网 站 
(http://unity3d.com/cn/get-unity/download/ archive) 上 选择 和 裁 -> 内 秆 
毒 名 殉 来 直接 下 载 这 些 文件 ， 图 5.3 显 示 了 由 官网 压缩 包 得 到 的 文件 。 


和 图 5.3 Unity 的 内 置 着 色 器 


从 图 5.3 中 可 以 看 出 ， 从 官网 下 载 的 文件 中 包含 了 多 个 文件 夹 。 其 
中 ，CGIncludes 文 件 夹 中 包含 了 所 有 的 内 置 包 含 文件 ;DefaultResources 
文件 夹 中 包含 了 一 些 内 置 组 件 或 功能 所 需要 的 Unity Shader， 例 如 一 些 
GUI 元 素 使 用 的 Shader;，DefaultResourcesExtra 则 包含 了 所 有 Unity 中 内 
置 的 Unity Shader; Editor 文 件 夹 目 前 只 包含 了 一 个 脚本 文件 ， 它 用 于 定 
义 Unity 5 引入 的 Standard Shader 〈 详 见 第 18 章 ) 所 用 的 材质 面板 。 这 些 
文件 都 是 非常 好 的 参考 资料 ， 在 我 们 想 要 学 习 内 置 厦 色 和 侣 的 实现 或 是 
寻找 内 置 画 数 的 实现 时 ， 都 可 以 在 这 里 找到 内 部 实现 。 但 在 本 节 中 ， 
我 们 只 关注 CGIncludes 文 件 夹 下 的 相关 文件 。 


我 们 也 可 以 从 Unity 的 应 用 程序 中 直接 找到 CGIncludes 文 件 夹 。 在 
Mac 上 ， 它 们 的 位 置 
是 : /Applications/Unity/Unity.app/Contents/CGIncludes; 在 Windows 上 ， 
它们 的 位 置 是 ，Unity 的 安装 路 径 /Data/CGIncludes 。 


表 5.2 给 出 了 CGIncludes 中 主要 的 包含 文件 以 及 它们 的 主要 用 处 。 


表 5.2 ”Unity 中 一 些 常用 的 包含 文件 


UnityCG.cginc 包含 了 最 常 使 用 的 帮助 画 数 、 宏 和 结构 体 等 


在 编译 Unity Shader 时 ， 会 被 自动 包含 进来 。 包 含 了 许多 
内 置 的 全 局 变量 ， 如 UNITY_MATRIX_MVP 等 


UnityShaderVariables.cginc 


中 内 置 的 光照 模型 ， 如 果 编 写 的 是 Surface 
#6， 会 自动 包含 进来 


Lighting.cginc 


在 编译 Unity Shader 时 ， 会 被 自动 包含 进来 。 


HLSLSupport.cginc 


于 跨 平 台 编 译 的 宏和 定义 


可 以 看 出 ， 有 一 些 文件 是 即便 我 们 没有 使 用 #include 指 令 ， 它 们 也 
是 会 被 自动 包含 进来 的 ， 例 如 UnityShaderVariables.cginc。 因 此 ， 在 前 
面 的 例子 中 ， 我 们 可 以 直接 使 用 UNITY_MATRIX_MVP 变 量 来 进行 顶 
点 变换 。 除 了 表 5.2 中 列 出 的 包含 文件 外 ，Unity 5 引入 了 许多 新 的 重要 
的 包含 文件 ， 如 UnityStandardBRDF.cginc、UnityStandardCore.cginc 
等 ， 这 些 包 含 文件 用 于 实现 基于 物理 的 泻 染 ， 我 们 会 在 第 18 半 中 再 次 
过 到 它们 。 


UnityCG.cginc 是 我 们 最 常 接 触 的 一 个 包含 文件 。 在 后 面 的 学 习 
中 ， 我 们 将 使 用 很 多 该 文件 提供 的 结构 体 和 函数 ， 为 我 们 的 编写 提供 
方便 。 例 如 ， 我 们 可 以 直接 使 用 UnityCG.cginc 中 预定 义 的 结构 体 作为 
顶点 着 色 器 的 输入 和 输出 。 表 5.3 给 出 了 一 些 结构 体 的 名 称 和 包含 的 变 


三 | 


里 ” 


表 5.3 UnityCG.cginc 中 一 些 常 用 的 结构 体 


加 
可 用 于 顶点 着 色 器 人 ee 四 
appdata_base | We 顶点 位 置 、 顶 点 法 线 、 第 一 组 纹理 4 
的 输入 
本 顶点 位 置 、 顶 点 切线 、 顶 点 法 线 、 第 一 组 纹理 
appdata_tan 从 标 


ee 了 顶点 位 置 、 顶 点 切线 、 顶 点 法 线 、 四 纪 

appdata_fu 

M0 一， | 的 输 多 ) 纹理 坐标 

appdata_img 人 顶点 位 置 、 第 一 组 
可 用 于 顶点 着 色 器 

v2f_img 明 裁剪 空间 中 的 位 置 、 纹 理 坐 
的 输出 


强烈 建议 读者 找到 UnityCG.cginc 文 件 并 查看 上 还 结构 体 的 声明 ， 


这 样 的 过 程 可 以 帮助 我 们 快速 理解 Unity 中 一 些 内 置 变量 的 工作 原理 。 


除了 结构 体外 ，UnityCG.cginc 也 提供 了 一 些 常 用 的 帮助 画 数 。 表 
给 出 了 一 些 函 数 名 和 它们 的 描述 。 


表 5.4 ”UnityCG.cginc 中 一 些 常用 的 帮助 函数 


画 数 名 描述 


float3 WorldSpaceViewDir 


人 输入 一 个 模型 空间 中 的 顶点 位 置 ，j 
该 点 到 摄像 机 的 观察 方向 


float3 ObjSpaceViewDir 输入 一 个 模型 空间 中 的 顶点 位 置 ，3 
(float4 v) 该 点 到 摄像 机 的 观察 方向 


仅 可 用 于 前 向 泻 染 中 。 输 入 一 个 模型 空间 中 的 顶点 位 
置 ， 返回 世界 空间 中 从 该 点 到 光源 的 光照 方向 。 没 有 
被 归 一 化 


float3 WorldSpaceLightDir 
(float4 v) 


仅 可 用 于 前 向 泻 染 中 。 输 入 一 个 模型 空间 中 的 顶点 位 
置 ， 返 回 模型 空间 中 从 该 点 到 光源 的 光照 方向 。 没 有 
被 归 一 化 


float3 ObjSpaceLightDir 
(float4 v) 


float3 
UnityObjectToWorldNormal ”| 把 法 线 方向 从 模型 空间 转换 到 1 


(float3 norm) 


float3 UnityObjectToWorldDir 
(float3 dir) 


把 方向 矢量 从 模型 空间 变换 到 | 


UnityWorldToObjectDir(float3 | 把 方向 矢量 从 世界 空间 变换 到 模型 空间 


我 们 建议 读者 在 UnityCG.cginc 文 件 找到 这 些 函 数 的 定义 ， 并 尝试 
理解 它们 。 一 些 函 数 我 们 完全 可 以 目 己 实 现 ， 例 如 
UnityObjectToWorldDir 和 UnityWorldToObjectDir， 这 两 个 函数 实际 上 就 
是 对 方向 矢量 进行 了 一 次 坐标 空间 变换 。 而 UnityCG.cginc 文 件 可 以 帮 
助 我 们 提高 代码 的 复 用 率 。UnityCG.cginc 还 包含 了 很 多 宏 ， 在 后 面 的 
学 习 中 ， 我 们 就 会 遇 到 它们 。 


5.3.2 ”内 置 的 变量 


我 们 在 4.8 广 给 出 了 一 些 用 于 坐标 变换 和 摄像 机 参数 的 内 置 变量 。 
除 此 之 外 ，Unity 还 提供 了 用 于 访问 时 间 、 光 照 、 筋 效 和 环境 光 等 目的 
的 变量 。 这 些 内 置 变量 大 多 位 于 UnityShader Variables.cginc 中 ， 与 光照 
有 关 的 内 置 变量 还 会 位 于 Lighting.cginc、AutoLight.cginc 等 文件 中 。 当 
我 们 在 后 面 的 学 习 中 遇 到 这 些 变 量 时 ， 再 进行 评 细 的 讲解 。 


5.4 Unity 提 供 的 Cg/HLSL 语 义 


读者 在 平时 的 Shader 学 习 中 可 能 经 常 看 到 ， 在 顶点 着 色 器 和 片 元 着 
色 器 的 输入 输出 变量 后 还 有 一 个 冒号 以 及 一 个 全 部 大 写 的 名 称 ， 例 如 
在 5.2 节 看 到 的 SV_POSITION、POSITION、COLOR0。 这 些 大 写 的 名 字 
是 什么 意思 呢 ? 它 们 有 什么 用 呢 ? 


5.4.1 什么 是 语义 


实际 上 ， 这 些 是 Cg/HLSL 提 供 的 语义 (semantics) 。 如 果 读 者 从 
前 接触 过 Cg/HLSL 编 程 的 话 ， 可 能 对 这 些 语义 很 熟悉 。 读 者 可 以 在 微 
软 的 关于 DirectX 的 文档 (https://msdn.microsoft.com/ en- 


us/library/windows/desktop/bb509647(v=vs.85).aspx#VS) 中 找到 关于 语 
义 的 评 细 说 明 页 面 。 根 据 文 档 我 们 可 以 知道 ， 语 义 实际 上 就 是 一 个 赋 
给 Shader 输 入 和 输出 的 字符 串 ， 这 个 字符 串 表 达 了 这 个 参数 的 含义 。 通 
俗 地 讲 ， 这 些 语义 可 以 让 Shader 知 道 从 哪里 读 取 数据 ， 并 把 数据 输出 到 
哪里 ， 它 们 在 CgHLSL 的 Shader 流 水 线 中 是 不 可 或 缺 的 。 需 要 注意 的 
是 ，Unity 并 没有 文 持 所 有 的 语义 。 


通常 情况 下 ， 这 些 输 入 输出 变量 并 不 需要 有 特别 的 意义 ， 也 就 是 
说 ， 我 们 可 以 目 行 决 定 这 些 变量 的 用 途 。 例 如 在 上 面 的 代码 中 ， 顶 点 
着 色 器 的 输出 结构 体 中 我 们 用 COLOR0 语 义 去 描述 color 变 量 。color 变 
量 本 号 存储 了 什么 ，Shader 流 水 线 并 不 关心 。 


而 Unity 为 了 方便 对 模型 数据 的 传输 ， 对 一 些 语义 进行 了 特别 的 含 
义 规定 。 例 如 ， 在 顶点 着 色 器 的 输入 结构 体 a2v 用 TEXCOORD0 来 描述 
texcoord，Unity 会 识别 TEXCOORD0 语 义 ， 以 把 模型 的 第 一 组 纹理 坐标 
填充 到 texcoord 中 。 需 要 注意 的 是 ， 即 便 语 义 的 名 称 一 样 ， 如 果 出 现 的 
位 置 不 同 ， 舍 义 也 不 同 。 例 如 ，TEXCOORD0 既 可 以 用 于 描述 顶点 着 色 
锅 有 的 输入 结构 体 a2v， 也 可 用 于 搬 述 输出 结构 体 v2f。 但 在 输入 结构 体 
a2Vv 中 ，TEXCOORD0 有 特别 的 含义 ， 即 把 模型 的 第 一 组 纹理 坐标 存储 
在 该 变量 中 ， 而 在 输出 结构 体 v2f 中 ，TEXCOORD0 修 饰 的 变量 含义 就 
可 以 由 我 们 来 决定 。 


在 DirectX 10 以 后 ， 有 了 一 种 新 的 语义 类 型 ， 束 是 系统 数值 语义 
(system-value semantics) 。 这 类 语义 是 以 SV 开头 的 ，SV 代 表 的 含义 
就 是 系统 数值 (system-value) 。 这 些 语义 在 泻 染 流水 线 中 有 特殊 的 含 
义 。 例 如 在 上 面 的 代码 中 ， 我 们 使 用 SV_POSITION 语 义 去 修饰 顶点 着 


色 器 的 输出 变量 pos， 那 么 就 表示 pos 包 含 了 可 用 于 光栅 化 的 变换 后 的 项 
点 坐标 〈 即 齐 次 裁剪 空间 中 的 坐标 ) 。 用 这 些 语义 描述 的 变量 是 不 可 
以 随便 赋值 的 ， 因 为 流水 线 需 要 使 用 它们 来 完成 特定 的 目的 ， 例 如 渔 
染 引 擎 会 把 用 SV_POSITION 修 饰 的 变量 经 过 光栅 化 后 显示 在 屏幕 上 。 
读者 有 时 可 能 会 看 到 同一 个 变量 在 不 同 的 Shader 里 面 使 用 了 不 同 的 语义 
修饰 。 例 如 ， 一 些 Shader 会 使 用 POSITION 而 非 SV_POSITION 来 修饰 顶 
点 着 色 器 的 输出 。SV_POSITION 是 DirectX 10 中 引入 的 系统 数值 语义 ， 
在 绝 大 多 数 平台 上 ， 它 和 POSITION 语义 是 等 价 的 ， 但 在 某 些 平 台 ( 例 
如 索尼 PS4) 上 必须 使 用 SV_POSITION 来 修饰 顶点 着 色 器 的 输出 ， 否 
则 无 法 让 Shader 正 常 工作 。 同 样 的 例子 还 有 COLOR 和 SV_Target 。 
此 ， 为 了 让 我 们 的 Shader 有 更 好 的 跨 平台 性 ， 对 于 这 些 有 特殊 含义 的 变 
量 我们 最 好 使 用 以 SV 开头 的 语义 进行 修饰 。 我 们 在 5.6 节 中 会 总 结 更 多 
这 种 因为 平台 差异 而 造成 的 问题 。 


5.4.2 ”Unity 支 持 的 语义 


表 5.5 忌 结 了 从 应 用 阶段 传递 模型 数据 给 顶点 着色 如 时 Unity 使 用 的 
第 用 语义 。 这 些 语义 里 然 没 有 使 用 SV 开头 ， 但 Unity 内 部 赋予 了 它们 特 
殊 的 含义 。 


表 5.5 ”从 应 用 阶段 传递 模型 数据 给 顶点 着 色 器 时 Unity 支 持 的 常用 语义 


语 


、 


POSITION 模型 空间 中 的 顶点 位 置 ， 通 常 是 float4 类 型 


TANGENT 顶点 切线 ， 通 常 是 float4 类 型 


TEXCOORDn， 如 
TEXCOORD0、 
TEXCOORD1 


该 顶点 的 纹理 坐标 ，TEXCOORD0 表 示 第 一 组 纹理 4 


标 ， 依 此 类 推 。 通 常 是 float2 或 float4 类 型 


顶点 颜色 ， 通 常 是 fixed4 或 float4 类 型 


其 中 TEXCOORDn 中 n 的 数目 是 和 Shader Model 有 关 的 ， 例 如 一 般 
在 Shader Model 2 〈 即 Unity 默 认 编 译 到 的 Shader Model 版 本 ) 和 Shader 
Model 3 中 ，n 等 于 8， 而 在 Shader Model 4 和 Shader Model 5 中 ，n 等 于 
16。 通 常情 况 下 ， 一 个 模型 的 纹理 坐标 组 数 一 般 不 超过 2， 即 我 们 往往 
只 使 用 TEXCOORD0 和 TEXCOORD1。 在 Unity 内 置 的 数据 结构 体 
appdata_full 中 ， 它 最 多 使 用 了 6 个 坐标 纹理 组 。 


表 5.6 总 结 了 从 顶点 着 色 器 阶段 到 片 元 着 色 器 阶段 Unity 支 持 的 常用 
语义 。 


表 5.6 。 ”从 顶点 着 色 器 传递 数据 给 片 元 着 色 器 时 Unity 使 用 的 常用 语义 


语义 撒 。 述 


间 中 的 顶点 坐标 ， 结 构 体 中 必须 包含 一 个 用 该 语义 修 嗓 的 变 


SV_POSITION 


司 于 DirectX 9 中 的 POSITION， 但 最 好 使 用 SV_POSITION 


COLOR1 通常 用 于 输出 第 二 组 顶点 颜色 ， 但 


COLORO 通常 用 于 输出 第 一 组 顶点 颜色 ， 但 


TEXCOORD0 
SS 通常 用 于 输出 纹理 坐标 ,，f 
TEXCOORD7 


上 面 的 语义 中 ， 除 了 SV_POSITION 是 有 特别 含义 外 ， 其 他 语义 对 
变量 的 含义 没有 明确 要 求 ， 也 就 是 说 ， 我 们 可 以 存储 任意 值 到 这 些 语 
义 描 述 变 量 中 。 通 常 ， 如 果 我 们 需要 把 一 些 自 定 义 的 数据 从 顶点 着 色 
怖 传递 给 请 元 着 色 右 ， 一 般 选 用 TEXCOORD0 等 。 


表 5.7 给 出 了 Unity 中 文 持 的 片 元 着 色 郁 的 输出 语义 。 


表 5.7 ” 片 元 着 色 器 输出 时 Unity 支 持 的 常用 语义 


输出 值 将 会 存储 到 演 染 目标 (render target) 中 。 等 同 于 DirectX 9 中 的 


SV_Target 


COLOR 语 义 ， 但 最 好 使 用 SV_Target 


5.4.3 “如何 定义 复杂 的 变量 类 型 


上 面 提 到 的 语义 绝 大 部 分 用 于 描述 标量 或 矢量 类 型 的 变量 ， 例 如 
fixed2、float、float4、fixed4 等 。 下 面 的 代码 给 出 了 一 个 使 用 语义 来 修 
炳 不 同类 型 变量 的 例子 : 


Struct v2f { 


float4 pos : SV_POSITION; 
fixed3 colorg : COLORO; 
fixed4 color1 : COLOR1; 
half Value0 : TEXCOORDO; 
float2 Value1 : TEXCOORD1; 


天 于 何 时 使 用 哪 种 变量 类 型 ， 我 们 会 在 5.7.1 节 给 出 一 些 建 议 。 但 
需要 注意 的 是 ， 一 个 语义 可 以 使 用 的 寄存 器 只 能 处 理 4 个 浮 点 什 
(float) 。 因 此 ， 如 果 我 们 想 要 定义 矩阵 类 型 ， 如 float3x4、float4x4 等 
变量 就 需要 使 用 更 多 的 空间 。 一 种 方法 是 ， 把 这 些 变量 拆 分 成 多 个 变 
量 ， 例 如 对 于 float4x4 的 矩阵 类 型 ， 我 们 可 以 拆 分 成 4 个 float4 类 型 的 变 
量 ， 每 个 变量 存储 了 矩阵 中 的 一 行 数据 。 


5.5 程序 员 的 烦恼 :| Debug 


有 这 样 一 个 笑话 ， 据 说 只 有 程序 员 才 能 看 懂 : 


> 问 : 程序 员 最 讨厌 康 昭 的 哪个 儿子 ? 


> 答 : 出 寝 。 因 为 他 是 八 阿 哥 (谐音: bug) 。 


调试 (debug) ， 大 概 是 所 有 程序 员 的 蛋 梦 。 而 不 幸 的 是 ， 对 一 个 
Shader 进 行 调试 更 是 焉 攀 中 的 墨 梦 。 这 也 是 造成 Shader 难 写 的 原因 之 一 


如 有 条 发 现 得 到 的 效果 不 对 ， 我 们 可 能 要 人 花 非 党 多 的 时 间 来 找到 问 
题 所 在 。 造 成 这 种 现状 的 原因 就 是 在 Shader 中 可 以 选择 的 调试 方法 非常 
有 限 ， 甚 至 连 简单 的 输出 都 不 行 。 


本 节 虽 在 给 出 Unity 中 对 Unity Shader 的 调试 方法 ， 这 主要 包含 了 两 
种 方法 。 


5.5.1 使 用 假 彩色 图 像 


假 彩色 图 像 (false-color image) 指 的 是 用 假 彩色 技术 生成 的 一 种 
图 像 。 与 假 彩色 图 像 对 应 的 是 照片 这 种 真 彩色 图 像 (true-color 
image) 。 一 张 假 彩色 图 像 可 以 用 于 可 视 化 一 些 数据 ， 那 么 如 何 用 它 来 
对 Shader 进 行 调 试 呢 ? 


主要 思想 是 ， 我 们 可 以 把 需要 调试 的 变量 映射 到 [0, 1] 之 间 ， 把 它 
们 作为 颜色 输出 到 屏幕 上 ， 然 后 通过 屏幕 上 显示 的 像素 颜色 来 判断 这 
个 值 旦 否 正 确 。 该 关心 里 可 能 已 经 在 史 哮 : “什么 ? ! 这 方法 也 太原 始 
了 吧 ! ? 没 铺 ， 这 种 方法 得 到 的 调试 信息 很 模糊 ， 能 够 得 到 的 信息 很 有 
限 ， 但 在 很 长 一 段 时 间 内 ， 这 种 方法 的 确 是 唯一 的 可 选 方法 。 


需要 注意 的 是 ， 由 于 颜色 的 分 量 范 围 在 [0, 1]， 因 此 我 们 需要 小 心 
处 理 需 要 调试 的 变量 的 范围 。 如 果 我 们 已 知 它 的 值 域 范 围 ， 可 以 先 把 
它 映射 到 [0, 1] 之 间 再 进行 输出 。 如 果 你 不 知道 一 个 变量 的 范围 (这 往 
往 说 明 你 对 这 个 Shader 中 的 运算 并 不 了 解 ) ， 我 们 就 只 能 不 停 地 实验 。 
一 个 提示 是 ， 颜 色 分 量 中 任何 大 于 1 的 数值 将 会 被 设置 为 1， 而 任何 小 
于 0 的 数值 会 被 设置 为 0。 因此 ， 我 们 可 以 笑 试 使 用 不 同 的 映射 ， 直 到 
发 现 颜色 发 生 了 变化 (这 意味 着 得 到 了 0~1 的 值 ) 。 


如 果 我 们 要 调试 的 数据 是 一 个 一 维 数据 ， 那 么 可 以 选择 一 个 单独 
的 颜色 分 量 (如 R 分 量 ) 进行 输出 ， 而 把 其 他 颜色 分 量 置 为 0。 如 果 是 
多 维 数据 ， 可 以 选择 对 它 的 每 一 个 分 量 单独 调试 ， 或 者 选择 多 个 颜色 
分 量 进 行 输出 。 


作为 实例 ， 下 面 我 们 会 使 用 假 彩 色 图 像 的 方式 来 可 视 化 一 些 模 型 
数据 ， 如 法 线 、 切 线 、 纹 理 坐 标 、 顶 点 颜色 ， 以 及 它们 之 间 的 运算 绪 
果 等 。 我 们 使 用 的 代码 如 下 : 


Shader "Unity Shaders Book/Chapter S/False Color™" { 
SubShader { 
Pass { 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


#include "UnityCG.cginc" 


struct v2f { 
float4 pos : SV_POSITION; 
fixed4 color : COLORO; 


过 


v2f vert(appdata_full v) { 
v2f oOo; 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


// 可 视 化 法 线 方向 
oO.color = fixed4(v.normal * 0.5 + fixed3(0.5, 0.5, 


0.5), 1.0); 


// 可 视 化 切线 方向 
Oo.color = fixed4(v.tangent.xyz * 0.5 + fixed3(0.5, 
0.5, 0.5), 1.0); 


// 可 视 化 副 切线 方向 


fixed3 binormal = cross(v.normal, v.tangent.xyz) * 


Vv.tangent.w; 
oO.color = fixed4(binormal * 0.5 + fixed3(0.5, 0.5, 
0.5), 1.0); 


// 可 视 化 第 一 组 纹理 坐标 


} 


o.color = fixed4(v.texcoord.xy, 0.0, 1.0); 


// 可 视 化 第 二 组 纹理 坐标 
oO.color = fixed4(v.texcoordi1.xy, 0.0, 1.0); 


// 可 视 化 第 一 组 纹理 坐标 的 小 数 部 分 

o.color = frac(v.texcoord); 

if (any(saturate(v.texcoord) - v.texcoord)) { 
oO.color.b = 0.5; 

} 


oO.color.a = 1.0; 


// 可 视 化 第 二 组 纹理 坐标 的 小 数 部 分 

o.color = frac(v.texcoord1); 

if (any(saturate(v.texcoord1) - v.texcoord1)) { 
oO.color.b = 0.5; 

} 


oOo.color.a = 1.0; 


// 可 视 化 顶点 颜色 
//0.color = v.color; 


return o; 


fixed4 frag(v2f i) : SV_Target { 


return i.color; 


ENDCG 


在 上 面 的 代码 中 ， 我 们 使 用 了 Unity 内 置 的 一 个 结构 体 一 一 
appdata_full。 我们 在 5.3 广 讲 过 该 结构 体 的 构成 。 我 们 可 以 在 
UnityCG.cginc 里 找到 它 的 定义 : 


struct appdata full { 
float4 vertex : POSITION; 
float4 tangent : TANGENT; 
float3 normal : NORMAL; 
float4 texcoord : TEXCOORDO; 
float4 texcoord1 : TEXCOORD1; 
float4 texcoord2 : TEXCOORD2; 
float4 texcoord3 : TEXCOORD3; 

#if defined(SHADER_ API_ XBOX360) 


half4 texcoord4 : TEXCOORD4; 

half4 texcoord5 : TEXCOORDS,; 
#endif 

fixed4 color : COLOR; 


可 以 看 出 ，appdata_full 儿 乎 包 售 了 所 有 的 模型 数据 。 


我 们 把 计算 得 到 的 假 彩色 存储 到 了 顶点 着 色 器 的 输出 结构 体 一 一 
v2f 中 的 color 变 量 里 ， 并 且 在 片 元 着 色 器 中 输出 了 这 个 颜色 。 读 者 可 以 
对 其 中 的 代码 添加 或 取消 注释 ， 观 察 不 同 运 算 和 数据 得 到 的 效果 。 图 
5.4 给 出 了 这 些 代 码 得 到 的 显示 效果 。 读 者 可 以 先 目 己 想 一 想 代 码 和 这 
些 效 果 之 间 的 对 应 关系 ， 然 后 再 在 Unity 中 进行 验证 。 


为 了 可 以 得 到 某 点 的 颜色 值 ， 我 们 可 以 使 用 类 似 颜 色 拾 取 句 的 脚 
本 得 到 屏 人 莫 上 某 点 的 RGBA 值 ， 从 而 推断 出 该 点 的 调试 信息 。 在 本 书 的 
附 融 工程 中 ， 读 者 可 以 找到 这 样 一 个 简单 的 实例 脚本 : Assets -> Scripts 
-> Chapter5 -> ColorPicker.cs。 把 该 脚本 拖 虑 到 一 个 摄像 机 上 ， 单 击 运 
行 后 ， 可 以 用 鼠标 单 击 屏幕 ， 以 得 到 该 点 的 颜色 值 ， 如 图 5.5 所 示 。 


> 


图 5.4 ”用 假 彩 色 对 Unity Shader 进 行 调试 


图 5.5 ”使 用 颜色 拾取 器 来 查看 调试 信息 


也 


5.5.2 ”利用 神器 : Visual Studio 


本 节 是 Windows 用 户 的 福音 ，Mac 用 户 的 于 耗 。Visual Studio 作 为 
Windows 系 统 下 的 开发 利器 ， 在 Visual Studio 2012 版 本 中 也 提供 了 对 
Unity Shader 的 调试 功能 


Graphics Debugger。 


通过 Graphics Debugger， 我 们 不 仅 可 以 查看 每 个 像素 的 最 终 颜 色 、 
位 置 等 信息 ， 还 可 以 对 顶点 着 色 器 和 厂 元 着 色 器 进行 单 步调 试 。 具 体 
的 安装 和 使 用 方法 可 以 参见 Unity 官 网 文档 中 使 用 Visual Studio 对 
DirectX 11 的 Shader 进 行 调试 一 文 (http://docs.unity3d.com/Manual/SL- 
Debugging D3D11ShadersWithVS.html) 。 


当然 ， 本 方法 也 有 一 些 限制 。 例 如 ， 我 们 需要 保证 Unity 运 行 在 
DirectX 11 平 台 上 ， 而 且 Graphics Debugger 本 身 存在 一 些 bug。 但 这 无 法 
阻止 我 们 对 它 的 喜爱 之 情 ! 而 Mac 用 户 可 能 就 只 能 无 革 地 有 眼 饮 了 。 


5.5.3 ”最 新 利 右 : 帧 调试 器 


尽管 Mac 用 户 无 法 体验 Visual Studio 的 强大 功能 ， 但 柔 运 的 是 ， 
Unity 5 除了 带 来 全 新 的 UI 系统 外 ， 还 给 我 们 带 来 了 一 个 新 的 针对 渲染 
的 调试 器 一 帧 调试 器 (Frame Debugger) 。 与 其 他 调试 工具 的 复杂 
性 相 比 ，Unity 原 生 的 帧 调试 硕 非 党 简单 快捷 。 我 们 可 以 使 用 它 来 看 到 
游戏 图 像 的 某 一 幅 是 如 何 一 步 步 泻 染 出 来 的 。 


要 使 用 帧 调试 器 ， 我 们 首先 需要 在 Window -> Frame Debugger 中 打 
开 帧 调试 强 窗 口 ， 如 图 5.6 所 示 。 


A 图 5.6 帧 调试 器 


帧 调试 器 可 以 用 于 查看 演 染 该 帧 时 进行 的 各 种 演 染 事件 

(event) ， 这 些 事 件 包 含 了 Draw Call 序 列 ， 也 包括 了 类 似 清空 帧 缓存 
等 操作 。 帧 调试 器 窗口 大 致 可 分 为 3 个 部 分 : 最 上 面 的 区 域 可 以 开局 / 关 
闭 ( 单 击 Enable 按 钮 ) 帧 调试 功能 ， 当 开启 了 帧 调试 时 ， 通 过 移动 窗口 
最 上 方 的 滑动 条 (或 单 击 前 进 和 后 退 按钮 ) ， 我 们 可 以 重 放 这 些 泻 染 
事件 ， 左 侧 的 区 域 显示 了 所 有 事件 的 树 状 图 ， 在 这 个 树 状 图 中 ， 每 个 
叶子 节点 就 是 一 个 事件 ， 而 每 个 父 节 点 的 右 侧 显 示 了 该 六 点 下 的 事件 
数目 。 我 们 可 以 从 事件 的 名 字 了 解 这 个 事件 的 操作 ， 例 如 以 Draw 开 头 
的 事件 通常 就 是 一 个 Draw Call; 当 单 击 了 某 个 事件 时 ， 在 右 侧 的 窗口 
中 就 会 显示 出 该 事件 的 细 方 ， 例 如 几何 图 形 的 细 市 以 及 使 用 了 哪个 
Shader 等 。 同 时 在 Game 视 图 中 我 们 也 可 以 看 到 它 的 效果 。 如 果 该 事件 
是 一 个 Draw Call 并 且 对 应 了 场景 中 的 一 个 GameObject， 那 么 这 个 
GameObject 也 会 在 Hierarchy 视 图 中 被 高 党 显示 出 来 ， 图 5.7 显 示 了 单 击 
泻 染 某 个 对 象 的 深度 图 事件 的 结 
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A 图 5.7 单 击 Knot 的 深度 图 泻 染 事件 ， 在 Game 视 图 会 显示 该 事件 的 效果 ， 在 Hierarchy 视 图 中 
会 高 亮 显 示 Knot 对 象 ， 在 帧 调试 器 的 右 侧 窗口 会 显示 出 该 事件 的 细 方 


如 果 被 选中 的 Draw Call 是 对 一 个 演 染 纹理 (RenderTexture) 的 深 
染 操 作 ， 那 么 这 个 渔 染 纹理 束 会 显示 在 Game 视 图 中 。 而 且 ， 此 时 右 侧 
面板 上 方 的 工具 栏 中 也 会 出 现 更 多 的 选项 ， 例 如 在 Game 视 图 中 单独 显 
示 R、G、B 和 A 通道 


Unity 5 提供 的 帧 调试 右 实 际 上 并 没有 实现 一 个 真正 的 帧 拾取 
(frame capture) 的 功能 ， 而 是 仅仅 使 用 停止 泻 染 的 方法 来 查看 泻 染 事 
件 的 结果 。 例 如 ， 如 果 我 们 想 要 查看 第 4 个 Draw Call 的 结 采 ， 那 么 帧 调 
试 器 就 会 在 第 4 个 Draw Call 调 用 完毕 后 停止 渲染 。 这 种 方法 虽然 简单 ， 


但 得 到 的 信息 也 很 有 限 。 如 果 读 者 想 要 获取 更 多 的 信息 ， 还 是 需要 使 
用 外 部 工具 ， 例 如 5.5.2 节 中 的 Visual Studio 插 件 ， 或 者 Intel GPA、 
RenderDoc、NVIDIA NSight、AMD GPU PerfStudio 等 工具 。 


5.6 小 心 : 泻 染 平台 的 差异 


Unity 的 优 操 之 一 是 其 强大 的 跨 乎 台 性 一 一 写 一 份 代码 可 以 运行 在 
很 多 平台 上 。 绝 大 多 数 情况 下 ，Unity 为 我 们 隐藏 了 这 些 细节 ， 但 有 些 
时 候 我 们 需要 上 自己 处 理 它们 。 本 市 给 出 了 一 些 常 见 的 因为 平台 不 同 而 
造成 的 差异 。 


5.6.1 演 染 纹理 的 坐标 差异 


在 2.3.4 节 和 4.2.2 末 中， 我 们 都 提 到 过 OpenGL 和 DirectX 的 屏幕 空间 
坐标 的 差异 。 在 水 平方 向 上 ， 两 者 的 数值 变化 方向 是 相同 的 ， 但 在 竖 
直方 向 上 ， 两 者 是 相反 的 。 在 OpenGL (OpenGL ES 也 是 ) 中 ，(0, 0) 点 
对 应 了 屏幕 的 左下 角 ， 而 在 DirectX (Metal 也 是 ) 中 ，(0, 0) 点 对 应 了 左 
上 角 。 图 5.8 可 以 帮助 读者 回忆 它们 之 间 的 这 种 不 同 。 


oY (0， 


OpenGL 进 行 屏 幕 映射 时 
使 用 的 笛 卡 尔 坐标 系 DirectX 进 行 屏幕 映射 时 
使 用 的 笛 卡 尔 坐标 系 
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和 图 5.8 OpenGL 和 DirectX 使 用 了 不 同 的 屏幕 空间 坐标 


需要 注意 的 是 ， 我 们 不 仅 可 以 把 演 染 结果 输出 到 屏幕 上 ， 还 可 以 
输出 到 不 同 的 泻 染 目标 (Render Target) 中 。 这 时 ， 我 们 需要 使 用 演 染 
纹理 (Render Texture) 来 保存 这 些 泻 染 结果 。 我 们 将 在 第 12 章 中 学 习 
如 何 实现 这 样 的 目的 。 


大 多 数 情况 下 ， 这 样 的 差异 并 不 会 对 我 们 造成 任何 影响。 但 当 我 
们 要 使 用 泻 染 到 纹理 技术 ， 把 屏幕 图 像 泻 染 到 一 张 泻 染 纹理 中 时 ， 如 
果 不 采取 任何 措施 的 话 ， 就 会 出 现 纹理 翻 转 的 情况 。 幸 运 的 是 ，Unity 
在 至 后 为 我 们 处 理 了 这 种 翻转 问题 一 一 当 在 DirectX 平 台 上 使 用 泻 染 到 
纹理 技术 时 ，Unity 会 为 我 们 翻转 屏幕 图 像 纹 理 ， 以 便 在 不 同 平台 上 达 
到 一 致 性 。 


在 一 种 特殊 情况 下 Unity 不 会 为 我 们 进行 这 个 翻转 操作 ， 这 种 情况 
就 是 我 们 开启 了 抗 锯齿 〈 在 Edit -> Project Settings -> Quality -> Anti 
Aliasing 中 开启 ) 并 在 此 时 使 用 了 泻 染 到 纹理 技术 。 在 这 种 情况 下 ， 
Unity 首 移 泻 染 得 到 屏幕 图 像 ， 再 由 硬件 进行 抗 锯 痪 处 理 后 ， 得 到 一 张 
泻 染 纹理 来 供 我 们 进行 后 续 处 理 。 此 时 ， 在 DirectX 平 台 下 ， 我 们 得 到 
的 输入 屏幕 图 像 并 不 会 被 Unity 翻 转 ， 也 就 是 说 ， 此 时 对 屏幕 图 像 的 采 
样 坐标 是 需要 符合 DirectX 平 台 规 定 的 。 如 果 我 们 的 屏幕 特效 只 需要 处 
理 一 张 泻 染 图 像 ， 我 们 仍然 不 需要 在 意 纹理 的 翻转 问题 ， 这 是 因为 在 
我 们 调用 Graphics.Blit 函 数 时 ，Unity 已 经 为 我 们 对 屏幕 图 像 的 采样 坐标 
进行 了 处 理 ， 我 们 只 需要 按 正常 的 采样 过 程 处 理 屏幕 图 像 即 可 。 但 如 
果 我 们 需要 同时 处 理 多 张 演 染 图 像 (前 提 是 开启 了 抗 锯 人 次; ， 例 如 需 
要 同时 处 理 屏 幕 图 像 和 法 线 纹 理 ， 这 些 图 像 在 竖 直 方向 的 朝 同 就 可 能 
是 不 同 的 (只 有 在 DirectX 这 样 的 平台 上 才 有 这 样 的 问题 ，。 这 种 时 


候 ， 我 们 惑 需要 自己 在 顶点 着 色 器 中 翻转 某 些 浑 染 纹理 (例如 深度 纹 
理 或 其 他 由 脚本 传递 过 来 的 纹理 ) 的 纵 坐 标 ， 使 之 都 符合 DirectX 平 台 
的 规则 。 例 如 : 


#if UNITY_UV_STARTS_AT_TOP 
if (_MainTex_TexelSize.y < 0) 


UV.y = 1-uv.y; 


#endif 


其 中 ，UNITY_UV_STARTS_AT_TOP 用 于 判断 当前 平台 是 否 是 
DirectX 类 型 的 平台 ， 而 当 在 这 样 的 平台 下 开启 了 抗 锯齿 后 ， 主 纹理 的 
纹 素 大 小 在 竖 直 方向 上 会 变 成 负 值 ， 以 方便 我 们 对 主 纹理 进 行 正确 的 
采样 。 因 此 ， 我 们 可 以 通过 判断 _MainTex_TexelSize.y 是 否 小 于 0 来 检验 
是 否 开启 了 抗 锯 催 。 如 有 果 是 ， 我 们 就 需要 对 除 主 纹理 外 的 其 他 纹理 的 
采样 坐标 进行 坚 直 方向 上 的 翻转 。 我 们 会 在 第 13 章 中 再 次 看 到 上 面 的 
代码 。 


在 本 书 资源 的 项 目 中 ， 我 们 开局 了 抗 锯齿 选项 。 在 第 12 章 中 ,我 
们 将 学 习 一 些 基本 的 屏幕 后 处 理 效 果 。 这 些 效 果 大 多 使 用 了 单 张 屏幕 
图 像 进行 处 理 ， 因 此 我 们 不 需要 考虑 平台 差异 化 的 问题 ， 因 为 Unity 已 
经 在 背后 为 我 们 处 理 过 了 。 但 在 12.5 广 中 ， 我 们 需要 在 一 个 Pass 中 同时 
处 理 屏 幕 图 像 和 提取 得 到 的 亮 部 图 像 来 实现 Bloom 效 采 。 由 于 需要 同时 
处 理 多 张 纹 理 ， 因 此 在 DirectX 这 样 的 平台 下 如 末 开 局 了 抗 呢 上 众 ， 主 纹 
理 和 亮 部 纹理 在 坚 直 方向 上 的 朝向 束 是 不 同 的 ， 我 们 束 需 要 对 亮 部 纹 
理 的 采样 坐标 进行 翻转 。 在 第 13 章 中 ， 我 们 需要 同时 处 理 屏幕 图 像 和 
深度 /法 线 纹理 来 实现 一 些 特殊 的 屏幕 效果 ， 在 这 些 处 理 过 程 中 ， 我 们 
也 和 需要 进行 一 些 平台 差异 化 处 理 。 在 15.3 节 中 ， 尽 管 我 们 也 在 一 个 Pass 
中 同时 处 理 了 屏幕 图 像 、 深 度 纹理 和 一 张 噪声 纹理 ， 但 我 们 只 对 深度 


纹理 的 采样 坐标 进行 了 平台 差异 化 处 理 ， 而 没有 对 噪声 纹理 进行 处 
理 。 这 是 因为 ， 类 似 噪 声 纹 理 的 闭 钱 性 纹理 ， 它 们 在 竖 直方 各 上 的 朝 
回 并 不 是 很 重要 ， 即 便 翻 转 了 效果 往往 也 是 正确 的 ， 因 此 我 们 可 以 不 
对 这 些 纹理 进行 平台 差异 化 处 理 。 

5.6.2 Shader 的 语法 差异 


读者 在 Windows 平 台 下 编译 某 些 在 Mac 平 台 下 工作 恨 好 的 Shader 
时 ， 可 能 会 看 到 类 似 下 面 的 报错 信息 : 


incorrect number of arguments to numeric-type constructor 
(compiling for d3d11) 


或 者 


output parameter 'o' not completely Initialized (compiling for 
d3d11 ) 


上 面 的 报错 都 是 因为 DirectX 9/11 对 Shader 的 语义 更 加 严格 造成 
的 。 例 如 ， 造 成 第 一 个 报错 信息 的 原因 是 ，Shader 中 可 能 存在 下 面 这 样 
的 代码 : 


// Vv 是 float4 类 型 ,但 在 它 的 构造 器 中 我 们 仅 提 供 了 一 个 参数 


float4 v = float4(0.0); 


在 OpenGL 平 台 上 ， 上 面 的 代码 是 合法 的 ， 它 将 得 到 一 个 4 个 分 量 
都 是 0.0 的 float4 类 型 的 变量 。 但 在 DirectX 11 平 台 上 ， 我 们 必须 提供 和 
变量 类 型 相 匹配 的 参数 数目 。 也 了 束 是 说 ， 我 们 应 该 写成 : 


float4 v = float4(0.0, 0.0, 0.0, 0.0); 


而 对 于 第 二 个 报错 信息 ， 往 往 钙 出 现在 表面 着 色 右 中 。 表 面 厦 色 
器 的 顶点 函数 (注意 ， 不 古 顶 点 着 色 器 ) 有 一 个 使 用 了 out 修 饰 符 的 参 
如 琳 出 现 这 样 的 报错 信息 ， 可 能 是 因为 我 们 在 顶点 钞 数 中 没有 对 
文 个 参数 的 所 有 成 员 变 量 都 进行 初始 化 。 我 们 应 该 使 用 类 似 下 面 的 代 

码 来 对 这 些 参数 进行 初始 化 : 


void vert (inout appdata_ full v, out Input o) { 
/ 使 用 Unity 内 置 的 UNITY_INITIALIZE_OUTPUT 宏 对 输出 结构 体 o 进 行 初始 化 
UNITY_ A _OUTPUT( INnput, o); 


// . 


除了 上 述 两 点 语法 不 同 外 ，DirectX 9 / 11 也 不 支持 在 顶点 着 色 器 中 
使 用 tex2D 画 数 。tex2D 是 一 个 对 纹理 进行 采样 的 范 数 ， 我 们 在 后 面 的 
章节 中 将 会 具体 讲 到 。 之 所 以 DirectX 9/ 11 不 支持 顶点 阶段 中 的 tex2D 
运算 ， 是 因为 在 顶点 着 色 器 阶段 Shader 无 法 得 到 UV 偏 导 ， 而 tex2D 画 数 
需要 这 样 的 偏 导 信息 (这 和 纹理 采样 时 使 用 的 数学 运算 有 关 ) 。 如 果 
我 们 的 确 需要 在 顶点 着 色 器 中 访问 纹理 ， 需 要 使 用 tex2Dlod 画 数 来 替 
代 ， 如 : 


tex2Dlod(tex, float4(uv, 0, 0)). 


而 且 我 们 还 需要 添加 #pragma target 3.0， 因 为 tex2Dlod 是 Shader 
Model 3.0 中 的 特性 


5.6.3 “Shader 的 语义 差异 


我 们 在 5.4 节 讲 到 了 Shader 中 的 语义 是 什么 ， 其 中 我 们 讲 到 了 一 些 
语义 在 某 些 平台 下 是 等 价 的 ， 例 如 SV_POSITION 和 POSITION 。 但 在 另 
一 些 平台 上 ， 这 些 语义 是 不 等 价 的 。 为 了 让 Shader 能 够 在 所 有 平台 上 正 


利 工 作 ， 我 们 应 该 尽 可 能 使 用 下 面 的 语义 来 搞 述 Shader 的 输入 输出 变 


= 


里 ” 


。 使 用 SV_POSITION 来 描述 顶点 着 色 顺 输出 的 顶点 位 置 。 一 些 Shader 
使 用 了 POSITION 语义 ， 但 这 些 Shader 无 法 在 索尼 PS4 平 台 上 或 使 用 
了 细 分 着 色 器 的 情况 下 正常 工作 。 

。 使 用 SV_Turget 来 描述 片 元 着 色 器 的 输出 颜色 。 一 些 Shader 使 用 了 
COLOR 或 者 COLOR0 语 义 ， 同 样 的 ， 这 些 Shader 无 法 在 索尼 PS4 上 
正常 工作 。 


5.6.4 ”其 他 平台 差异 


本 书 只 给 出 了 一 些 最 常见 的 平台 差异 造成 的 问题 ， 还 有 一 些 差 
不 再 列举 。 如 果 读 者 发 现 一 些 Shader 在 平台 A 下 工作 良好 ， 和 
下 出 现 了 问题 ， 可 以 去 Unity 官 方 文档 (http://docs. 
unity3d.com/Manual/SL-PlatformDifferences.html) 中 寻找 更 多 的 资料 。 


5.7 Shader 整 清 之 道 


在 本 章 的 最 后 ， 我 们 给 出 一 些 关 于 如 何 规范 Shader 代 码 的 建议 。 当 
然 ， 这 些 建议 并 不 是 绝对 和 Es a sent 
写 出 规范 的 代码 不 仅 是 让 代码 变 懂 而 已 ， 更 重要 的 是 ， 养 成 
这 些 习 惯 有 助 于 我 们 写 出 高 en 


5.7.1 ”float、half 还 是 fixed 


在 本 书 中 ， 我 们 使 用 Cg/HLSL 来 编写 Unity Shader 中 的 代码 。 而 在 
Cg/HLSL 中 ， 有 3 种 精度 的 数值 类 型 float，half 和 和 fixed。 这 些 精度 将 


决定 计算 结果 的 数值 范围 。 表 5.8 给 出 了 这 3 种 精度 在 通常 情况 下 的 数值 
范围 。 


表 5.8 ”Cg/HLSL 中 3 种 精度 的 数值 类 型 


围 是 -60 000~+60 000 


澡 使 用 11 位 来 存储 ， 精 度 范 围 是 -2.0 一 +2.0 


上 面 的 精度 范围 并 不 是 绝对 正确 的 ， 尤 其 是 在 不 同 平台 和 GPU 
上 ， 它 们 实际 的 精度 可 能 和 上 面 给 出 的 范围 不 一 致 。 通 常 来 讲 。 


大 多 数 现代 的 桌面 GPU 会 把 所 有 计算 都 按 最 高 的 浮 点 精度 进行 计 

算 ， 也 就 是 说 ，float、half、fixed 在 这 些 平 台 上 实际 是 等 价 的 。 这 
意味 着 ， 我 们 在 PC 上 很 难看 出 因为 half 和 fixed 精 度 而 带 来 的 不 同 。 
但 在 移动 平台 的 GPU 上 ， 它 们 的 确 会 有 不 同 的 精度 范围 ， 而 且 不 

同 精度 的 浮 点 值 的 运算 速度 也 会 有 所 差异 。 因 此 ， 我 们 应 该 确保 

在 真正 的 移动 平台 上 验证 我 们 的 Shader 。 

fixed 精 度 实 际 上 只 在 一 些 较 旧 的 移动 平台 上 有 用 ， 在 大 多 数 现代 

的 GPU 上 ， 它 们 内 部 把 fixed 和 half 当 成 同等 精度 来 对 待 。 


尽管 有 上 面 的 不 同 ， 但 一 个 基本 建议 是 ， 尽 可 能 使 用 精度 较 低 的 
类 型 ， 因 为 这 可 以 优化 Shader 的 性 能 ， 这 一 点 在 移动 平台 上 尤其 重要 。 
从 它们 大 体 的 值 域 范围 来 看 ， 我 们 可 以 使 用 fixed 类 型 来 存储 颜色 和 单 
位 天 量 ， 如 条 要 存储 更 大 范围 的 数据 可 以 选择 half 类 型 ， 最 才情 况 下 再 
选择 使 用 float。 如 采 我 们 的 目标 平台 是 移动 平台 ， 一 定 要 确保 在 真实 的 
手机 上 测试 我 们 的 Shader， 这 一 点 非常 重要 。 天 于 移动 平台 的 优化 技 
术 ， 读 者 可 以 在 第 16 章 中 找到 更 多 内 容 。 


5.7.2 ”规范 语法 


在 5.6.2 节 ， 我 们 提 到 DirectX 平 台 对 Shader 的 语义 有 更 加 严格 的 要 
求 。 这 意味 着 ， 如 果 我 们 要 发 布 到 DirectX 平 台 上 就 需要 使 用 更 严格 的 
语法 。 例 如 ， 使 用 和 变量 类 型 相 匹配 的 参数 数目 来 对 变量 进行 初始 
化 。 
5.7.3 ”避免 不 必要 的 计算 

如 果 我 们 毫 无 节制 地 在 Shader (尤其 是 片 元 着 色 器 ) 中 进行 了 大 量 
计算 ， 那 么 我 们 可 能 很 快 就 会 收 到 Unity 的 错误 提示 : 

或 


Arithmetic instruction limit of 64 exceeded; 65 arithmetic 


instructions needed to compile program 


出 现 这 些 错 误 信息 大 多 是 因为 我 们 在 Shader 中 进行 了 过 多 的 运算 ， 
使 得 需要 的 临时 寄存 器 数目 或 指令 数目 超过 了 当前 可 文 持 的 数目 。 读 


者 需要 知道 
临时 寄存 器 和 指令 


， 不 同 的 Shader Target、 不 同 的 着 色 妖 阶段 ， 
数目 都 是 不 同 的 


我 们 可 使 用 的 
通常 ， 我 们 可 以 指定 更 高 等 级 的 Shader Target 来 消除 这 些 错 
误 。 表 5.9 给 出 了 Unity 目 前 文 持 的 一 些 Shader Target 。 
表 5.9 


Unity 支 持 的 Shader Target 


默认 的 Shader Target 等 级 。 相 当 卫 
target 2.0 | 持 对 顶点 纹理 的 采样 ， 


FDirect3D 9 上 的 Shader Model 2.0， 不 支 
不 文 持 显 式 的 LOD 纹 理 采 术 


半 和 化 


人 


FDirect3D 9 上 的 Shader Model 3.0， 支 持 对 顶点 纹理 的 采 相 


FDirect3D 10 上 的 Shader Model 4.0， 支 持 几 何 着 色 器 印 


FDirect3D 11 上 的 Shader Model 5.0 


种 类 也 不 同 ， 读 着 可 以 在 官方 手册 上 找到 更 为 详细 的 


要 注意 的 是 ， 由 于 Unity 版 本 的 不 同 ，Unity 文 持 的 Shader Target 
车 官 
读者 : 什么 是 Shader Model 呢 


人 给 


我 们 : Shader Model 是 由 微软 提出 的 一 套 规 范 ， 通 俗 地 理解 就 是 它 
们 决定 了 Shader 中 各 个 特性 (feature) 的 能 力 (capability) 。 这 些 特性 
和 人 能力 体 现在 Shader 能 使 用 的 运算 指令 数目 、 寄 存 器 个 数 等 各 个 方面 。 
Shader Model 等 级 越 高 ，Shader 的 能 力 就 越 大 。 具 体 的 细节 读者 可 以 参 
见 本 章 的 扩展 阅读 部 分 。 


虽然 更 高 等 级 的 Shader Target 可 以 让 我 们 使 用 更 多 的 临时 寄存 器 和 
运算 指令 ， 但 一 个 更 好 的 方法 是 尽 可 能 减少 Shader 中 的 运算 ， 或 者 通过 
预计 算 的 方式 来 提供 更 多 的 数据 。 


5.7.4” 慎 用 分 支 和 循环 语句 


在 我 们 学 习 第 一 门 语言 的 课 上 ， 类 似 分 文 、 循 环 语句 这 样 的 流程 
控制 语句 是 最 基本 的 语法 之 一 。 但 在 编写 Shader 的 时 候 ， 我 们 要 对 它们 
格外 小 心 。 


在 最 开始 ，GPU 是 不 支持 在 顶点 着 色 器 和 片 元 着 色 器 中 使 用 流程 
控制 语句 的 。 随 着 GPU 的 发 展 ， 我 们 现在 已 经 可 以 使 用 if-else、for 和 
while 这 种 流程 控制 指令 了 。 但 是 ， 它 们 在 GPU 上 的 实现 和 在 CPU 上 有 
很 大 的 不 同 。 深 究 这 些 指 令 的 的 层 实现 不 在 本 书 的 讨论 范围 内 ， 读 者 
可 以 在 本 章 的 扩展 阅读 中 找到 更 多 的 内 容 。 大 体 来 说 ，GPU 使 用 了 不 
同 于 CPU 的 技术 来 实现 分 文 语句 ， 在 最 坏 的 情况 下 ， 我 们 论 在 一 个 分 
文 语句 的 时 间 相当 于 运行 了 所 有 分 文 语句 的 时 间 。 因 此 ， 我 们 不 臂 励 
在 Shader 中 使 用 流程 控制 语句 ， 因 为 它们 会 降低 GPU 的 并 行 处 理 操作 

(尽管 在 现代 的 GPU 上 已 经 有 了 改进 ) 。 


如 条 我 们 在 Shader 中 使 用 了 大 量 的 流程 控制 语句 ， 那 么 这 个 Shader 
的 性 能 可 能 会 成 售 下 降 。 一 个 解决 方法 是 ， 我 们 应 该 尽量 把 计算 向 流 
水 线 上 吴 移 动 ， 例 如 把 放 在 片 元 奢 色 右 中 的 计算 放 到 顶点 着色 右 中 ， 
或 者 直接 在 CPU 中 进行 预计 算 ， 再 把 结果 传递 给 Shader。 当 然 ， 有 时 我 
们 不 可 避免 地 要 使 用 分 文 语句 来 进行 运算 ， 那 么 一 些 建议 是 : 


分 文 判断 语句 中 使 用 的 条 件 变 量 最 好 是 利 数 ， 即 在 Shader 运 行 过 程 
Hh 

每 个 分 文中 包含 的 操作 指令 数 尽 可 能 少 ; 

分 文 的 敬 到 层 数 尽 可 能 少 。 


5.7.5 ”不 要 除 以 0 


虽然 在 用 类 似 C# 等 高 级 语言 进行 编程 的 时 候 ， 我 们 会 谨 记 不 要 除 
以 0 这 个 基本 常识 (就 算 你 没 这 么 做 ， 编 辑 絮 可 能 也 会 报错 ) ， 但 有 时 
在 编写 Shader 的 时 候 我 们 会 忽略 这 个 问题 。 


例如 ， 我 们 在 Shader 里 写 下 如 下 代码 : 


fixed4 frag(v2f i) : SV_Target 
{ 


return fixed4(0.0/0.0,0.0/0.0, 0.0/0.0, 1.0); 


这 样 代码 的 结果 往往 是 不 可 预测 的 。 在 某 些 渔 染 平台 上 ， 上 面 的 
代码 不 会 造成 Shader 的 有 衣 浇 ， 但 即便 不 会 朋 浊 得 到 的 结 来 也 是 不 确定 
的 ， 有 些 会 得 到 白色 (由 无 限 大 截取 到 1.0) ， 有 些 会 得 到 黑色 ， 但 在 
另 一 些 平 台 上 ， 我 们 的 Shader 可 能 融会 直接 裔 误 。 因 此 ， 即 便 在 开发 游 


戏 的 平台 上 ， 我 们 看 到 的 结 采 可 能 旦 符合 预期 的 ， 但 在 目标 平台 上 可 
能 就 会 出 现 问题 。 


一 个 解决 方法 是 ， 对 那些 除数 可 能 为 0 的 情况 ， 强 制 截取 到 非 0 范 
围 。 在 一 些 资 料 中 ， 读 者 可 能 也 会 看 到 使 用 if 语句 来 判断 除数 是 否 为 0 
的 例子 。 男 一 个 方法 是 ， 使 用 一 个 很 小 的 浮 点 值 ， 例 如 0.000001 来 保证 
分 母 大 于 0 (前 提 是 原始 数值 是 非 负 数 ) 


5.8 扩展 阅读 


读者 可 以 在 《GPU 精粹 2》 中 的 GPU 流程 控制 一 章 册 中 更 加 深入 地 
了 解 为 什么 流程 控制 语句 在 GPU 上 会 影响 性 能 。 在 5.7.3 节 我 们 提 到 了 
Shader 中 临时 寄存 器 数目 和 运算 指令 都 有 限制 ， 实 际 上 Shader Model 对 
顶点 着 色 器 和 片 元 着 色 器 中 使 用 的 指令 数 、 临 时 寄存 器 、 常 量 寄存 
器 、 输 入 /输出 寄存 器 、 纹 理 等 数目 都 进行 了 规定 。 读 者 可 以 在 Wiki 的 
相关 资料 中 和 HLSL 的 手册 Sl 中 找到 更 多 的 内 容 。 


[1] Mark Harris, Ian Buck. "GPU Flow-Control Idioms." Im GPU Gems 
2. 中 译本 :GPU 精粹 2， 高 性 能 图 形 芯片 和 通用 计算 编程 技巧 ， 法 尔 
译 ， 清 华 大 学 出 版 社 ，2007 年 。 


[2] High-Level Shading Language，Wiki 
(https://en.wikipedia.org/wiki/High-Level_Shading Language) 


[3] Shader Models vs Shader Profiles，HLSL 手 册 
(https://msdn.microsoft.com/en-us/library/ 


windows/desktop/bb509626(v=vs.85).aspx) 


第 6 章 Unity 中 的 基础 光照 


泻 染 总 是 围绕 着 一 个 基础 问题 : 我 们 如 何 决 定 一 个 像素 的 颜色 ? 
从 宏观 上 来 说 ， 泻 染 包 含 了 两 大 部 分 : 决定 一 个 像素 的 可 见 性 ， 决 定 
这 个 像素 上 的 光照 计算 。 而 光照 模型 就 是 用 于 决定 在 一 个 像素 上 进行 
经 样 的 光照 计算 。 


我 们 首先 会 在 6.1 市 介绍 在 真实 世界 中 ， 我 们 苹 如 何 看 到 一 个 物体 
的 ， 以 此 来 帮助 读者 理解 光照 模型 背后 的 原理 。 随 后 在 6.2 市 中 ， 我 们 
将 解释 什么 是 标准 光照 模型 ， 以 及 如 何在 Unity Shader 中 实现 标准 光照 
模型 。6.3 志 介绍 如 何 计 算 光 照 模型 中 的 环境 区 和 目 发 光 部 分 。 在 6.47 
和 6.5 世 中 ， 我 们 将 学 习 两 种 最 基本 的 光照 模型 ， 并 比较 逐 顶 点 和 逐 像 
素 光 照 的 区 别 。 最 后 ， 在 6.6 节 中 介绍 如 何 使 用 Unity 的 内 置 函 数 来 帮助 
我 们 实现 这 些 光 照 模 型 。 


需要 提醒 读者 注意 的 是 ， 本 章 着 重 讲述 光照 模型 的 原理 ， 因 此 实 
现 的 Shader 往 往 并 不 能 直接 应 用 到 实际 项 目 中 (直接 使 用 会 缺少 阴影 、 
光照 衰减 等 效果 ) 。 我 们 会 在 9.5 节 给 出 包含 了 完整 光照 模型 的 可 真正 
使 用 的 Unity Shader 。 


6.1 我 们 是 如 何 看 到 这 个 世界 的 


我 们 可 能 第 常会 问 类 似 这 样 的 问题 “这 个 物体 是 什么 颜色 
的 ? ”如 采 读 者 对 小 学 的 自然 课 还 有 印象 的 话 ， 可 能 还 会 记得 这 个 问题 


征 没 有 意义 的 : 当 我 们 在 描述 “这 个 物体 是 红色 的 时， 实际 上 有 是 因为 
这 个 物体 会 反射 更 多 的 红 光 波长 ， 而 吸收 了 其 他 波长 。 而 如 采 一 个 物 
体 在 我 们 看 来 是 黑色 的 ， 实 际 上 有 是 因为 它 吸收 了 绝 大 部 分 的 波长 。 这 
种 物理 现象 就 是 本 世 需 要 探讨 的 内 容 。 


通常 来 讲 ， 我 们 要 模拟 真实 的 光照 环境 来 生成 一 张 图 像 ， 需 要 考 
虑 3 种 物理 现象 。 


。 首 先 ， 光 线 从 光源 (light source) 中 被 发 射出 来 。 

。 然 后， 光线 和 场景 中 的 一 些 物体 相交 : 一 些 光 线 被 物体 吸收 了 ， 
而 另 一 些 光 线 被 散射 到 其 他 方向 。 

。 最后， 摄像 机 吸收 了 一 些 光 ， 产 生 了 一 张 图 像 。 


下 面 ， 我 们 将 对 每 个 部 分 进行 更 加 详细 的 解释 。 
6.1.1 ”光源 


光 不 是 从 石头 里 距 出 来 的 ， 而 是 由 光源 发 射出 来 的 。 在 实时 演 染 
中 ， 我 们 通常 把 光源 当成 一 个 没有 体积 的 点 ， 用 ;来 表示 它 的 方向 。 那 
么 ， 我 们 如 何 测 量 一 个 光源 发 射出 了 多 少 光 呢 ? 也 融 是 说 ， 我 们 如 何 
量化 光 呢 ?在 光学 里 ， 我 们 使 用 辐 照 度 (irradiance) 来 量化 光 。 对 于 
平行 光 来 说 ， 它 的 辐 照 度 可 通过 计算 在 垂直 于 ;的 单位 面积 上 单位 时 间 
内 罕 过 的 能 量 来 得 到 。 在 计算 光照 模型 时 ， 我 们 需要 知道 一 个 物体 表 
面 的 辐 照 度 ， 而 物体 表面 往往 是 和 1 不 垂直 的 ， 那 么 如 何 计算 这 样 的 表 
面 的 辐 照度 呢 ? 我 们 可 以 使 用 光源 方向 /和 表面 法 线 n 之 间 的 夹 角 的 余弦 
值 来 得 到 。 需 要 注意 的 是 ， 这 里 默认 方向 矢量 的 模 都 为 1。 图 6.1 显 示 了 
使 用 余弦 值 来 计算 的 原因 。 


d/cosO 


A 图 6.1 在 左 图 中 ， 光 是 和 王 直 照 尉 到 物体 表面 ， 因 此 光线 之 间 的 垂直 距离 保持 不 变 ， 而 在 石 
图 中 ， 光 是 斜 着 照 财 到 物体 表面 ， 在 物体 表面 光线 之 间 的 距离 是 d/cos6， 因 此 单位 面积 上 接收 
到 的 光线 数目 要 少 于 左 图 


因为 辐 照 度 是 和 照射 到 物体 表面 时 光线 之 间 的 距离 drcos6 成 反比 
的 ， 因 此 辐 照 度 就 和 cos0 成 正比 。cos9 可 以 使 用 光源 方向 1 和 表面 法 线 
n 的 点 积 来 得 到 。 这 就 是 使 用 点 积 来 计算 辐 照 度 的 由 来 。 


6.1.2 ”吸收 和 散射 


光线 由 光源 发 射出 来 后 ， 吏 会 与 一 些 物 体 相 区。 通 锅 ， 相 交 的 结 
果 有 两 个 : 散射 (scattering) 和 吸收 (absorption) 。 


散射 只 改变 光线 的 方向 ， 但 不 改变 光线 的 密度 和 颜色 。 而 吸收 只 
改变 光线 的 密度 和 颜色 ， 但 不 改变 光线 的 方向 。 光 线 在 物体 表面 经 过 
散射 后 ， 有 两 种 方向 : 一 种 将 会 散射 到 物体 内 部 ， 这 种 现象 被 称 为 折 
射 (refraction) 或 透射 (transmission) ; 另 一 种 将 会 散射 到 外 部 ， 这 
种 现象 被 称 为 反射 (reflection) 。 对 于 不 透明 物体 ， 折 射 进入 物体 内 
部 的 光线 还 会 继续 与 内 部 的 颗粒 进行 相交 ， 其 中 一 些 光 线 最 后 会 重新 
发 射出 物体 表面 ， 而 另 一 些 则 被 物体 吸收 。 那 些 从 物体 表面 重新 发 身 


出 的 区 线 将 具有 和 入 射 光 线 不 同 的 方 同 分 布 和 颜色 。 疼 6.2 给 出 了 这 样 
的 一 个 例子 。 
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A 图 6.2 ”散射 时 ， 光 线 会 发 生 折 射 和 反射 现象 。 对 于 不 透明 物体 ， 折 射 的 光线 会 在 物体 内 部 
继续 传播 ， 最 终 有 一 部 分 光线 会 重新 从 物体 表面 被 发 射出 去 


为 了 区 分 这 两 种 不 同 的 衣 射 方向 ， 我 们 在 光照 模型 中 使 用 了 不 同 
的 部 分 来 计算 它们 : 高 光 反 射 (specular) 部 分 表示 物体 表面 是 如 何 反 
射 光线 的 ， 而 漫 反射 〈diffuse) 部 分 则 表示 有 多 少 光线 会 被 折射 、 吸 
收 和 散射 出 表面 。 根 据 入 射 光 线 的 数量 和 方向 ， 我 们 可 以 计算 出 射 光 
线 的 数量 和 方向 ， 我 们 通常 使 用 出 射 度 (exitance) 来 描述 它 。 辐 照度 
和 出 射 度 之 间 是 满足 线性 关系 的 ， 而 它们 之 间 的 比值 束 是 材质 的 漫 反 
射 和 高 光 反 射 属性 。 


在 本 章 中 ， 我 们 假设 漫 反 射 部 分 是 没有 方向 性 的 ， 也 束 是 说 ， 光 
线 在 所 有 方向 上 是 平均 分 布 的 。 同 时 ， 我 们 也 只 考虑 某 一 个 特定 方向 
上 的 高 光 反 射 。 


6.1.3 着色 


着 色 (shading) 指 的 是 ， 根 据 材 质 属性 《如 漫 反 射 属 性 等 ) 、 光 
源 信息 《如 光源 方向 、 辐 照度 等 ) ， 使 用 一 个 等 式 去 计算 沿 某 个 观察 
方向 的 出 射 度 的 过 程 。 我 们 也 把 这 个 等 式 称 为 光照 模型 (Lighting 
Model) 。 不 同 的 光照 模型 有 不 同 的 目的 。 例 如 ， 一 些 用 于 描述 粗糙 的 
物体 表面 ， 一 些 用 于 摘 述 金属 表面 等 。 


6.1.4 BRDEF 光 照 模 型 


我 们 已 经 了 解 了 光线 在 和 物体 表面 相交 时 会 发 生 哪些 现象 。 当 已 
知 光 源 位 置 和 方向 、 视 角 方向 时 ， 我 们 就 需要 知道 一 个 表面 是 如 何 和 
光照 进行 交互 的 。 例 如 ， 当 光线 从 某 个 方 问 照射 到 一 个 表面 时 ， 有 多 
少 光 线 被 反射 ? 反射 的 方向 有 哪些 ? 而 BRDF (Bidirectional 
Reflectance Distribution Function) 就 是 用 来 回答 这 些 问 题 的 。 当 给 定 
模型 表面 上 的 一 个 点 时 ，BRDF 包 含 了 对 该 点 外 观 的 完整 的 搞 述 。 在 图 
形 学 中 ，BRDF 大 多 使 用 一 个 数学 公式 来 表示 ， 并 且 提 供 了 一 些 参数 来 
调整 材质 属性 。 通 俗 来 讲 ， 当 给 定 入 射 光 线 的 方向 和 辐 照 度 后 ，BRDEF 
可 以 给 出 在 某 个 出 射 方向 上 的 光照 能 量 分 布 。 本 章 涉及 的 BRDE 都 是 对 
真实 场景 进行 理想 化 和 简化 后 的 模型 ， 也 束 是 说 ， 它 们 并 不 能 真实 地 
反映 物体 和 光线 之 间 的 交互 ， 这 些 光 照 模型 被 称 为 是 经 验 模 型 。 尽 管 
如 此 ， 这 些 经 验 模型 仍然 在 实时 渲染 领域 被 应 用 了 多 年 。 读 者 可 以 从 
邓 恩 的 著作 《3D 数 学 基础 : 图 形 与 游戏 开发 》 (英文 名 : 《3D Math 
Primer For Graphics And Game Development》) 中 提 到 的 一 句 名 言 来 体 
会 这 其 中 的 原因 。 


计算 机 图 形 学 的 第 一 定律 :如果 它 看 起 来 是 对 的 ， 那 么 它 束 古 对 
[ys 


然而 ， 有 时 我 们 布 望 可 以 更 加 真实 地 模拟 光 和 物体 的 交互 ， 这 束 
出 现 了 基于 物理 的 BRDF 模 型 ， 我 们 会 在 第 18 章 基于 物理 的 泻 染 中 看 到 
这 些 更 加 复杂 的 光照 模型 。 


6.2 标准 光照 模型 


虽然 光照 模型 有 很 多 种 类 ， 但 在 年 期 的 游戏 引擎 中 往往 只 使 用 一 
个 光照 模型 ， 这 个 模型 被 称 为 标准 光照 模型 。 实 际 上 ， 在 BRDF 理 论 被 
提出 之 前 ， 标 准 光 照 模型 就 已 经 被 广泛 使 用 了 。 


在 1973U 年 ， 著 名 学 者 裴 祥 风 (Bui Tuong Phong) 提出 了 标准 光 
照 模型 背后 的 基本 理念 。 标 准 光 照 模型 只 关心 直接 光照 (direct 
light) ， 也 就 是 那些 直接 从 光源 发 射出 来 照射 到 物体 表面 后 ， 经 过 物体 
表面 的 一 次 反射 直接 进入 摄像 机 的 光线 。 


它 的 基本 方法 是 ， 把 进入 到 摄像 机 内 的 光线 分 为 4 个 部 分 ， 每 个 部 
分 使 用 一 种 方法 来 计算 它 的 贡献 度 。 这 4 个 部 分 是 。 


。 自发 光 (emissive) 部 分 ， 本 书 使 用 cwissve 来 表示 。 这 个 部 分 用 于 
描述 当 给 定 一 个 方 回 时 ， 一 个 表面 本 身 会 加 该 方 回 发 射 多 少 辆 射 
量 。 需 要 注意 的 是 ， 如 果 没 有 使 用 全 局 光照 (global ilumination) 
技术 ， 这 些 目 发 光 的 表面 并 不 会 真 的 照 亮 周围 的 物体 ， 而 是 它 本 
身 看 起 来 更 亮 了 而 已 。 


。 高 光 反 射 (specular) 部 分 ， 本 书 使 用 csjowar 来 表示 。 这 个 部 分 
于 描述 当 光 线 从 光源 照射 到 模型 表面 时 ， 该 表面 会 在 完全 镜面 反 
射 方向 散射 多 少 辐射 量 。 

。 漫 反射 〈diffuse) 部 分 ， 本 书 使 用 curmse 来 表示 。 这 个 部 分 用 于 描 
述 ， 当 光线 从 光源 照射 到 模型 表面 时 ， 该 表面 会 向 每 个 方向 散射 
多 少 辐射 量 。 

。 环 境 光 (ambient) 部 分 ， 本 书 使 用 cwipion 来 表示 。 它 用 于 描述 其 
他 所 有 的 间接 光照 。 


6.2.1 环境 光 


虽然 标准 光照 模型 的 重点 在 于 摘 述 直接 光照 ， 但 在 真实 的 世界 
中 ， 物 体 也 可 以 被 间接 光照 (indirect light) 所 照 亮 。 间 接 光 照 指 的 
征 ， 光 线 通 种 会 在 多 个 物体 之 间 反 射 ， 最 后 进入 摄像 机 ， 也 吏 是 六 ， 
在 光线 进入 摄像 机 之 前 ， 经 过 了 不 止 一 次 的 物体 反射 。 例 如 ， 在 红 地 
千 上 放置 一 个 浅 灰 色 的 沙发 ， 那 么 沙发 底部 也 会 有 红色 ， 这 些 红色 是 
由 红 地 秩 反 射 了 一 部 分 光线 ， 再 反弹 到 沙发 上 的 。 


在 标准 光照 模型 中 ， 我 们 使 用 了 一 种 被 称 为 环境 光 的 部 分 来 近似 
模拟 间接 光照 。 环 境 光 的 计算 非 钊 简单 ， 它 通 前 是 一 个 全 局 要 量 ， 即 
场景 中 的 所 有 物体 部 使 用 这 个 环境 光 。 下 面 的 等 式 给 出 了 计算 环境 尖 
的 部 分 : 


Cambient = ambient 


6.2.2 ”自发 光 


光线 也 可 以 直接 由 光源 发 射 进入 摄像 机 ， 而 不 需要 经 过 任何 物体 
的 反射 。 标 准 光 照 模 型 使 用 目 发光 来 计算 这 个 部 分 的 贡献 度 。 它 的 计 
算 也 很 商 单 ， 束 是 直接 使 用 了 该 材质 的 目 发 光 颜 色 : 


Cemissive 二 Wiemissive 


通常 在 实时 泻 染 中 ， 自 发 光 的 表面 往往 并 不 会 照 亮 周 围 的 表面 ， 
也 就 是 说 ， 这 个 物体 并 不 会 被 当成 一 个 光源 。Unity 5 引入 的 全 新 的 全 
局 光照 系统 则 可 以 模拟 这 类 自发 光 物 体 对 周围 物体 的 影响 ， 我 们 会 在 
第 18 章 中 看 到 。 


6.2.3” 漫 反射 


漫 反 射 光 照 站 用 于 对 那些 被 物体 表面 随机 艇 射 到 各 个 方 同 的 辐射 
度 进 行 建 模 的 。 在 漫 反 射 中 ， 视 角 的 位 置 是 不 重要 的 ， 因 为 反射 是 完 
全 随机 的 ， 因 此 可 以 认为 在 任何 反射 方向 上 的 分 布 都 古 一 样 的 。 但 
和 是， 入 射 光 线 的 角度 很 重要 。 


漫 反 射 光 照 符合 兰 伯 特定 律 (Lambertbs law) : 反射 光线 的 强度 
与 表面 法 线 和 光源 方 同 之 间 夹 角 的 余弦 值 成 正比 。 因 此 ， 漫 反射 部 分 
的 计算 如 下 : 


Caiffuse = (Clight ° Maiffuse) Max(0,N .1) 


其 中 ， 元 是 表面 法 线 ，1 是 指向 光源 的 单位 矢量 ，myipiwse 是 材质 的 
漫 反 射 颜色 ，cuon 是 光源 颜色 。 需 要 注意 的 是 ， 我 们 需要 防止 法 线 和 交 
源 方向 点 乘 的 结果 为 负 值 ， 为 此 ， 我 们 使 用 取 最 大 值 的 函数 来 将 其 截 
取 到 0， 这 可 以 防止 物体 被 从 后 面 来 的 光源 照 之 。 


6.2.4 ”高 光 反 射 


这 里 的 高 光 反 射 是 一 种 经 验 模 型 ， 也 束 是 说 ， 它 并 不 完全 符合 真 
实 世 界 中 的 高 光 反 射 现 象 。 它 可 用 于 计算 那些 沿 着 完全 镜面 反射 方 辣 
被 反射 的 光线 ， 这 可 以 让 物体 看 起 来 是 有 光 渗 的， 例如 金属 材质 。 


计算 高 光 反 射 需要 知道 的 信息 比较 多 ， 如 表面 法 线 、 视 角 方向 、 
光源 方 同 、 反 射 方向 等 。 在 本 世 中 ， 我 们 假设 这 些 天 量 都 是 单位 天 
量 。 岁 6.3 给 出 了 这 些 方 稀 天 量 。 


和 图 6.3 ”使 用 Phong 模 型 计算 高 光 反 射 


在 这 四 个 天 量 中 ， 我 们 实际 上 只 需要 知道 其 中 3 个 天 量 即 可 ， 而 第 
四 个 矢量 一 一 反射 方向 可 以 通过 其 他 信息 计算 得 到 |: 


$=2%.DN-i 


这 样 ， 我 们 就 可 以 利用 Phong 模 型 来 计算 高 光 反 里 的 部 分 : 


A 入 m, 
Cspecular = (Clight " Mspecular ) max(0, VT ) 6 


其 中 ，momos 是 材质 的 光泽 度 (gloss) ， 也 被 称 为 反光 度 
(shininess) 。 它 用 于 控制 高 光 区 域 的 “亮点 ”有 多 宽 ，moioss 越 大 ， 亮 
点 就 越 小 。msnecuor 征 材质 的 高 区 反射 颜色 ， 它 用 于 控制 该 材质 对 于 高 
光 反 射 的 强度 和 颜色 。cion 则 是 光源 的 颜色 和 强度 。 同 样 ， 这 里 也 需要 

防止 2.F 的 结果 为 负数 。 


和 上 述 的 Phong 模 型 相 比 ，Blinn 提 出 了 一 个 简单 的 修改 方法 来 得 到 
类 似 的 效果 。 它 的 基本 思想 是 ， 避 人 免 计 算 反 咽 方 同 。 为 此 ，Blinn 模 型 
引入 了 一 个 新 的 矢量 及 ， 它 是 通过 对 和 1 的 取 平 均 后 再 归 一 化 得 到 
的 。 即 


然后 ， 使 用 元 和 hh 之 间 的 夹 角 进行 计算 ， 而 非 3 和 ?之 间 的 夹 角 ， 如 
图 6.4 所 示 。 


A 图 6.4 Blinn 模 型 
总 结 一 下 ，Blinn 模 型 的 公式 如 下 : 
Cspecular = (Clight ° Mspecular) Max(0, fr + hh)™ss 


在 便 件 实现 时 ， 如 来 摄像机 和 光源 距离 模型 足够 远 的 话 ，Blinn 模 
型 会 快 于 Phong 模 型 ， 这 是 因为 ， 此 时 可 以 认为 % 和 1 都 是 定 值 ， 因 此 
将 是 一 个 常量 。 但 是 ， 当 或 者 1 不 是 定 值 时 ，Phong 模 型 可 能 反而 更 快 

些 。 需 要 注意 的 是 ， 这 两 种 光照 模型 都 是 经 验 模型 ， 也 就 是 说 ， 我 

们 不 应 该 认为 Blinn 模 型 是 对 “正确 的 ?Phong 模 型 的 近似 。 实 际 上 ， 在 一 
些 情 况 下 ，Blinn 模 型 更 符合 实验 结 末 。 
6.2.5” 逐 像素 还 是 逐 顶 点 

上 面 ， 我 们 给 出 了 基本 光照 模型 使 用 的 数学 公式 ， 那 么 我 们 在 哪 
里 计算 这 些 光 照 模型 呢 ? 通 单 来 讲 ， 我 们 有 两 种 选择 : 在 片 元 着 色 硕 


中 计算 ， 也 被 称 为 逐 像 素 光 照 (per-pixel lighting) ; 在 顶点 着 色 器 中 
计算 ， 也 被 称 为 逐 顶 点 光照 (per-vertex lighting) 。 


在 逐 像 素 光 照 中 ， 我 们 会 以 每 个 像素 为 基础 ， 得 到 它 的 法 线 (可 
以 是 对 顶点 法 线 插值 得 到 的 ， 也 可 以 是 从 法 线 纹理 中 采样 得 到 的 ) ， 
然后 进行 光照 模型 的 计算 。 这 种 在 面 片 之 间 对 顶点 法 线 进行 插值 的 技 
术 被 称 为 Phong 着 色 (Phong shading) ， 也 被 称 为 Phong 插 值 或 法 线 插 
值 着 色 技 术 。 这 不 同 于 我 们 之 前 讲 到 的 Phong 光 照 模型 。 


与 之 相对 的 是 逐 顶 点 光照 ， 也 被 称 为 高 洛 德 着 色 (Gouraud 
shading) 。 在 逐 顶 点 光照 中 ， 我 们 在 每 个 顶点 上 计算 光照 ， 然 后 会 在 


泻 染 岁 元 内 部 进行 线性 插值 ， 节 后 输出 成 像 隶 颜色 。 由 于 顶点 数目 往 
往 远 小 于 像素 数目 ， 因 此 逐 顶 点 光照 的 计算 量 往往 要 小 于 逐 像 素 光 
照 。 但 是 ， 由 于 逐 顶 点 光照 依赖 于 线性 插值 来 得 到 像素 光照 ， 因 此 ， 
当 光 照 模型 中 有 非 线性 的 计算 〈 例 如 计算 高 光 反 射 时 ) 时 ， 逐 顶点 光 
照 就 会 出 问题 。 在 后 面 的 章节 中 ， 我 们 将 会 看 到 这 种 情况 。 而 且 ， 由 
于 逐 顶 点 光照 会 在 泻 染 图 元 内 部 对 顶点 颜色 进行 插值 ， 这 会 导致 演 染 
图 元 内 部 的 颜色 总 是 暗 于 顶点 处 的 最 高 闫 色 值 ， 这 在 某 些 情况 下 会 产 
生 明 显 的 棱角 现象 。 


6.2.6 “总结 


Je 一口 


虽然 标准 光照 模型 仅仅 是 一 个 经 验 模型 ， 也 就 是 说 ， 它 并 不 完全 
符合 真实 世界 中 的 光照 现象 。 但 由 于 它 的 易 用 性 、 计 算 速 度 和 得 到 的 
效果 都 比较 好 ， 因 此 仍然 被 广泛 使 用 。 而 也 是 由 于 它 的 广泛 使 用 性 ， 
这 种 标准 光照 模型 有 很 多 不 同 的 叫 法 。 例 如 ， 一 些 资料 中 称 它 为 Phong 
光照 模型 ， 因 为 裴 祥 风 (Bui Tuong Phong) 首先 提出 了 使 用 漫 反 射 和 
高 光 反 射 的 和 来 对 反射 光照 进行 建 模 的 基本 思想 ， 并 且 提 出 了 基于 经 
验 的 计算 高 光 反 射 的 方法 (用 于 计算 漫 反 射 光 照 的 兰 伯 特 模型 在 那 时 
已 经 被 提出 了 ) 。 而 后 ， 由 于 Blinn 的 方法 简化 了 计算 而 且 在 某 些 情况 
下 计算 更 快 ， 我 们 把 这 种 模型 称 为 Blinn-Phong 光 照 模 型 。 


但 这 种 模型 有 很 多 局 限 性 。 首 先 ， 有 很 多 重要 的 物理 现象 无 法 用 
Blinn-Phong 模 型 表现 出 来 ， 例 如 菲 涅 耳 反 射 (Fresnel reflection) 。 其 
次 ，Blinn-Phong 模 型 是 各 项 同性 (isotropic) 的 ， 也 就 是 说 ， 当 我 们 固 
定 视角 和 光源 方 癌 旋转 这 个 表面 时 ， 反 射 不 会 发 生 任何 改变 。 但 有 些 
表面 是 具有 各 向 异性 (anisotropic) 反射 性 质 的 ， 例 如 拉丝 金属 、 毛 发 


等 。 在 第 18 章 中 ， 我 们 将 学 习 基于 物理 的 光照 模型 ， 这 些 光 照 模型 更 
加 复杂 ， 同 时 也 可 以 更 加 真实 地 反映 光 和 物体 的 交互 。 


6.3 Unity 中 的 环境 光 和 目 发 光 


在 标准 光照 模型 中 ， 环 境 光 和 自发 光 的 计算 是 最 简单 的 。 


在 Unity 中 ， 场 景 中 的 环境 光 可 以 在 Window -> Lighting -> Ambient 
Source/Ambient Color/Ambient Intensity 中 控制 ， 如 图 6.5 所 示 。 在 Shader 
中 ， 我 们 只 需要 通过 Unity 的 内 置 变量 UNITY_LIGHTM 
ODEL_AMBIENT 就 可 以 得 到 环境 光 的 颜色 和 强度 信息 。 


> 


图 6.5 在 Unity 的 Window -> Lighting 面 板 中 ， 我 们 可 以 通过 Ambient Source/Ambient 
Color/Ambient Intensity 来 控制 场景 中 的 环境 光 的 颜色 和 强度 


而 大 多 数 物 体 是 没有 目 发 光 特 性 的 ， 因 此 在 本 书 绝 大 部 分 的 Shader 
中 都 没有 计算 自发 光 部 分 。 如 果 要 计算 自发 光 也 非常 简单 ， 我 们 只 需 
要 在 片 元 着 色 右 输出 最 后 的 颜色 之 前 ， 把 材质 的 自发 光 闫 色 添加 到 输 
出 颜色 上 即 可 。 


6.4 在 Unity Shader 中 实现 漫 反 射 光 照 模 型 


在 了 解 了 上 述 的 理论 后 ， 我 们 现在 来 看 一 下 如 何在 Unity 中 实现 这 
基本 光照 模型 。 首 先 ， 我 们 来 实现 标准 光照 模型 中 的 漫 反 射 光照 部 


丑 


这 


在 6.2.3 节 中 ， 我 们 给 出 了 基本 光照 模型 中 漫 反射 部 分 的 计算 公 
了 


Caiffuse = (Clight * Maiffuse) max(0,n I) 


从 公式 可 以 看 出 ， 要 计算 漫 反射 需要 知道 4 个 参数 ， 入 射 光线 的 车 
色 和 强度 cjiht， 材 质 的 漫 反 射 系数 mgss。， 表 面 法 线 友 以 及 光源 方向 1 。 


为 了 防止 点 积 结果 为 负 值 ， 我 们 需要 使 用 max 探 作 ， 而 Cg 提供 了 
这 样 的 函数 。 在 本 例 中 ， 使 用 Cg 的 另 一 个 函数 可 以 达到 同样 的 目的 ， 
即 saturate 函 数 。 


图 数 : saturate(x) 


参数 : x: 为 用 于 操作 的 标量 或 矢量 ， 可 以 是 float、float2、float3 


描述 ， 把 x 截取 在 [0, 1] 范 围 内 ， 如 果 x 是 一 个 矢量 ， 那 么 会 对 它 的 
每 一 个 分 量 进行 这 样 的 操作 。 


6.4.1 实践 : 逐 顶 点 光照 


我 们 首先 来 看 如 何 实现 一 个 逐 顶 点 的 漫 反 射 光 照 效 末 。 在 学 习 完 
本 世 后 ， 我 们 会 得 到 类 似 风 6.6 中 的 效 采 。 
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图 6.6 ” 逐 顶 点 的 漫 反射 光照 效果 


全 


为 此 ， 我 们 进行 如 下 准备 工作 。 

(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene_ 6 4。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包公 一 个 摄像 机 和 一 个 
平行 光 ， 并 且 使 用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 
中 去 掉 场 景 中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
DiffuseVertexLevelMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter6-DiffuseVertexLevel。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 创建 一 个 胶 赛 体 ， 并 把 第 2 步 中 的 材质 赋 给 该 胶 宫 
体 。 


(5) 保存 场景 。 


下 面 ， 我 们 需要 编写 自己 的 Shader 来 实现 一 个 逐 顶 点 的 漫 反 射 效 
有 果 。 打 开 第 3 步 中 创建 的 Unity Shader， 删 除 所 有 已 有 代码 ， 并 进行 如 下 
修改 。 


(1) 首先 ， 我 们 需要 为 这 个 Shader 起 一 个 名 字 : 


(2) 为 了 得 到 并 且 控 制 材质 的 漫 反射 颜色 ， 我 们 首先 在 Shader 的 
Properties 语 义 块 中 声明 了 一 个 Color 类 型 的 属性 ， 并 把 它 的 初始 值 设 为 
日 色 : 


Properties { 
_Diffuse ("Diffuse", Color) = (1, 1, 1, 1) 


} 


(3) 然后 ， 我 们 在 SubShader 语 义 块 中 定义 了 一 个 Pass 语 义 块 。 这 
是 因为 顶点 / 片 元 着 色 器 的 代码 需要 写 在 Pass 语 义 块 ， 而 非 SubShader 语 
义 块 中 。 而 且 ， 我 们 在 Pass 的 第 一 行 指 明了 该 Pass 的 光照 模式 : 
SubShader { 


Pass { 
Tags { "LightMode"="ForwardBase" } 


LightMode 标 签 是 Pass 标 签 中 的 一 种 ， 它 用 于 定义 该 Pass 在 Unity 的 
光照 流水 线 中 的 角色 ， 在 第 9 章 中 我 们 会 更 加 详细 地 解释 它 。 在 这 里 


我 们 只 需要 知道 ， 只 有 定义 了 正确 的 LightMode， 我 们 才能 得 到 一 些 
Unity 的 内 置 光 照 变量 ， 例 如 下 面 要 讲 到 的 _LightColor0。 


(4) 然后 ， 我 们 使 用 CGPROGRAM 和 ENDCG 来 包围 Cg 代码 片 ， 
以 定义 最 重要 的 顶点 着 色 器 和 片 元 着 色 器 代码 。 首 先 ， 我 们 使 用 
#pragma 指 令 来 告诉 Unity， 我 们 定义 的 顶点 着 色 絮 和 片 元 着 色 絮 叫 什么 
名 字 。 在 本 例 中 ， 它 们 的 名 字 分 别 是 vert 和 frag: 


CGPROGRAM 


#pragma vertex Vert 
#pragma fragment frag 


(5) 为 了 使 用 Unity 内 置 的 一 些 变 量 ， 如 后 面 要 讲 到 的 
_LightColor0， 还 需要 包含 进 Unity 的 内 置 文件 Lighting.cginc: 


#include "Lighting.cginc" 


(6) 为 了 在 Shader 中 使 用 Properties 语 义 块 中 声明 的 属性 ， 我 们 需 
要 定义 一 个 和 该 属性 类 型 相 匹配 的 变量 


fixed4 _Diffuse; 


通过 这 样 的 方式 ， 我 们 就 可 以 得 到 漫 反 射 公 式 中 需要 的 参数 之 一 
一 一 材质 的 漫 反 射 属性 。 由 于 颜色 属性 的 范围 在 0 到 1 之 间 ， 因 此 我 们 
可 以 使 用 fixed 精 度 的 变量 来 存储 它 。 


(7) 然后 ， 我 们 定义 了 顶点 着 色 器 的 输入 和 输出 结构 体 (输出 结 
构 体 同时 也 是 片 元 着 色 器 的 输入 结构 体 ) : 


struct a2v 
float4 vertex : POSITION; 


float3 normal : NORMAL; 
}; 


struct v2f { 
float4 pos : SV_POSITION; 
fixed3 color : COLOR; 


}; 


为 了 访问 顶点 的 法 线 ， 我 们 需要 在 a2v 中 定义 一 个 normal 变 量 ， 并 
通过 使 用 NORMAL 语 义 来 告诉 Unity 要 把 模型 顶点 的 法 线 信 息 存 储 到 
normal 变 量 中 。 为 了 把 在 顶点 着 色 句 中 计算 得 到 的 光照 颜色 传递 给 厂 元 
着 色 器 ， 我 们 需要 在 v2f 中 定义 一 个 color 变 量 ， 且 并 不 是 必须 使 用 
COLOR 语 义 ， 一 些 资 料 中 会 使 用 TEXCOORD0 语 义 。 


(8) 接 下 来 是 关键 的 顶点 着 色 器 。 由 于 本 小 节 关 注 如 何 实现 一 个 
逐 顶 点 的 漫 反 射 苑 照 ， 因 此 漫 反 射 部 分 的 计算 都 将 在 顶点 着 色 器 中 进 


二 


v2f vert(a2v v) { 
v2f Oo; 
// Transform the vertex from object space to projection space 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


// Get ambient term 
fixed3 ambient = UNITY_LIGHTMODEL _ AMBIENT .xyz; 


// Transform the normal fram object space to world space 
fixed3 worldNormal = normalize(mul(v.normal, 
(float3x3)_ World20bject)); 


// Get the light direction in world space 

fixed3 worldLight = normalize(_WorldSpaceLightPos0.xyz); 

// Compute diffuse term 

fixed3 diffuse = _LightColorg,rgb * _Diffuse,rgb * 
saturate(dot(worldNormal, worldLight)); 


0.Ccolor = ambient + diffuse; 


return o; 


在 第 一 行 ， 我 们 首先 定义 了 返回 值 o。 我 们 已 经 重复 过 很 多 次 ， 顶 
点 着 色 器 最 基本 的 任务 就 是 把 顶点 位 置 从 模型 空间 转换 到 裁剪 空间 
中 ， 因 此 我 们 需要 使 用 Unity 内 置 的 模型 龙 香 投影 矩阵 
UNITY_MATRIX_MVP 来 完成 这 样 的 坐标 变换 。 接 下 来 ， 我 们 通过 
Unity 的 内 置 变量 UNITY_LIGHTMODEL_AMBIENT 得 到 了 环境 光 部 


分 。 


然后 ， 束 是 真正 计算 漫 反 射 光 照 的 部 分 。 回 忆 一 下 ， 为 了 计算 漫 
反射 光照 我 们 需要 知道 4 个 参数 。 在 前 面 的 步骤 中 ， 我 们 已 经 知道 了 材 
质 的 漫 反 射 颜色 _Diffuse 以 及 顶点 法 线 vnormal。 我 们 还 需要 知道 光源 
的 颜色 和 强度 信息 以 及 光源 方向 。Unity 提 供给 我 们 一 个 内 置 变 量 
_LightColor0 来 访问 该 Pass 处 理 的 光源 的 颜色 和 强度 信息 (注意 ， 想 要 
得 到 正确 的 值 需 要 定义 合适 的 LightMode 标 签 ) ， 而 光源 方向 可 以 由 
_WorldSpaceLightPos0 来 得 到 。 需 要 注意 的 是 ， 这 里 对 光源 方向 的 计算 
并 不 具有 通用 性 。 在 本 下 中 ， 我 们 假设 场景 中 只 有 一 个 光源 且 该 光源 
的 类 型 是 平行 光 。 但 如 果 场 景 中 有 多 个 光源 并 且 类 型 可 能 是 点 光源 等 
其 他 类 型 ， 直 接 使 用 _ WorldSpaceLightPos0 吏 不 能 得 到 正确 的 结果 。 我 
们 将 在 6.6 节 中 学 习 如 何 使 用 内 置 函数 来 处 理 更 复杂 的 光源 类 型 。 


在 计算 法 线 和 光源 方向 之 间 的 点 积 时 ， 我 们 需要 选择 它们 所 在 的 
坐标 系 ， 只 有 两 者 处 于 同一 坐标 空间 下 ， 它 们 的 点 积 才 有 意义 。 在 这 
里 ， 我 们 选择 了 世界 坐标 空间 。 而 由 a2v 得 到 的 顶点 法 线 是 位 于 模型 空 
间 下 的 ， 因 此 我 们 首先 需要 把 法 线 转换 到 世界 空间 中 。 在 4.7 节 中 ， 我 
们 已 经 知道 可 以 使 用 顶点 变换 矩阵 的 逆转 置 矩 阵 对 法 线 进行 相同 的 变 
换 ， 因 此 我 们 首先 得 到 模型 空间 到 世界 空间 的 变换 矩阵 的 人 逆 矩阵 
_World2Object， 然 后 通过 调换 它 在 mul 函 数 中 的 位 置 ， 得 到 和 转 置 定 阵 


相同 的 矩阵 乘法 。 由 于 法 线 是 一 个 三 维 矢量 ， 因 此 我 们 只 需要 裁 取 
_World2Object 的 前 三 行 前 三 列 即 可 。 


在 得 到 了 世界 空间 中 的 法 线 和 光源 方向 后 ， 我 们 需要 对 它们 进行 
归 一 化 操作 。 在 得 到 它们 点 积 的 结果 后 ， 我 们 需要 防止 这 个 结 末 为 负 
值 。 为 此 ， 我 们 使 用 了 saturate 函 数 。saturate 函 数 是 Cg 提供 的 一 种 函 
数 ， 它 的 作用 是 可 以 把 参数 截取 到 [0, 1 的 范围 内 。 最 后 ， 再 与 光源 的 
颜色 和 强度 以 及 材质 的 漫 反 射 颜 色相 乘 即 可 得 到 最 终 的 漫 反 射 光 照 部 


分 。 


最 后 ， 我 们 对 环境 光 和 漫 反 射 光 部 分 相 加 ， 得 到 最 终 的 光照 结 
[ 


(9) 由 于 所 有 的 计算 在 顶点 着 色 器 中 都 已 经 完成 了 ， 因 此 睛 元 着 
色 堪 的 代码 很 简单 ， 我 们 只 需要 直接 把 顶点 颜色 输出 即 可 : 
fixed4 frag(v2f i) : SV_Target { 
return fixed4(i.color, 1.0); 
} 
(10) 最 后 ， 我 们 需要 把 这 个 Unity Shader 的 回调 shader 设 置 为 内 
置 的 Diffuse: 


至 此 ， 我 们 已 经 详细 解释 了 逐 顶 点 的 漫 反 射 光 照 的 实现 。 对 于 细 
分 程度 较 高 的 模型 ， 逐 顶点 光照 已 经 可 以 得 到 比较 好 的 光照 效果 了 。 
但 对 于 一 些 细 分 程度 较 低 的 模型 ， 逐 顶点 光照 就 会 出 现 一 些 视觉 问 


题 ， 例 如 我 们 可 以 在 图 6.6 中 看 到 在 胶 赛 体 的 背光 面 与 回 光 面 交界 处 有 
一 些 饥 疮 。 为 了 解决 这 些 问 题 ， 我 们 可 以 使 用 逐 像 素 的 漫 反 射 光 照 。 


6.4.2 ”实践 : 逐 像素 光照 


我 们 只 需要 对 Shader 进 行 一 些 更 改 就 可 以 实现 逐 像 素 的 漫 反 射 效 
果 ， 如 图 6.7 所 示 。 
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图 6.7” 逐 像素 的 漫 反 射 光 照 效果 


区 


为 此 ， 我 们 进行 如 下 准备 工作 。 
(1) 使 用 6.4.1 节 中 使 用 的 场景 。 


(2) 新 建 一 个 材质 。 在 本 书 资 源 中 ， 该 材质 名 为 
DiffusePixelLevelMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter6-DiffusePixelLevel。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 把 第 2 步 中 创建 的 材质 赋 给 胶 宫 体 。 


Chapter6-DiffusePixelLevel 的 代码 和 6.4.1 小 市 中 的 非常 相似 ， 因 此 
我 们 首先 把 6.4.1 市 中 的 代码 直接 精 贴 到 Chapter6-DiffusePixelLevel 中 ， 
并 进行 如 下 修改 。 


(1) 修改 顶点 着 色 器 的 输出 结构 体 v2f: 


struct v2f { 
float4 pos : SV_POSITION; 


float3 worldNormal : TEXCOORDO; 


}; 


(2) 顶点 着 色 器 不 需要 计算 光照 模型 ， 只 需要 把 世界 空间 下 的 法 
线 传递 给 斤 元 着 色 硕 即 可 : 
v2f vert(a2v v) { 
v2f 0o; 
// Transform the vertex from object space to projection space 


oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


// Transform the normal fram object space to world space 
oOo.worldNormal = mul(v.normal, (float3x3)_ World20bject); 


return o; 


(3) 片 元 着 色 器 需要 计算 漫 反 射 光 照 模型 : 


fixed4 frag(v2f i) : SV_Target { 
// Get ambient term 
fixed3 ambient = UNITY_LIGHTMODEL_ AMBIENT .xyz; 


// Get the normal in world space 

fixed3 worldNormal = normalize(i.worldNormal ); 

// Get the light direction in world space 

fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz); 


// Compute diffuse term 
fixed3 diffuse = _LightColorg,rgb * _Diffuse.rgb * 


saturate(dot(worldNormal, worldLightDir)); 


fixed3 color = ambient + diffuse; 


return fixed4(color, 1.0); 


上 面 的 计算 过 程 和 6.4.1 闻 完全 相同 ， 这 里 不 再 络 述 。 


逐 像素 光照 可 以 得 到 更 加 平滑 的 光照 效果 。 但 是 ， 即 便 使 用 了 膛 
像素 漫 反 射 光 照 ， 有 一 个 问题 仍然 存在 。 在 光照 无 法 到 达 的 区 域 ， 模 
型 的 外 观 通 党 是 全 黑 的 ， 没 有 任何 明暗 变化 ， 这 会 使 模型 的 背光 区 域 
看 起 来 就 像 一 个 平面 一 样 ， 失 去 了 模型 细节 表现 。 实 际 上 我 们 可 以 通 
过 添加 环境 光 来 得 到 非 全 黑 的 效果 ， 但 即便 这 样 仍然 无 法 解决 至 光 面 
明暗 一 样 的 缺点 。 为 此 ， 有 一 种 改善 技术 被 提出 来 ， 这 就 是 半 兰 伯 特 
(Half Lambert) 光照 模型 。 


6.4.3 ” 半 兰 伯 特 模型 


在 6.4.1 小 节 中 ， 我 们 使 用 的 漫 反 射 光 照 模型 也 被 称 为 兰 们 特 光 照 
模型 ， 因 为 它 符 合 兰 伯 特定 律 一 一 在 平面 茶点 漫 反 射 光 的 区 强 与 该 反 
射 点 的 法 回 量 和 入 射 光 角度 的 余弦 值 成 正比 。 为 了 改善 6.4.2 小 节 最 后 
提出 的 问题 ，Valve 公 司 在 开发 游戏 《 半 条 命 》 时 提出 了 一 种 技术 ， 由 
于 该 技术 是 在 原 兰 伯 特 光照 模型 的 基础 上 进行 了 一 个 简单 的 修改 ， 因 
此 被 称 为 半 兰 伯 特 光照 模型 。 


广义 的 半 主 伯 特 光照 模型 的 公式 如 下 : 


Caiffuse = (Clight *° Maiffuse (O(N [) + Pp) 


可 以 看 出 ， 与 原 兰 伯 特 模型 相 比 ， 半 兰 伯 特 光照 模型 没有 使 用 max 
操作 来 防止 和 1 的 点 积 为 负 值 ， 而 是 对 其 结果 进行 了 一 个 a 倍 的 缩放 再 
加 上 一 个 8 大 小 的 偏 移 。 绝 大 多 数 情况 下 ，a 和 B 的 值 均 为 0.5， 即 公式 


Caiffuse = (Clight *° Maiffuse )(O0.5(R: LD) +0.5) 


通过 这 样 的 方式 ， 我 们 可 以 把 元 7 的 结果 范围 从 [-1, 1] 映 射 到 [0, 1] 
范围 内 。 也 束 是 说 ， 对 于 模型 的 育 光 面 ， 在 原 兰 伯 符 光照 模型 中 点 积 
结 采 将 映 冉 到 同一 个 值 ， 即 0 值 处 ， 而 在 半 兰 伯 特 模型 中 ， 硝 光 面 也 可 
以 有 明暗 变化 ， 不 同 的 点 积 结果 会 映射 到 不 同 的 值 上 。 


需要 注意 的 是 ， 半 兰 伯 特 是 没有 任何 物理 依据 的 ， 它 仅仅 是 一 个 
视觉 加 强 技 术 。 


对 6.4.2 小 节 中 得 到 的 代码 做 一 些 修 改 吏 可 以 实现 半 兰 们 特 漫 反射 
光照 效 采 。 


(1) 仍然 使 用 6.4.1 小 节 中 使 用 的 场景 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
HalfLambertMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter6-HalfLambert。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 把 第 2 步 中 创建 的 材质 赋 给 胶 宫 体 。 


打开 Chapter6-HalfLambert， 删 除 已 有 的 Shader 人 代码， 把 6.4.2 小 市 
的 Chapter6-DiffusePixelLevel 代 码 烙 贴 进去 ， 并 使 用 半 兰 伯 特 公式 修改 
片 元 着 色 怖 中 计算 漫 反 射 光 照 的 部 分 : 


fixed4 frag(v2f i) : SV_Target { 


// Compute diffuse term 

fixed halfLambert = dot(worldNormal, worldLightDir) * 0.5 + 
0.5; 
fixed3 diffuse = _LightColorO.rgb * _Diffuse.rgb * halfLambert; 


fixed3 color = ambient + diffuse; 


return fixed4(color, 1.0); 


在 上 面 的 代码 中 ， 我 们 使 用 半 兰 伯 特 模型 代 蔡 了 原 有 的 兰 伯 特 模 
型 。 岁 6.8 给 出 了 逐 顶 点 漫 反 射 光 照 、 逐 像 隶 漫 反 射 光 照 和 半 兰 伯 特 光 
照 的 对 比 效 果 。 
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全 图 6.8 逐 顶 点 漫 反射 光照 、 逐 像素 漫 反射 光照 、 半 兰 伯 特 光 照 的 对 比 效 果 


6.5 在 Unity Shader 中 实现 高 光 反 射 光 照 模型 


在 6.2.4 市 中 ， 我 们 给 出 了 基本 光照 模型 中 高 光 有 反射 部 分 的 计算 公 
式 : 
Cspecular = (Clight)Mspecular }Max(0, VE) "se 
从 公式 可 以 看 出 ， 要 计算 高 光 反 射 需要 知道 4 个 参数 : 入 射 光 线 的 
颜色 和 强度 cuon， 材 质 的 高 光 反 射 系数 mspecuar， 视 角 方 


加 IAAwidehat{vemphfvtextbffV}}} 以 及 反射 方 同 F。 其 中 ， 反 射 方 网 F 可 以 
由 表面 法 线 元 和 光源 方向 1 计算 而 得 : 


六 一 一 2{7nn 。 站 ni 


上 述 公式 很 简单 ， 更 幸运 的 是 ，Cg 提 供 了 计算 反射 方向 的 函数 


reflect ° 
图 数 : reflect(i, n) 


参数 : 1i， 入 射 方向 ，n， 法 线 方向 。 可 以 是 float、float2、float3 等 
类 型 。 


描述 : 当 给 定 入 射 方 和 网 i 利 法 线 方向 n 时 ，reflect 函 数 可 以 返回 反射 
方 问 。 图 6.9 给 出 了 参数 和 返回 值 之 间 的 关系 。 


> 


图 6.9 ”Cg 的 reflect 函 数 
6.5.1 实践， 逐 顶 点 光照 


我 们 首先 来 看 如 何 实现 一 个 逐 顶 点 的 高 光 反 射 光 照 效果 。 在 学 习 
完 本 市 后 ， 我 们 会 得 到 类 似 图 6.10 中 的 效 末 。 
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图 6.10 逐 顶 点 的 高 光 反 射 光 照 效 果 


全 


我 们 需要 进行 如 下 准备 工作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene 6 5。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包 侣 一 个 摄像 机 和 一 个 
平行 光 ， 并 且 使 用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 
中 去 掉 场 景 中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 


SpecularVertexLevelMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter6-SpecularVertexLevel。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 创建 一 个 胶 赛 体 ， 并 把 第 2 步 中 的 材质 赋 给 该 胶 喜 
体 。 


(5) 保存 场景 。 


下 面 ， 我 们 需要 编写 自己 的 Shader 来 实现 一 个 逐 顶 点 的 高 光 反 射 效 
果 。 打 开 第 3 步 中 创建 的 Chapter6-SpecularVertexLevel， 删 除 所 有 已 有 代 
码 ， 并 进行 如 下 修改 。 
(1) 首先 ， 我 们 需要 为 这 个 Shader 起 一 个 名 字 : 


(2) 为 了 在 材质 面板 中 能 够 方便 地 控制 高 光 反 射 属 性 ， 我 们 在 
Shader 的 Properties 语 义 块 中 声明 了 三 个 属性 : 


Properties { 
_Diffuse ("Diffuse", Color) = (1, 1, 1, 1) 


_Specular ("Specular", Color) = (1, 1, 1, 1) 
_Gloss ("Gloss", Range(8.0, 256)) = 20 


} 


其 中 ， 新 添加 的 _Specular 用 于 控制 材质 的 高 光 反 射 颜色 ， 而 _Gloss 
用 于 控制 高 光 区 域 的 大 小 。 


(3) 然后 ， 我 们 在 SubShader 语 义 块 中 定义 了 一 个 Pass 语 义 块 。 这 
是 因为 顶点 / 片 元 着 色 器 的 代码 需要 写 在 Pass 语 义 块 ， 而 非 SubShader 语 
义 块 中 。 而 且 ， 我 们 在 Pass 的 第 一 行 指明 了 该 Pass 的 光照 模式 : 
SubShader { 


Pass { 
Tags { "LightMode"="ForwardBase" } 


LightMode 标 签 是 Pass 标 签 中 的 一 种 ， 它 用 于 定义 该 Pass 在 Unity 的 
光照 流水 线 中 的 角色 ， 在 第 9 章 中 我 们 会 更 加 详细 地 解释 它 。 在 这 里 ， 
我 们 只 需要 知道 ， 只 有 定义 了 正确 的 LightMode， 我 们 才能 得 到 一 些 
Unity 的 内 置 光 照 变 量 ， 例 如 _LightColor0。 


(4) 然后 ， 我 们 使 用 CGPROGRAM 和 ENDCG 来 包围 CG 代码 片 ， 
以 定义 最 重要 的 顶点 着 色 器 和 片 元 着 色 嚣 代码。 首先 ， 我 们 使 用 
#pragma 指 令 来 告诉 Unity， 我 们 定义 的 顶点 着 色 絮 和 片 元 着 色 絮 叫 什么 
名 字 。 在 本 例 中 ， 它 们 的 名 字 分 别 是 vert 和 frag: 


CGPROGRAM 


#pragma vertex Vert 
#pragma fragment frag 


(5) 为 了 使 用 Unity 内 置 的 一 些 变量 ， 如 _LightColor0， 还 需要 包 
含 进 Unity 的 内 置 文件 Lighting.cginc: 


#include "Lighting.cginc" 


(6) 为 了 在 Shader 中 使 用 Properties 语 义 块 中 声明 的 属性 ， 我 们 需 
要 定义 和 这 些 属 性 类 型 相 匹配 的 变量 : 


fixed4 _Diffuse; 
fixed4 _Specular; 
float _Gloss; 


由 于 颜色 属性 的 范围 在 0 到 1 之 间 ， 因 此 对 于 _Diffuse 和 _Specular 属 
性 我 们 可 以 使 用 fixed 精 度 的 变量 来 存储 它 。 而 _Gloss 的 范围 很 大 ， 因 此 
我 们 使 用 float 精 度 来 存储 。 


(7) 然后 ， 我 们 定义 了 顶点 着 色 器 的 输入 和 输出 结构 体 (输出 结 
构 体 同时 也 是 片 元 着 色 句 的 输入 结构 体 ) : 
struct a2v { 


float4 vertex : POSITION; 
float3 normal : NORMAL; 


}; 


struct v2f { 
float4 pos : SV_POSITION; 
fixed3 color : COLOR; 


}; 


(8) 在 顶点 着 色 器 中 ， 我 们 计算 了 包含 高 光 反 射 的 光照 模型 : 


v2f vert(a2v v) { 
v2f 0o; 
// Transform the vertex from object space to projection space 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


// Get ambient term 


fixed3 ambient = UNITY_LIGHTMODEL_ AMBIENT. xyz; 


// Transform the normal fram object space to world space 
fixed3 worldNormal = normalize(mul(v.normal, 
(float3x3)_ World20bject)); 
// Get the light direction in world space 
fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz); 


// Compute diffuse term 
fixed3 diffuse = _LightColorg,rgb * _Diffuse,rgb * 
saturate(dot(worldNormal, worldLightDir)); 


// Get the reflect direction in world space 

fixed3 reflectDir = normalize(reflect(-worldLightDir, 
worldNormal ) ) ; 

// Get the view direction in world Space 

fixed3 viewDir = normalize(_WorldSpaceCameraPos.xyz - 
mul(_Object2world, v.vertex).xyz); 


// Compute specular term 
fixed3 specular = _LightColorO.rgb * _Specular.rgb * 
pow(saturate(dot(reflectDir, viewDir)), _Gloss); 


oOo.color = ambient + diffuse + specular; 


return o; 


其 中 漫 反 射 部 分 的 计算 和 6.4 节 中 的 代码 完全 一 致 。 对 于 高 光 反 射 
部 分 ， 我 们 百 先 计算 了 入 射 光线 方 同 关于 表面 法 线 的 反射 方向 
reflectDir。 由 于 Cg 的 reflect 函 数 的 入 射 方 同 要 求 是 由 光源 指 癌 交点 处 
的 ， 因 些 我们 需要 对 worldLightDir 取 反 后 再 传 给 reflect 函 数 。 然 后 ， 我 
们 通过 _ WorldSpaceCameraPos 得 到 了 世界 空间 中 的 摄像 机 位 置 ， 再 把 
顶点 位 置 从 模型 空间 变换 到 世界 空间 下 ， 再 通过 和 
_WorldSpaceCameraPos 相 减 即 可 得 到 世界 空间 下 的 视角 方 同 。 


由 此 ， 我 们 已 经 得 到 了 所 有 的 4 个 参数 ， 代 入 公式 即 可 得 到 高 光 反 
射 的 光照 部 分 。 最 后 ， 再 和 环境 光 、 漫 反射 光 相 加 存储 到 最 后 的 颜色 
i 


(9) 片 元 着 色 器 的 代码 非常 简单 ， 我 们 只 需要 直接 返回 顶点 颜色 
可 : 


yu 


fixed4 frag(v2f i) : SV_Target { 
return fixed4(i.color, 1.0); 


(10) 最 后 ， 我 们 需要 把 这 个 Unity Shader 的 回调 Shader 设 置 为 内 
置 的 Specular: 


使 用 逐 顶点 的 方法 得 到 的 高 光 效 果 有 比较 大 的 问题 ， 我 们 可 以 在 
图 6.10 中 看 出 高 光 部 分 明显 不 平滑 。 这 主要 是 因为 ， 高 光 反 射 部 分 的 计 
算是 非 线性 的 ， 而 在 顶点 着 色 器 中 计算 光照 再 进行 揪 值 的 过 程 是 线性 
的 ， 破 坏 了 原 计 算 的 非 线 性 关系 ， 就 会 出 现 较 大 的 视觉 问题 。 因 此 ， 
我 们 就 需要 使 用 逐 像 素 的 方法 来 计算 高 光 反 射 。 
6.5.2 ”实践 ， 逐 像素 光照 


我 们 可 以 使 用 逐 像素 光照 来 得 到 更 加 平滑 的 高 区 效果 ， 如 图 6.11 所 


A 图 6.11 逐 像 素 的 高 光 反 射 光照 效果 


首先 ， 我 们 需要 进行 如 下 准备 工作 。 
(1) 使 用 和 6.5.1 小 市 同样 的 场景 。 
(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 


SpecularPixelLevelMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter6-SpecularPixelLevel。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 把 第 2 步 中 创建 的 材质 赋 给 胶 宫 体 。 


打开 Chapter6-SpecularPixelLevel， 删 除 已 有 的 Shader 代 码 ， 把 上 
6.5.1 市 中 的 代码 精 贴 进去 ， 并 对 顶点 着 色 器 和 片 元 着 色 器 进行 如 下 修 
改 * 


(1) 修改 顶点 着 色 器 的 输出 结构 体 v2f: 


struct v2f { 
float4 pos : SV_POSITION; 
float3 worldNormal : TEXCOORDO; 


float3 worldPos : TEXCOORD1.; 


}; 


(2) 顶点 着 色 器 2 x 间 下 的 法 线 方向 和 顶点 坐标 ， 
并 把 它们 传递 给 片 元 着 色 器 即 


v2f vert(a2v v) { 
v2f 0o; 
// Transform the vertex from object space to projection space 
0.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


// Transform the normal fram object space to world space 
o.worldNormal = mul(v.normal, (float3x3)_ World20bject); 
// Transform the vertex from object space to world space 
oOo.worldPos = mul(_Object2Wworld, v.vertex).xyz; 


return o; 


(3) 片 元 着 色 器 需要 计算 关键 的 光照 模型 : 


fixed4 frag(v2f i) : SV_Target { 
// Get ambient term 
fixed3 ambient = UNITY_LIGHTMODEL _ AMBIENT .xyz; 


fixed3 worldNormal = normalize(i.worldNormal); 
fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz); 


// Compute diffuse term 
fixed3 diffuse = _LightColorg,rgb * _Diffuse,rgb * 
saturate(dot(worldNormal, worldLightDir)); 


// Get the reflect direction in world space 

fixed3 reflectDir = normalize(reflect(-worldLightDir, 
worldNormal ) ) ; 

// Get the view direction in world Space 

fixed3 viewDir = normalize(_WorldSpaceCameraPos.xyz - 
i.worldPos .xyz); 

// Compute specular term 

fixed3 specular = _LightColorO.rgb * _Specular.rgb * 
pow(saturate(dot(reflectDir, viewDir)), _Gloss); 


return fixed4(ambient + diffuse + specular, 1.0); 
} 


上 面 的 代码 和 6.5.1 市 中 的 基本 相同 ， 在 此 不 再 玖 述 。 


可 以 看 出 ， 按 逐 像素 的 方式 处 理光 照 可 以 得 到 更 加 平滑 的 高 光 效 
果 。 至 此 ， 我 们 就 实现 了 一 个 完整 的 phong 光 照 模型 。 


6.5.3 ”Blinn-Phong 光 照 模 型 


在 6.5.2 小 下 中， 我 们 给 出 了 Phong 光 照 模型 在 Unity 中 的 实现 ， 而 在 
6.2.4 节 中 ， 我 们 还 提 到 了 另 一 种 高 光 反 射 的 实现 方法 一 一 Blinn 光 照 模 
型 。 回 忆 一 下 ，Blinn 模 型 没有 使 用 反射 方向 ， 而 是 引入 一 个 新 的 矢量 h 
， 它 是 通过 对 视角 方向 I\widehat{\emphf{\textbf{v}}} 和 光照 方向 YZ 相 加 后 
再 归 一 化 得 到 的 。 即 


入 


h = 


爷 十 了 
而 Blinn 模 型 计算 高 光 反 射 的 公式 如 下 : 
Copecular = (Clight * Mspecular) max(0, fi » ho)" 
Blinn-Phong 模 型 的 实现 和 6.5.2 节 中 的 代码 很 类 似 。 为 此 。 
(1) 仍然 使 用 和 6.5.2 节 同样 的 场景 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
BlinnPhongMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter6-BlinnPhong。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 把 第 2 步 中 创建 的 材质 赋 给 胶 宫 体 。 


打开 Chapter6-BlinnPhong， 删 除 已 有 的 Shader 代 码 ， 并 把 6.5.2 节 中 
的 Chapter6-Specular PixelLevel 代 码 直接 粘贴 进去 。 我 们 只 需要 修改 片 
元 着 色 器 中 对 高 光 反 射 部 分 的 计算 代码 : 


fixed4 frag(v2f i) : SV_Target { 


// Get 
fixed3 
i .worldPos 
// Get 
fixed3 


the view direction in world space 
viewDir = normalize(_WorldSpaceCameraPos.xyz - 


.XYZ ) / 


the half direction in world space 
halfDir = normalize(worldLightDir + viewDir); 


// Compute specular term 


fixed3 


specular = _LightCcolorg.rgb * _Specular.rgb * pow(max(0, 


dot(worldNormal, halfDir)), _Gloss); 


return 


fixed4(ambient + diffuse + specular, 1.0); 


图 6.12 给 出 了 逐 顶 点 的 高 光 反 射 光 照 、 逐 像素 的 高 光 反 射 光 照 
(Phong 模 型 ) 和 Blinn-Phong 高 光 反 射 光 照 的 对 比 结果 。 


图 6.12 ” 逐 顶 点 的 高 光 反 射 光 照 、 逐 像素 的 高 光 反 射 光 照 (Phong 光 照 模型 ， 和 Blinn-Phong 
高 区 反射 光照 的 对 比 结果 


区 


可 以 看 出 ，Blinn-Phong 光 照 模 型 的 高 光 反 射 部 分 看 起 来 更 大 、 更 
亮 一 些 。 在 实际 泻 染 中 ， 绝 大 多 数 情况 我 们 都 会 选择 Blinn-Phong 交 照 
模型 。 需 要 再 次 提醒 的 是 ， 这 两 种 光照 模型 都 是 经 验 模 型 ， 也 就 是 
说 ， 我 们 不 应 该 认为 Blinn-Phong 模 型 是 对 “正确 的 "Phong 模 型 的 近似 。 
实际 上 ， 在 一 些 情况 下 ( 详 见 第 18 章 .基于 物理 的 渲染 ) ，Blinn-Phong 
模型 更 符合 实验 结 末 。 


6.6 召 晚 神龙 : 使 用 Unity 内 置 的 范 数 


读者 可 以 发 现 ， 在 计算 光照 模型 的 时 候 ， 我 们 往往 需要 得 到 光源 
方 铝 、 视 角 方 向 这 两 个 基本 信息 。 在 上 面 的 例子 中 ， 我 们 都 是 目 行 在 
代码 里 计算 的 ， 例 如 使 用 normalize(_WorldSpace LightPos0.xyz) 来 得 到 
光源 方向 (这 种 方法 实际 只 适用 于 平行 光 ) ， 使 用 
normalize(_WorldSpace CameraPos.xyz - i.worldPosition.xyz) 来 得 到 视角 


方向 。 但 如 果 和 需要 处 理 更 复杂 的 光照 类 型 ， 如 点 光源 和 宫 光 灯 ， 我 们 


计算 光源 方向 的 方法 就 是 错误 的 。 这 需要 我 们 在 代码 中 先 判断 光源 类 
型 ， 表 计算 它 的 光源 信息 。 具 体 方法 会 在 9.2 市 中 讲 到 。 


手动 计算 这 些 光 源 信息 的 过 程 相对 比较 麻烦 (但 并 不 意味 着 你 不 
需要 了 解 它们 的 原理 ) 。 幸 运 的 是 ，Unity 提 供 了 一 些 内 置 函 数 来 帮助 
我 们 计算 这 些 信息 。 在 5.3.1 世 中 ， 我 们 给 出 了 UnityCG.cginc 里 一 些 非 
常 有 用 的 帮助 函数 。 这 里 ， 我 们 再 次 回顾 一 下 它们 。 表 6.1 给 出 了 计算 
光照 模型 时 ， 我 们 常常 使 用 的 一 些 内 置 画 数 。 


表 6.1 UnityCG.cginc 中 一 些 常 用 的 帮助 画 数 


输入 一 个 模型 空间 中 的 顶点 位 置 ， 返 回 世 界 空 间 
该 点 到 摄像 机 的 观察 方向 。 内 部 实现 使 用 


float3 WorldSpaceViewDir 
(float4 V) 


UnityWorldSpaceViewDir 函 数 


float3 
UnityWorldSpaceViewDir 
(float4 V) 


输入 一 个 世界 空间 中 的 顶点 位 置 ，3 
该 点 到 摄像 机 的 观察 方向 


float3 ObjSpaceViewDir 输入 一 个 模型 空间 中 的 顶点 位 置 ， 返 回 模型 空间 
(float4 v) 该 点 到 摄像 机 的 观察 方向 


仅 可 用 于 前 向 渲染 中 。 输 入 一 个 模型 空间 中 的 顶点 
float3 WorldSpaceLightDir 位 置 ， 返 回 世 界 空 间 中 从 该 点 到 光源 的 光照 方向 。 内 
(float4 Vv) 部 实现 使 用 了 UnityWorldSpaceLightDir 函 数 。 没 有 被 
上 时区 


float3 仅 可 用 于 前 向 演 染 中 。 和 输入 一 个 世界 空间 中 的 顶点 


UnityWorldSpaceLightDir 位 置 ， 返 回 世 界 空间 中 从 该 点 到 光源 的 光照 方向 。 没 
(float4 v) 有 被 归 一 化 


仅 可 用 于 前 向 泻 染 中 。 输 入 一 个 模型 空间 中 的 顶点 
位 置 ， 返 回 模型 空间 中 从 该 点 到 光源 的 光照 方向 。 没 
有 被 归 一 化 


float3 ObjSpaceLightDir 
(float4 v) 


float3 
UnityObjectToWorldNormal “| 把 法 线 方 向 从 模型 空间 转换 到 世界 空间 


(float3 norm) 


float3 UnityObjectToWorldDir 
(float3 dir) 


把 方向 矢量 从 模型 空间 变换 到 世界 空间 中 


UnityWorldToObjectDir(float3 | 把 方向 矢量 从 世界 空间 变换 到 模型 空间 


注意 ， 类 似 UnityXXX 的 几 个 函数 是 Unity 5 中 新 添加 的 内 置 画 数 。 

些 帮 助 函 数 使 得 我 们 不 需要 跟 各 种 变换 和 矩阵、 内 置 变 量 打交道 ， 也 

不 需要 考虑 各 种 不 同 的 情况 〈 例 如 使 用 了 哪 种 光源 ) ， 而 仅仅 调用 一 

个 函数 就 可 以 得 到 需要 的 信息 。 上 面 的 9 个 帮助 函数 中 ， 有 5 个 我 们 已 
经 掌握 了 其 内 部 实现 ， 例 如 WorldSpaceViewDir 函 数 实 现 如 下 : 


// Computes world space view direction, from object Space position 
inline float3 UnityworldSpaceViewDir( in float3 worldPos ) 


return _WorldSpaceCameraPos.xyz - worldPos; 


} 

可 以 看 出 ， 这 与 之 前 计算 视角 方向 的 方法 一 致 。 需要 注意 的 是 ， 
这 些 画 数 都 没有 保证 得 到 的 方向 矢量 是 单位 矢量 ， 因 此 ， 我 们 需要 在 
使 用 前 把 它们 归 一 化 。 


而 计算 光源 方 回 的 3 个 函数 : WorldSpaceLightDir、 
UnityWorldSpaceLightDir 和 ObjSpace 
LightDir， 稍 微 复杂 一 些 ， 这 是 因为 ，Unity 帮 我 们 处 理 了 不 同 种 类 光源 
的 情况 。 需 要 注意 的 是 ， 这 3 个 函数 仅 可 用 于 前 向 渲染 (关于 什么 是 前 
向 演 染 会 在 9.1 节 中 讲 到 ) 。 这 是 因为 只 有 在 前 向 泻 染 时 ， 这 3 个 函数 里 
使 用 的 内 置 变 量 _WorldSpaceLightPos0 等 才 会 被 正确 赋值 。 关 于 哪些 内 
置 变量 只 会 在 前 向 洽 染 中 被 正确 赋值 ， 可 以 参见 9.1.1 广 。 


下 面 介绍 使 用 内 置 贸 数 改写 Unity Shader 。 


我 们 已 经 在 本 世 涉 及 了 过 多 的 细 玉 ， 如 采 读 者 无 法 理解 所 有 内 容 
的 话 ， 只 需要 知道 ， 在 实际 编写 过 程 中 ， 我 们 往往 会 借助 于 Unity 的 内 
置 贸 数 来 帮助 我 们 进行 各 种 计算 ， 这 可 以 减轻 不 少 我 们 的 “ 痛 辣 ”。 


下 面 ， 我 们 将 使 用 这 些 内 置 函 数 来 改写 6.5.3 小 节 中 使 用 Blinn- 
Phong 光 照 模型 的 Unity Shader。 为 此 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene_6_6。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 
平行 光 ， 并 且 使 用 了 内 置 的 天 空 例子。 在 Window -> Lighting -> Skybox 
中 去 掉 场 景 中 的 天 空 盒 子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
BlinnPhongUseBuildInFunctionMat 。 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter6-BlinnPhongUseBuildIn unction。 把 新 的 Shader 赋 给 第 2 步 中 创 
建 的 材质 。 


(4) 创建 一 个 胶 宫 体 ， 并 把 第 2 步 中 创建 的 材质 赋 给 它 。 


Chapter6-BlinnPhongUseBuildInFunction 中 的 代码 几乎 和 Chapter6- 
Bouinlione 中 的 完全 一 样 ， 只 是 计算 时 使 用 了 Unity 的 内 置 国 数 。 修 改 
部 分 的 代码 如 下 : 


(1) 在 顶点 着 色 器 中 ， 我 们 使 用 内 置 的 
UnityObjectTowWorldNormal 函 数 来 计算 世界 空间 下 的 法 线 方 癌 ; 


v2f vert(a2v v) { 
v2f 0o; 


// Use the build-in function to compute the normal in world 
space 
o.worldNormal = UnityObjectToworldNormal(v.normal); 


return o; 


(2) 在 片 元 着 色 器 中 ， 我 们 使 用 内 置 的 UnityWorldSpaceLightDir 
函数 和 UnityWorldSpaceView 
Dir 函 数 来 分 别 计算 世界 空间 的 光照 方向 和 视角 方 回 : 


fixed4 frag(v2f i) : SV_Target { 


fixed3 worldNormal = normalize(i.worldNormal ); 
// Use the build-in function to compute the light direction in 


world Space 

// Remember to normalize the result 

fixed3 worldLightDir = 
normalize(UnityworldSpaceLightDir(i.worldPos)); 


// Use the build-in function to compute the view direction in 
world space 


// Remember to normalize the result 
fixed3 viewDir = normalize(UnityworldSpaceViewDir(i.worldPos)); 


需要 注意 的 是 ， 由 内 置 画 数 得 到 的 方向 是 没有 上 归 一 化 的 ， 因 此 我 
们 需要 使 用 normalize 函 数 来 对 结果 进行 归 一 化 ， 再 进行 光照 模型 的 计 
算 o 


[1] http://en.wikipedia.org/wiki/Bui Tuong Phong 


第 7 章 ”基础 纹理 


纹理 最 初 的 目的 就 是 使 用 一 张 图 片 来 控制 模型 的 外 观 。 使 用 纹理 
映射 〈texture mapping) 技术 ， 我 们 可 以 把 一 张 图 “ 秋 ? 在 模型 表面 ， 
逐 纹 素 (texel) ”( 纹 素 的 名 字 是 为 了 和 像素 进行 区 分 ) 地 控制 模型 的 
颜色 。 


在 美术 人 员 建 模 的 时 候 ， 通 常会 在 建 模 软件 中 利用 纹理 展开 技术 
把 纹理 映射 坐标 (texture-mapping coordinates) 存储 在 每 个 顶点 上 。 
纹理 映射 坐标 定义 了 该 顶点 在 纹理 中 对 应 的 2D 坐 标 。 通 利 ， 这 些 坐 标 
使 用 一 个 二 维 变量 (u, V) 来 表示 ， 其 中 u 是 横 回 坐标， 而 v 是 纵 回 坐标 。 
因此 ， 纹 理 映射 坐标 也 被 称 为 UV 和 坐标。 


尽管 纹理 的 大 小 可 以 是 多 种 多 样 的 ， 例 如 可 以 是 256x256 或 者 
1024x1024， 但 顶点 UV 坐标 的 范围 通常 都 被 归 一 化 到 [0, 1] 范 围 内 。 需 
要 注意 的 是 ， 纹 理 采 样 时 使 用 的 纹理 坐标 不 一 定 是 在 [0, 1 范围 内 。 实 
际 上 ， 这 种 不 在 [0, 1] 范 围 内 的 纹理 坐标 有 时 会 非常 有 用 。 与 之 关系 紧 
密 的 是 纹理 的 平 铺 模式 ， 它 将 决定 泻 染 引擎 在 遇 到 不 在 [0, 1] 范 围 内 的 
纹理 坐标 时 如 何 进行 纹理 采样 。 我 们 将 在 7.1.2 节 中 更 加 详细 地 进行 前 
壕 o 


在 本 书 之 前 的 章节 中 ， 我 们 曾 不 止 一 次 地 提 到 过 OpenGL 和 DirectX 
在 二 维 纹理 空间 中 的 坐标 系 差异 问题 。 重 要 的 事情 要 说 很 多 次 ， 我 们 
再 来 回顾 一 下 。 在 OpenGL 里 ， 纹 理 空间 的 原点 位 于 左下 角 ， 而 在 
DirectX 中 ， 原 点 位 于 左上 角 。 圣 运 的 是 ，Unity 在 绝 大 多 数 情 况 下 ( 特 


例 情况 可 以 参见 5.6 节 ) 为 我 们 处 理 好 了 这 个 差异 问题 ， 也 就 是 说 ， 即 
便 游 戏 的 目标 平台 可 能 既 有 OpenGL 风 格 的 ， 也 有 DirectX 风 格 的 ， 但 我 
们 在 Unity 中 使 用 的 通常 只 有 一 种 坐标 系 。Unity 使 用 的 纹理 空间 是 符合 
OpenGL 的 传统 的 ， 也 就 是 说 ， 原 点 位 于 纹理 左下 角 ， 如 图 7.1 所 示 。 


A 图 7.1 Unity 中 的 纹理 坐标 


本 章 将 介绍 如 何在 Unity 中 利用 纹理 采样 来 实现 更 加 丰富 的 视觉 效 
果 。 在 7.1 广 中 ， 我 们 将 学 习 如 何在 Unity Shader 中 进行 最 基本 的 纹理 采 
样 ， 并 介绍 纹理 的 属性 等 基本 概念 。7.2 节 将 介绍 游戏 中 应 用 广泛 的 凹 
中 纹理 ， 还 会 解释 Unity 中 法 线 纹理 的 一 些 实现 细 玉 。7.3 也 和 7.4 玫 将 分 
别 介 绍 两 类 特殊 的 纹理 类 型 ， 即 渐变 纹理 和 让 草 纹 理 ， 这 些 纹理 在 游 
戏 中 的 应 用 非常 广泛 。 


需要 提醒 读者 注意 的 是 ， 本 章 着 重 讲述 纹理 采样 的 原理 ， 因 此 实 
现 的 Shader 往 往 并 不 能 直接 应 用 到 实际 项 目 中 〈 直 接 使 用 的 话 会 缺少 阴 
影 、 光 照 豪 减 等 效果 ) 。 我 们 会 在 9.5 节 给 出 包含 了 纹理 采样 和 完整 光 
照 模型 的 可 真正 使 用 的 Unity Shader 。 


7.1 单 张 纹理 


我 们 通 闻 会 使 用 一 张 纹理 来 代 殖 物体 的 漫 反 射 颜色 。 在 本 下 中 ， 
我 们 将 学 习 如 何在 Unity Shader 中 使 用 单 张 纹理 来 作为 模拟 的 颜色 。 在 
学 习 完 本 节 后 ， 我 们 会 得 到 类 似 图 7.2 中 的 效 末 。 


SingleTextureMat 六， 
v Shader [Unity Shader Book/Chapter7-Sint” | 
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和 图 7.2 ”使 用 单 张 纹理 


7.1.1 ”实践 


在 本 例 中 ， 我 们 仍然 使 用 Blinn-Phong 光 照 模型 来 计算 光照 。 准 备 
工作 如 下 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene_7_1。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 
平行 光 ， 并 有 旦 使 用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 
中 去 掉 场景 中 的 天 空 盒 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 


SingleTextureMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 为 
Chapter7-SingleTexture。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 创建 一 个 胶 赛 体 ， 并 把 第 2 步 中 的 材质 赋 给 该 胶 宫 
体 。 


(5) 保存 场景 。 


打开 新 建 的 Chapter7-SingleTexture， 删 除 所 有 已 有 代码 ， 并 进行 如 
下 修改 。 


(1) 首先 ， 我 们 需要 为 这 个 Unity Shader 起 一 个 名 字 : 


Shader "Unity Shaders Book/Chapter 7/Single Texture" { 


(2) 为 了 使 用 纹理 ， 我 们 需要 在 Properties 语 义 块 中 添加 一 个 纹理 
属性 : 
Properties { 


_Color ("Color Tint", Color) = (1,1,1,1) 
_MainTex ("Main Tex", 2D) = "white" {} 


_Specular ("Specular", Color) = (1, 1, 1, 1) 
_Gloss ("Gloss", Range(8.0, 256)) = 20 


上 面 的 代码 声明 了 一 个 名 为 _MainTex 的 纹理 ， 在 3.3.2 节 中 ， 我 们 
已 经 知道 2D 是 纹理 属性 的 声明 方式 。 我 们 使 用 一 个 字符 串 后 跟 一 个 花 
括号 作为 它 的 初始 值 , “white” 是 内 置 纹理 的 名 字 ， 也 就 是 一 个 全 白 的 
纹理 。 为 了 控制 物体 的 整体 色调 ， 我 们 还 声明 了 一 个 _Color 属 性 。 


(3) 然后 ， 我 们 在 SubShader 语 义 块 中 定义 了 一 个 Pass 语 义 块 。 而 
且 ， 我 们 在 Pass 的 第 一 行 指明 了 该 Pass 的 光照 模式 : 
SubShader { 


Pass { 
Tags { "LightMode"="ForwardBase" } 


LightMode 标 签 是 Pass 标 签 中 的 一 种 ， 它 用 于 定义 该 Pass 在 Unity 的 
光照 流水 线 中 的 角色 。 


(4) 接着 ,我们 使 用 CGPROGRAM 和 ENDCG 来 包围 仁 Cg 代 码 
片 ， 以 定义 最 重要 的 顶点 着 色 器 和 片 元 着 色 器 代码 。 首 先 ， 我 们 使 用 
#pragma 指 令 来 告诉 Unity， 我 们 定义 的 顶点 着 色 絮 和 片 元 着 色 絮 叫 什么 
名 字 。 在 本 例 中 ， 它 们 的 名 字 分 别 是 vert 和 frag: 


CGPROGRAM 


#pragma vertex Vert 
#pragma fragment frag 


(5) 为 了 使 用 Unity 内 置 的 一 些 变量 ， 如 _LightColor0， 还 需要 包 
含 进 Unity 的 内 置 文件 Lighting.cginc: 


(6) 我 们 需要 在 Cg 代码 片 中 声明 和 上 述 属性 类 型 相 匹配 的 变量 ， 
以 便 和 材质 面板 中 的 属性 建立 联系 : 


fixed4 _Color; 
sampler2D _MainTex; 
float4 MainTex_ST; 
fixed4 _Specular; 


float _Gloss; 


与 其 他 属性 类 型 不 同 的 是 ， 我 们 还 需要 为 纹理 类 型 的 属性 声明 一 
个 float4 类 型 的 变量 _MainTex_ST。 其 中 ，_MainTex_ST 的 名 字 不 是 任意 
起 的 。 在 Unity 中 ， 我 们 需要 使 用 纹理 名 _ST 的 方式 来 声明 某 个 纹理 的 
属性 。 其 中 ，ST 是 缩放 (scale) 和 平移 (translation) 的 缩写 。 
_MainTex_ST 可 以 让 我 们 得 到 该 纹理 的 缩放 和 平移 ( 偏 移 ) 值 ， 


_MainTex_ST.xy 存 储 的 是 缩放 值 ， 而 _MainTex_ST.zw 存 储 的 是 偏 移 
值 。 这 些 值 可 以 在 材质 面板 的 纹理 属性 中 调 三 ， 如 图 7.3 所 示 。 在 7.1.2 
节 中 ， 我 们 将 更 详细 地 解释 这 些 纹理 属性 


图 7.3 ”调节 纹理 的 平 铺 (缩放 ) 和 偏 移 (平移 ) 属性 


> 


(7) 接 下 来 ， 我们 需要 定义 顶点 着 色 器 的 输入 和 输出 结构 体 : 


struct a2v { 
float4 vertex : POSITION; 
float3 normal : NORMAL; 
float4 texcoord : TEXCOORDO; 


了 


Struct v2f { 
float4 pos : SV_POSITION; 
float3 worldNormal : TEXCOORDO; 
float3 worldPos : TEXCOORD1.; 
float2 uv : TEXCOORD2; 


}; 


在 上 面 的 代码 中 ， 我 们 首先 在 a2v 结 构 体 中 使 用 TEXCOORD0 语 义 
声明 了 一 个 新 的 变量 texcoord， 这 样 Unity 束 会 将 模型 的 第 一 组 纹理 坐标 
存储 到 该 变量 中 。 人 然后， 我们 在 v2f 结 构 体 中 添加 了 用 于 存储 纹理 坐标 
的 变量 uv， 以 便 在 斤 元 寿 色 需 中 使 用 该 坐标 进行 纹理 采样 。 


(8) 然后 ， 我 们 定义 了 顶点 着 色 器 : 


v2f vert(a2v v) { 
v2f Oo; 
0.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


o.worldNormal = UnityObjectToworldNormal(v.normal); 


oOo.worldPos = mul(_Object2world, v.vertex).xyz; 


O.UV = VvV.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.Zzw; 
// Or just call the built-in function 
// O.UV = TRANSFORM_TEX(vVv.texcoord, _MainTex); 


return o; 


在 顶点 着 色 器 中 ， 我 们 使 用 纹理 的 属性 值 _MainTex_ST 来 对 顶点 纹 
理 坐 标 进行 变换 ， 得 到 最 终 的 纹理 坐标 。 计 算 过 程 是 ， 首 先 使 用 缩放 
属性 _ MainTex_ST.xy 对 顶点 纹理 坐标 进行 缩放 ， 然 后 再 使 用 偏 移 属性 
_MainTex_ST.zw 对 结果 进行 偏 移 。Unity 提 供 了 一 个 内 置 宏 
TRANSFORM_TEX 来 帮 有 我 们 计算 上 述 过 程 。TRANSFORM_TEX 是 在 
UnityCG.cginc 中 定义 的 : 


// Transforms 2D UV by scale/bias property 
#define TRANSFORM_TEX(tex,name) (tex.xy * name## _ ST.xy + 
name##_ST.Zzw) 


它 接受 两 个 参数 ， 第 一 个 参数 是 顶 点 纹理 坐标 ， 第 二 个 参数 是 纹 
理 名 ， 在 它 的 实现 中 ， 将 利用 纹理 名 _ST 的 方式 来 计算 变换 后 的 纹理 坐 
标 。 


(9) 我 们 还 需要 实现 片 元 着 色 器 ， 并 在 计算 漫 反射 时 使 用 纹理 中 
的 纹 素 值 : 


fixed4 frag(v2f i) : SV_Target { 
fixed3 worldNormal = normalize(i.worldNormal); 
fixed3 worldLightDir = 
normalize(UnityworldSpaceLightDir(i.worldPos)); 


// Use the texture to sample the diffuse color 
fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb; 


fixed3 ambient = UNITY_LIGHTMODEL_ AMBIENT.xyz * albedo; 


fixed3 diffuse = _LightCcolorg,rgb * albedo * max(0, 
dot(worldNormal, worldLightDir)); 


fixed3 viewDir normalize(UnityworldSpaceViewDir(i.worldPos)); 

fixed3 halfDir normalize(worldLightDir + viewDir); 

fixed3 specular = _LightCcolorgo.rgb * _Specular.rgb * pow(max(0, 
dot(worldNormal, halfDir)), _Gloss); 


return fixed4(ambient + diffuse + specular, 1.0); 


上 上 面 的 代码 百 先 计算 了 世界 空间 下 的 法 线 方 同 和 光照 方 辐 。 然 
后 ， 使 用 Cg 的 tex2D 函 数 对 纹理 进行 采样 。 它 的 第 一 个 参数 是 需要 被 采 
样 的 纹理 ， 第 二 个 参数 是 一 个 float2 类 型 的 纹理 坐标 ， 它 将 返回 计算 得 
到 的 纹 素 值 。 我 们 使 用 采样 结果 和 基色 属性 _Color 的 乘积 来 作为 材质 的 
反射 率 albedo， 并 把 它 和 环境 光照 相 乘 得 到 环境 区 部 分 。 随 后 ， 我 们 使 
用 alpedo 来 计算 漫 反射 光照 的 结果 ， 并 和 环境 光照 、 高 光 反 射 光 照相 加 
后 运 回 。 


(10) 最 后 ， 我 们 为 该 Shader 设 置 了 合适 的 Fallback: 


Fallback "Specular" 


保存 后 返回 Unity 中 查看 。 在 我 们 使 用 
本 书 资源 中 的 Brick_Diffuse.jpg 纹 理 对 Main Tex 属 性 进行 赋值 。 


7.1.2 ”纹理 的 属性 


里 然 很 多 食料 把 Unity 的 纹理 映射 搬 述 得 很 位 单一 一 声明 一 个 纹理 
变量 ， 再 使 用 tex2D 函 数 采 样 。 实 际 上 ， 在 洽 梁 流水 线 中 ， 纹 理 映射 的 
安 现 远 比 我 们 想象 的 复杂 ° 在 本 书 不 会 过 多 涉及 一 些 具体 的 实现 细 
万 ， 但 要 解释 一 些 我 们 认为 读者 必须 要 知道 的 事情 。 在 本 万 中 ， 我 们 
将 关注 Unity 中 的 纹理 属性 


在 我 们 向 Unity 中 导入 一 张 纹理 资源 后 ， 可 以 在 它 的 材质 面板 上 调 
整 其 属性 ， 如 图 7.4 所 示 。 


© Inspector a 
Es Brick Import Setting: TE 
Es Cpen 
Texvure Type 
Aipha from Grayscale | 
WapMode | nepes 
. 
SO Level 


A 图 7.4 纹理 的 属性 


纹理 面板 中 的 第 一 个 属性 是 纹理 类 型 。 在 本 节 中 ， 我 们 使 用 的 是 
Texture 类 型 ， 在 下 面 的 法 线 纹理 一 节 中 ， 我 们 会 使 用 Normal map 类 
型 。 而 在 后 面 的 章 方 中 ， 我 们 还 会 看 到 Cubemap 等 高 级 纹理 类 型 。 我 们 
之 所 以 要 为 导入 的 纹理 选择 合适 的 类 型 ， 是 因为 只 有 这 样 才 能 让 Unity 
知道 我 们 的 意图 ， 为 Unity Shader 传 递 正 确 的 纹理 ， 并 在 一 些 情况 下 可 
以 让 Unity 对 该 纹理 进行 优化 。 


当 把 纹理 类 型 设置 成 Texture 后 ， 下 面 会 有 一 个 Alpha from Grayscale 
复 选 框 ， 如 果 勾 选 了 它 ， 那 么 透明 通道 的 值 将 会 由 每 个 像素 的 灰 度 值 
生成 。 关 于 透明 效果 ， 我 们 会 在 第 8 章 中 讲 到 。 在 这 里 我 们 不 需要 勾 选 


站 


已 O 


下 面 一 个 属性 非常 重要 Wrap Mode。 它 决定 了 当 纹 理 坐 标 超 过 
[0, 1] 范 围 后 将 会 如 何 被 平 铺 。Wrap Mode 有 两 种 模式 : 一 种 是 Repeat， 
在 这 种 模式 下 ， 如 采 纹 理 坐 标 超过 了 1， 那 么 它 的 整数 部 分 将 会 被 含 
弃 ， 而 直接 使 用 小 数 部 分 进行 采样 ， 这 样 的 结 采 是 纹理 将 会 不 断 重 


复 ; 另 一 种 是 Clamp， 在 这 种 模式 下 ， 如 果 纹 理 坐 标 大 于 1， 那 么 将 会 
截取 到 1， 如 果 小 于 0， 那 么 将 会 截取 到 0。 图 7.5 给 出 了 两 种 模式 下 乎 铺 
一 张 纹 理 的 效果 (读者 可 在 本 书 资源 中 的 Scene_7_1_2_a 中 找到 相应 场 


景 ) 。 


和 A 图 7.5 Wrap Mode 决 定 了 当 纹 理 坐 标 超 过 [0, 1] 范 围 后 将 会 如 何 被 平 铺 


图 7.5 展 示 了 在 纹理 的 平 铺 (Tiling) 属性 为 (3, 3) 时 分 别 使 用 两 种 
Wrap Mode 的 结果 。 左 图 使 用 了 Repeat 模 式 ， 在 这 种 模式 下 纹理 将 会 不 
呆 重 复 ; 右 图 使 用 了 Clamp 模 式 ， 在 这 种 模式 下 超过 范围 的 部 分 将 会 
取 到 边界 值 ， 形 成 一 个 条 形 结构 。 

需要 注意 的 是 ， 想 要 让 纹理 得 到 这 样 的 效果 ， 我 们 必须 使 用 纹理 
的 属性 (例如 上 面 的 _MainTex_ST 变 量 ) 在 Unity Shader 中 对 顶点 纹理 
坐标 进行 相应 的 变换 。 也 就 是 说 ， 代 码 中 需要 包含 类 似 下 面 的 代码 : 


O.UV = VvV.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.Zzw; 
// Or just call the built-in function 


O.UV = TRANSFORM_TEX(vVv.texcoord, _MainTex); 


我 们 还 可 以 在 材质 面板 中 调整 纹理 的 偏 移 量 ， 图 7.6 给 出 了 两 种 模 
式 下 调整 纹理 偏 移 量 的 一 个 例子 。 


图 7.6 展 示 了 在 纹理 的 偏 移 属性 为 (0.2, 0.6) 时 分 别 使 用 两 种 Wrap 
Mode 的 结果 ， 左 图 使 用 了 Repeat 模 式 ， 右 图 使 用 了 Clamp 模 式 。 


纹理 导入 面板 中 的 下 一 个 属性 是 Filter Mode 属 性 ， 它 决定 了 当 纹理 
由 于 变换 而 产生 拉 伸 时 将 会 采用 哪 种 滤波 模式 。Filter Mode 支 持 3 种 模 
式 : Point，Biiinear 以 及 iinear。 它 们 得 到 的 图 片 滤波 效果 依次 提 
升 ， 但 需要 耗费 的 性 能 也 依次 增 大 。 纹 理 洪波 会 影响 放大 或 缩小 纹理 
时 得 到 的 图 片 质量 。 例 如 ， 当 我 们 把 一 张 64x64 大 小 的 纹理 贴 在 一 个 
512x512 大 小 的 平面 上 时 ， 就 需要 放大 纹理 。 图 7.7 给 出 了 3 种 滤波 模式 


下 的 放大 绪 有 末 。 读 者 可 以 在 本 书 资源 中 的 Scene_7_1_2_b 中 找到 该 场 


-于 
寻 “” 


(0.2, 0.6) (0.2, 0.6) 


4 图 7.6 偏 移 (Offset) 属性 决定 了 纹理 坐标 的 偏 移 量 


Filter Mode: Point Filter Mode: Bilinear Filter Mode: Trilinear 


A 图 7.7 在 放大 纹理 时 ， 分 别 使 用 3 种 Filter Mode 得 到 的 结果 


纹理 缩小 的 过 程 比 放 大 更 加 复杂 一 些 ， 此 时 原 纹理 中 的 多 个 像素 
将 会 对 应 一 个 目标 像素 。 纹 理 缩小 更 加 复杂 的 原因 在 于 我 们 往往 需要 
处 理 抗 锯 次 问题 ， 一 个 最 常 使 用 的 方法 就 是 使 用 多 级 渐 远 纹理 

(mipmapping) 技术 。 其 中 “mip” 是 拉丁 文 “multum in parvo” 的 缩写 ， 

它 的 意思 是 “在 一 个 小 空间 中 有 许多 东西 >。 如 同 它 的 名 字 ， 多 级 渐 远 
纹理 技术 将 原 纹理 提前 用 滤波 处 理 来 得 到 很 多 更 小 的 图 像 ， 形 成 了 一 
个 图 像 金字 塔 ， 每 一 层 都 是 对 上 一 层 图 像 降 采样 的 结果 。 这 样 在 实时 
运行 时 ， 就 可 以 快速 得 到 结果 像素 ， 例 如 当 物 体 远离 摄像 机 时 ， 可 以 
直接 使 用 较 小 的 纹理 。 但 缺点 是 需要 使 用 一 定 的 空间 用 于 存储 这 些 多 
级 渐 远 纹理 ， 通 第 会 多 占用 33% 的 内 存 空间 。 这 是 一 种 典型 的 用 空间 换 
取 时 间 的 方法 。 在 Unity 中 ， 我 们 可 以 在 纹理 导入 面板 中 ， 首 先 将 纹理 
类 型 (Texture Type) 选择 成 Adqvanced， 再 勾 选 Generate Mip Maps 即 可 
开局 多 级 渐 远 纹理 拉 术 。 同 时， 我 们 还 可 以 选择 生成 多 级 渐 远 纹理 时 
是 否 使 用 线性 空间 〈 用 于 伽 玛 校正 ， 详 见 18.4.2 节 ) 以 及 采用 的 滤波 器 
等 ， 如 图 7.8 所 示 。 


图 7.9 给 出 了 从 一 个 倾斜 的 角度 观察 一 个 网 格 结构 的 地 板 时 ， 使 用 
不 同 Filter Mode 〈 同 时 也 使 用 了 多 级 渐 远 纹理 技术 ) 得 到 的 效果 。 读 者 
可 以 在 本 书 资源 中 的 Scene 7_1 2_c 中 找到 该 场景 。 


在 内 部 实现 上 ，Point 模 式 使 用 了 最 近邻 (nearest neighbor) 滤 
波 ， 在 放大 或 缩小 时 ， 它 的 采样 像素 数目 通常 只 有 一 个 ， 因 此 图 像 会 
看 起 来 有 种 像素 风格 的 效果 。 而 Bilinear 滤 波 则 使 用 了 线性 滤波 ， 对 于 
每 个 目标 像素 ， 它 会 找到 4 个 邻近 像素 ， 然 后 对 它们 进行 线性 插值 混合 
后 得 到 最 终 像素 ， 因 此 图 像 看 起 来 像 被 模糊 了 。 而 Trilinear 滤 波 几 乎 古 
和 Bilinear 一 样 的 ， 只 是 Trilinear 还 会 在 多 级 淘 远 纹理 之 间 进 行 混合 。 如 
采 一 张 纹理 没有 使 用 多 级 渐 远 纹理 技术 ， 那 么 Trilinear 得 到 的 结果 是 和 
Bilinear 就 一 样 的 。 通 常 ， 我 们 会 选择 Bilinear 滤 波 模式 。 需 要 注意 的 
是 ， 有 时 我 们 不 希望 纹理 看 起 来 是 模 灶 的 ， 例 如 对 于 一 些 类 似 棋 一 的 
纹理 ， 我 们 硕 望 它 融 是 像素 风 的 ， 这 时 我 们 可 能 会 选择 Point 模 式 。 


泪 Block Import Settings | 
Open 


Texnere Type 


> 


图 7.8 ”在 Advanced 模 式 下 可 以 设置 多 级 渐 远 纹理 的 相关 属 ' 


研 


A 图 7.9 从 上 到 下 :Point 滤波 + 多 级 渐 远 纹理 技术 ，Bilinear 滤 波 + 多 级 渐 远 纹理 技术 ) ， 
Trilinear 滤 波 + 多 级 渐 远 纹理 技术 


最 后 ， 我 们 来 讲 一 下 纹理 的 最 大 尺寸 和 纹理 模式 。 当 我 们 在 为 不 
同 平台 发 布 游 戏 时 ， 需 要 考虑 目标 平台 的 纹理 尺寸 和 质量 问题 。Unity 


允许 我 们 为 不 同 目标 平台 选择 不 同 的 分 辨 紊 ， 如 图 7.10 所 示 。 


A 图 7.10 ”选择 纹理 的 最 大 尺寸 和 纹理 模式 


如 果 导 入 的 纹理 大 小 超过 了 了 Max Texture Size 中 的 设置 值 ， 那 么 
Unity 将 会 把 该 纹理 缩放 为 这 个 最 大 分 辨 率 。 理 想 情况 下 ， 守 入 的 纹理 
可 以 是 非 正方 形 的 ， 但 长 宽 的 大 小 应 该 是 2 的 需 ， 例 如 2、4、8、16、 
32、64 等 。 如 果 使 用 了 非 2 的 寡 大 小 (Non Power of Two，NPOT) 的 纹 
理 ， 那 么 这 些 纹理 往往 会 占用 更 多 的 内 存 空 间 ， 而 且 GPU 读 取 该 纹理 
的 速度 也 会 有 所 下 降 。 有 一 些 平台 甚至 不 文 持 这 种 NPOT 纹 理 ， 这 时 
Unity 在 内 部 会 把 它 缩放 成 最 近 的 2 的 震 大 小 。 出 于 性 能 和 空间 的 考虑 ， 
我 们 应 该 尽量 使 用 2 的 需 大 小 的 纹理 。 


而 Format 决 定 了 Unity 内 部 使 用 哪 种 格式 来 存储 该 纹理 。 如 采 我 们 
将 Texture Type 设置 为 Advanced， 那 么 会 有 更 多 的 Format 供 我 们 选择 。 
这 里 不 再 依次 介绍 每 种 纹理 模式 ， 但 需要 知道 的 是 ， 使 用 的 纹理 格式 
精度 越 高 (例如 使 用 Truecolor) ， 占 用 的 内 存 空间 越 大 ， 但 得 到 的 效 
有 果 也 越 好 。 我 们 可 以 从 纹理 导入 面板 的 最 下 方 看 到 存储 该 纹理 需要 占 


用 的 内 存 空间 《如 打开 局 了 多 级 渐 远 纹理 技术 ， 也 会 增加 纹理 的 内 存 
占用 ) 。 当 游戏 使 用 了 大 量 Truecolor 类 型 的 纹理 时 ， 内 存 可 能 会 迅速 
增加 ， 因 此 对 于 一 些 不 需要 使 用 很 高 精度 的 纹理 《例如 用 于 漫 反 射 颜 
色 的 纹理 ) ， 我 们 应 该 尽量 使 用 压缩 格式 。 


7.2 凹凸 映射 


纹理 的 另 一 种 常见 的 应 用 就 是 四 凸 映 射 (bump mapping) 。 四 吓 
映射 的 目的 是 使 用 一 张 纹 理 来 修改 模型 表面 的 法 线 ， 以 便 为 模型 提供 
更 多 的 细节 。 这 种 方法 不 会 真 的 改变 模型 的 顶点 位 置 ， 只 是 让 模型 看 
起 来 好 像 是 “凹凸 不 平 ? 的 ， 但 可 以 从 模型 的 轮廓 处 看 出 “破绽 ”。 


有 两 种 主要 的 方法 可 以 用 来 进行 凹凸 映射 : 一 种 方法 是 使 用 一 张 
高 度 纹理 (height map) 来 模拟 表面 位 移 (displacement) ， 然 后 得 到 
一 个 修改 后 的 法 线 值 ， 这 种 方法 也 被 称 为 高 度 上 映射 《height 
mapping) ; 另 一 种 方法 则 是 使 用 一 张 法 线 纹理 (normal map) 来 直 
接 存储 表面 法 线 ， 这 种 方法 又 被 称 为 法 线 映 射 (normal mapping) 。 
尽管 我 们 梨 常 将 凹凸 映 映 和 法 线 映 射 当 成 是 相同 的 技术 ， 但 读者 需要 
知道 它们 之 间 的 不 同 。 


7.2.1 ”高 度 纹理 


我 们 首先 来 看 第 一 种 技术 ， 即 使 用 一 张 高 度 图 来 实现 凹凸 映 射 。 
高 度 图 中 存储 的 是 强度 值 (intensity) ， 它 用 于 表示 模型 表面 局 部 的 海 
拔高 度 。 因 此 ， 颜 色 越 浅 表明 该 位 置 的 表面 越 向 外 凸 起 ， 而 颜色 越 深 
表明 该 位 置 越 问 里 凹 。 这 种 方法 的 好 处 是 非常 直观 ， 我 们 可 以 从 高 度 
图 中 明确 地 知道 一 个 模型 表面 的 凹凸 情 况 ， 但 缺点 是 计算 更 加 复杂 ， 


在 实时 计算 时 不 能 直接 得 到 表面 法 线 ， 而 是 需要 由 像素 的 灰 度 值 计 算 
而 得 ， 因 此 需要 消耗 更 多 的 性 能 。 图 7.11 给 出 了 一 张 高 度 图 。 


A 图 7.11 ”高度 图 


高 度 岁 通常 会 和 法 线 映 射 一 起 使 用 ， 用 于 给 出 表面 四 串 的 额外 信 
恩 。 也 就 是 说 ， 我 们 通常 会 使 用 法 线 映 射 来 修改 光照 。 


7.2.2 ”法 线 纹理 


而 法 线 纹理 中 存储 的 束 是 表面 的 法 线 方向 。 由 于 法 线 方 移 的 分 量 
范围 在 [-1 1]， 而 像素 的 分 量 范 围 为 [0 1]， 因 此 我 们 需要 做 一 个 映 
吊 ， 通 第 使 用 的 映射 就 古 : 


这 就 要 求 ， 我 们 在 Shader 中 对 法 线 纹理 进行 纹理 采样 后 ， 还 需要 对 
结果 进行 一 次 反映 射 的 过 程 ， 以 得 到 原先 的 法 线 方向 。 反 映射 的 过 程 


实际 束 是 使 用 上 面 映 里 钞 数 的 逆 画 数 : 
normal = pixel x 2—1 


然而 ， 由 于 方 同 是 相对 于 坐标 空间 来 说 的 ， 那 么 法 线 纹理 中 存储 
的 法 线 方向 在 哪个 坐标 空间 中 呢 ? 对 于 模型 顶点 自 带 的 法 线 ， 它 们 是 
定义 在 模型 空间 中 的 ， 因 此 一 种 直接 的 想法 就 是 将 修改 后 的 模型 空间 
中 的 表面 法 线 存储 在 一 张 纹 理 中 ， 这 种 纹理 被 称 为 是 模型 空间 的 法 线 
纹理 (object-space normal map) 。 然 而， 在 实际 制作 中 ， 我 们 往往 会 
采用 另 一 种 坐标 空间 ， 即 模型 顶点 的 切线 空间 (tangent space) 来 存储 
法 线 。 对 于 模型 的 每 个 顶点 ， 它 都 有 一 个 属于 自己 的 切线 空间 ， 这 个 
切线 空间 的 原点 就 是 该 顶点 本 身 ， 而 z 轴 是 顶点 的 法 线 方向 (n) ，x 轴 
是 顶点 的 切线 方向 (t) ， 而 y 轴 可 由 法 线 和 切线 又 积 而 得 ， 也 被 称 为 是 
副 切 线 (bitangent，b) 或 副 法 线 ， 如 图 7.12 所 示 。 


这 种 纹理 被 称 为 是 切线 空间 的 法 线 纹理 (tangent-space normal 
map) 。 图 7.13 分 别 给 出 了 模型 空间 和 切线 空间 下 的 法 线 纹理 (图 片 来 
源 : http://www.surlybird.com/tutorials/TangentSpace/) 。 


从 图 7.13 中 可 以 看 出 ， 模 型 空间 下 的 法 线 纹理 看 起 来 是 “五 颜 六 
色 ” 的 。 这 是 因为 所 有 法 线 所 在 的 坐标 空间 是 同一 个 坐标 空间 ， 即 模型 
空间 ， 而 每 个 点 存储 的 法 线 方 同 是 各 异 的 ， 有 的 是 (0, 1, 0)， 经 过 映 喘 
后 存储 到 纹理 中 就 对 应 了 RGB(0.5, 1, 0.5) 浅 绿色 ， 有 的 是 (0, -1, 0)， 经 
过 映射 后 存储 到 纹理 中 就 对 应 了 (0.5, 0, 0.5) 紫 色 。 而 切线 空间 下 的 法 线 
纹理 看 起 来 几乎 全 部 是 浅 蓝 色 的 。 这 是 因为 ， 每 个 法 线 方向 所 在 的 坐 
标 空 间 是 不 一 样 的 ， 即 是 表面 每 点 各 目的 切线 空间 。 这 种 法 线 纹理 其 
实 就 是 存储 了 每 个 点 在 各 自 的 切线 空间 中 的 法 线 扰 动 方向 。 也 就 是 


说 ， 如 有 果 一 个 点 的 法 线 方向 不 变 ， 那 么 在 它 的 切线 空间 中 ， 新 的 法 线 
方 巾 束 古 z 轴 方 辐 ， 即 值 为 (0, 0, 1)， 2 
RGB(0.5, 0.5, 1) 浅 蓝 色 。 而 这 个 颜色 就 是 法 线 纹理 中 大 片 的 蓝 色 。 这 些 
蓝 色 实际 上 说 明 顶 点 的 大 部 分 法 线 是 和 模型 本 身 法 线 一 样 的 ， 不 需 
牙 委 * 


A 图 7.12 ”模型 顶点 的 切线 空间 。 其 中 ， 原 点 对 应 了 顶点 坐标 ，x 轴 是 切线 方向 (t) ，y 轴 是 副 
切线 方向 (b) ，z 轴 是 法 线 方向 (n) 


A 图 7.13 左边: 模型 空间 下 的 法 线 纹理 。 右 边 : 切线 空间 下 的 法 线 纹理 


总 体 来 说 ， 模 型 空间 下 的 法 线 纹理 更 符合 人 类 的 直观 认识 ， 而 且 
法 线 纹理 本 身 也 很 直观 ， 容 易 调整 ， 因 为 不 同 的 法 线 方向 束 代 表 了 不 
同 的 颜色 。 但 美术 人 员 往 往 更 喜欢 使 用 切线 空间 下 的 法 线 纹理 。 那 
么 ， 为 什么 他 们 更 偏好 使 用 这 个 看 起 来 “很 鉴 脚 "的 切线 空间 呢 ? 


实际 上 ， 法 线 本 身 存储 在 哪个 坐标 系 中 都 是 可 以 的 ， 我 们 甚至 可 
以 选择 存储 在 世界 空间 下 。 但 问题 是 ， 我 们 并 不 是 单纯 地 想 要 得 到 法 
线 ， 后 续 的 光照 计算 才 是 我 们 的 目的 。 而 选择 哪个 坐标 系 意味 着 我 们 
需要 把 不 同 信息 转换 到 相应 的 坐标 系 中 。 例 如 ， 如 果 选 择 了 切线 空 
间 ， 我 们 需要 把 从 法 线 纹理 中 得 到 的 法 线 方向 从 切线 空间 转换 到 世界 
空间 (或 其 他 空间 ) 中 。 


总体 来 说 ， 使 用 模型 空间 来 存储 法 线 的 优点 如 下 。 


实现 简单 ， 更 加 直观 。 我 们 甚至 都 不 需要 模型 原始 的 法 线 和 切线 
等 信息 ， 也 就 是 说 ， 计 算 更 少 。 生 成 它 也 非常 简单 ， 而 如 果 要 生 
成 切线 空间 下 的 法 线 纹理 ， 由 于 模型 的 切线 一 般 是 和 UV 方向 相 
同 ， 因 此 想 要 得 到 效 琳 比较 好 的 法 线 映射 束 要 求 纹 理 映 喘 也 是 连 
续 的 。 

在 纹理 坐标 的 颖 合 处 和 尖锐 的 边 角 部 分 ， 可 见 的 突变 ( 颖 际 ) 较 
少 ， 即 可 以 提供 平滑 的 边界 。 这 是 因为 模型 空间 下 的 法 线 纹理 存 
储 的 是 同一 坐标 系 下 的 法 线 信 息 ， 因 此 在 边界 处 通过 插值 得 到 的 
法 线 可 以 平 消 变 换 。 而 切线 空间 下 的 法 线 纹理 中 的 法 线 信息 十 依 
靠 纹理 坐标 的 方向 得 到 的 结果 ， 可 能 会 在 边缘 处 或 尖锐 的 部 分 造 
成 更 多 可 见 的 颖 合 迹象 


但 使 用 切线 空间 有 更 多 优点 。 


自由 度 很 高 。 模 型 空间 下 的 法 线 纹理 记录 的 是 绝对 法 线 信 息 ， 仅 
可 用 于 创建 它 时 的 那个 模型 ， 而 应 用 到 其 他 模型 上 效果 就 完全 错 
误 了 。 而 切线 空间 下 的 法 线 纹理 记录 的 是 相对 法 线 信 息 ， 这 意味 
着 ， 即 便 把 该 纹理 应 用 到 一 个 完全 不 同 的 网 格 上 ， 也 可 以 得 到 一 
个 合理 的 结 

可 进行 UV 动画 。 比 如 ， 我 们 可 以 移动 一 个 纹理 的 UV 坐标 来 实现 
一 个 凹凸 移动 的 效果 ， 但 使 用 模型 空间 下 的 法 线 纹理 会 得 到 完全 
错误 的 结果 。 原 因 同 上 。 这 种 UV 动画 在 水 或 者 火山 熔岩 这 种 类 型 
的 物体 上 会 经 常用 到 。 

可 以 重用 法 线 纹理 。 比 如 ， 一 个 砖 块 ， 我 们 仅 使 用 一 张 法 线 纹理 
就 可 以 用 到 所 有 的 6 个 面 上 。 原 因 同上 。 


。 可 压缩 。 由 于 切线 空间 下 的 法 线 纹理 中 法 线 的 Z 方 问 总 是 正方 回 ， 
因此 我 们 可 以 仅 存 储 XY 方 向 ， 而 推导 得 到 Z 方 向 。 而 模型 空间 下 
的 法 线 纹理 由 于 每 个 方向 都 是 可 能 的 ， 因 此 必须 存储 3 个 方 同 的 
值 ， 不 可 压缩 。 


切线 空间 下 的 法 线 纹理 的 前 两 个 优点 足以 让 很 多 人 放弃 模型 空间 
下 的 法 线 纹理 而 选择 它 。 从 上 面 的 优点 可 以 看 出 ， 切 线 空间 在 很 多 情 
况 下 都 优 于 模型 空间 ， 而 且 可 以 节省 美术 人 员 的 工作 。 因 此 ， 在 本 书 
中 ， 我 们 使 用 的 也 是 切线 空间 下 的 法 线 纹理 。 


7.2.3 “实践 


我 们 需要 在 计算 光照 模型 中 统一 各 个 方向 天 量 所 在 的 坐标 空间 。 
由 于 法 线 纹理 中 存储 的 法 线 是 切线 空间 下 的 方向 ， 因 此 我 们 通 钊 有 两 
种 选择 :一 种 选择 是 在 切线 空间 下 进行 光照 计算 ， 此 时 我 们 需要 把 光 
照 方 喇 、 视 角 方向 变换 到 切线 空间 下 ;， 男 一 种 选择 是 在 世界 空间 下 进 
行 光照 计算 ， 此 时 我 们 需要 把 采样 得 到 的 法 线 方向 变换 到 世界 空间 
下 ， 再 和 世界 空间 下 的 光照 方向 和 视角 方向 进行 计算 。 从 效率 上 来 
说 ， 第 一 种 方法 往往 要 优 于 第 二 种 方法 ， 因 为 我 们 可 以 在 顶点 着 色 咽 
中 束 完 成 对 光照 方向 和 视角 方 癌 的 变换 ， 而 第 二 种 方法 由 于 要 移 对 法 
线 纹理 进行 采样 ， 所 以 变换 过 程 必 须 在 片 元 着 色 右 中 实现 ， 这 意味 着 
我 们 需要 在 片 元 着 色 需 中 进行 一 次 矩阵 操作 。 但 从 通用 性 角度 来 说 ， 
第 二 种 方法 要 优 于 第 一 种 方法 ， 因 为 有 时 我 们 需要 在 世界 空间 下 进行 
一 些 计算 ， 例 如 在 使 用 Cubemap 进 行 环境 映射 时 ， 我 们 需要 使 用 世界 衬 
间 下 的 反射 方向 对 Cubemap 进 行 采样 。 如 果 同 时 需要 进行 法 线 映 射 ， 我 
们 就 需要 把 法 线 方向 变换 到 世界 空间 下 。 当 然 ， 读 者 可 以 选择 其 他 坐 


标 空 间 进行 计算 ， 例 如 模型 空间 等 ， 但 切线 空间 和 世界 空间 是 最 为 向 
用 的 两 种 空间 。 在 本 市 中 ， 我 们 将 依次 实现 上 述 的 两 种 方法 。 


1. 在 切线 空间 下 计算 


我 们 首先 来 实现 第 一 种 方法 ， 即 在 切线 空间 下 计算 光照 模型 。 基 
本 思路 是 : 在 片 元 着 色 紫 中 通过 纹理 采样 得 到 切线 空间 下 的 法 线 ， 然 
后 再 与 切线 空间 下 的 视角 方 同 、 光 照 方向 等 进行 计算 ,得 到 最 终 的 光 
照 结 果 。 为 此 ， 我 们 首先 需要 在 顶点 着 色 虱 中 把 视角 方向 和 光照 方向 
从 模型 空间 变换 到 切线 空间 中 ， 即 我 们 需要 知道 从 模型 空间 到 切线 空 
间 的 变换 和 矩阵。 这 个 变换 矩阵 的 敢 窍 阵 ， 即 从 切线 空间 到 模型 空间 的 
变换 矩阵 是 非常 容易 求 得 的 ， 我 们 在 顶点 着 色 咒 中 按 切 线 (x 轴 ) 、 辑 
切线 (y 轴 ) 、 法 线 (z 轴 ) 的 顺序 按 列 排列 即 可 得 到 (数学 原理 详 见 
4.6.2 廊 ) 。 在 4.6.2 世 中 我 们 已 经 知道 ， 如 果 一 个 变换 中 仅 存 在 平移 和 
旋转 变换 ， 那 么 这 个 变换 的 逆 和 矩阵 束 等 于 它 的 转 置 矩 了 省 ， 而 从 切线 空 
间 到 模型 空间 的 变换 正 是 符合 这 样 要 求 的 变换 。 因 此 ， 从 模型 空间 到 
切线 空间 的 变换 矩阵 束 古 从 切线 空间 到 模型 空间 的 变换 矩阵 的 转 置 矩 
阵 ， 我 们 把 切线 (x 轴 ) 、 副 切线 (y 轴 ) 、 法 线 (z 轴 ) 的 顺序 按 行 排 
列 即 可 得 到 。 在 本 市 最 后 ， 我 们 可 以 得 到 类 似 图 7.14 中 的 效果 。 


为 此 ， 我 们 进行 如 下 准备 工作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene_ 7_ 2 3。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 


个 平行 光 ， 并 且 使 用 了 内 置 的 天 空 合子。 在 Window -> Lighting -> 
Skybox 中 去 挥 场景 中 的 天 空 例子。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
NormalMapTangentSpaceMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 为 
Chapter7-NormalMapTangentSpace。 把 新 的 Unity Shader 赋 给 第 2 步 中 创 
建 的 材质 。 


Maximize on Play | Mute audio | Stats | Gizmos ~ 


NormalMapTangentSpaceMat ”加 尖 , 
Shader [Unity Shaders Book/Chapter 7/Nolr | 
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图 7.14 ”使 用 法 线 纹理 


> 


(4) 在 场景 中 创建 一 个 胶 赛 体 ， 并 把 第 2 步 中 的 材质 赋 给 该 胶 吉 
体 。 


(5) 保存 场景 。 


打开 新 建 的 Chapter7-NormalMapTangentSpace， 删 除 所 有 已 有 代 
码 ， 并 进行 如 下 修改 。 


(1) 首先 ， 我 们 为 该 Unity Shader 定 义 一 个 名 字 : 


Shader "Unity Shaders Book/Chapter 7/Normal Map In Tangent Space" { 


(2) 然后 ， 我 们 在 Properties 语 义 块 中 添加 了 法 线 纹理 的 属性 ， 以 
及 用 于 控制 凹凸 程度 的 属性 : 


Properties { 
_Color ("Color Tint", Color) = (1,1,1,1) 
_MainTex ("Main Tex", 2D) = "white" {} 
_BumpMap ("Normal Map", 2D) = "bump” 他 


_BumpScale ("Bump Scale", Float) = 1.0 
_Specular ("Specular", Color) = (1, 1, 1, 1) 
_Gloss ("Gloss", Range(8.0, 256)) = 20 


} 


对 于 法 线 纹理 _ BumpMap， 我 们 使 用 "bump" 作 为 它 的 默认 
值 。"bump" 是 Unity 内 置 的 法 线 纹 理 ， 当 没有 提供 任何 法 线 纹理 
时 ，"bump" 残 对 应 了 模型 目 市 的 法 线 信息 。_BumpScale 则 是 用 于 控制 
凹凸 程度 的 ， 当 它 为 0 时 ， 意 味 着 该 法 线 纹 理 不 会 对 光照 产生 任何 影 
啊 。 


(3) 我 们 在 SubShader 语 义 块 中 定义 了 一 个 Pass 语 义 块 ， 并 且 在 
Pass 的 第 一 行 指明 了 该 Pass 的 光照 模式 : 
SubShader { 
Pass { 
Tags { "LightMode"="ForwardBase" } 
LightMode 标 签 是 Pass 标 签 中 的 一 种 ， 它 用 于 定义 该 Pass 在 Unity 的 
光照 流 水 线 中 的 角色 。 


(4) 接着 ， 我 们 使 用 CGPROGRAM 和 ENDCG 来 包围 住 Cg 代码 
片 ， 以 定义 最 重要 的 顶点 着 色 器 和 片 元 着 色 器 代码 。 首 先 ， 我 们 使 用 


#pragma 指 令 来 告诉 Unity， 我 们 定义 的 顶点 大 色 右 和 片 元 着 色 侣 叫 什么 
名 字 。 在 本 例 中 ， 它 们 的 名 字 分 别 是 vert 和 frag: 


CGPROGRAM 


#pragma vertex Vert 
#pragma fragment frag 


(5) 为 了 使 用 Unity 内 置 的 一 些 变量 ， 如 _LightColor0， 还 需要 包 
含 进 Unity 的 内 置 文件 Lighting.cginc: 


#include "Lighting.cginc" 


(6) 为 了 和 Properties 语 义 块 中 的 属性 建立 联系 ， 我 们 在 Cg 代码 块 
中 声明 了 和 上 上述 属性 类 型 匹配 的 变量 : 


fixed4 _Color; 
sampler2D _MainTex; 
float4 _MainTex_ST; 
sampler2D _BumpMap ; 
float4 _BumpMap_ST 
float _BumpScale 
fixed4 _Specular; 
float _Gloss; 


为 了 得 到 该 纹理 的 属性 ( 平 铺 和 偏 移 系 数 ) ， 我 们 为 _MainTex 和 
_BumpMap 定 义 了 _MainTex_ST 和 _BumpMap_ST 变 量 。 


(7) 我 们 已 经 知道 ， 切 线 空 间 是 由 顶点 法 线 和 切线 构建 出 的 一 个 
坐标 空间 ， 因 此 我 们 需要 得 到 顶点 的 切线 信息 。 为 此 ， 我 们 修改 顶点 
着 色 器 的 输入 结构 体 a2v: 


struct a2v { 
float4 vertex : POSITION; 
float3 normal : NORMAL; 
float4 tangent : TANGENT ， 


float4 texcoord : TEXCOORD0; 

我 们 使 用 TANGENT 语 义 来 描述 float4 类 型 的 tangent 变 量 ， 以 告诉 
Unity 把 顶点 的 切线 方向 填充 到 tangent 变 量 中 。 需 要 注意 的 是 ， 和 法 线 
方向 normal 不 同 ，tangent 的 类 型 是 float4， 而 非 foat3， 这 是 因为 我 们 需 
要 使 用 tangent.w 分 量 来 决定 切线 空间 中 的 第 三 个 坐标 轴 一 一 副 切线 的 
方 同性 。 


(8) 我 们 需要 在 顶点 着 色 器 中 计算 切线 空间 下 的 光照 和 视角 方 
品 ， 因 此 我 们 在 v2f 结 构 体 中 添加 了 两 个 变量 来 存储 变换 后 的 光照 和 视 
角 方 问 : 


struct v2f { 
float4 pos : SV_POSITION; 
float4 uv : TEXCOORDO; 


float3 lightDir: TEXCOORD1.; 
float3 viewDir : TEXCOORD2 ， 


(9) 定义 顶点 着 色 器 : 


v2f vert(a2v v) { 
v2f Oo; 
0.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


O.UV.Xy 
O.UV.ZW 


= VvV.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw; 
= VvV.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.zw; 
// Compute the binormal 
// float3 binormal = cross( normalize(v.normal), 
normalize(v.tangent.xyz) ) * v.tangent.w; 
// // Construct a matrix which transform vectors from object space 
to tangent space 
// float3x3 rotation = float3x3(v.tangent.xyz, binormal, 
v.normal ); 
// Or just use the built-in macro 
TANGENT_SPACE_ROTATION;,; 


// Transform the light direction from object space to tangent 


Space 
o0.1ightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz; 
// Transform the view direction from object space to tangent 
space 
oO.ViewDir = mul(rotation, ObjSpaceViewDir(v.vertex)).xyz; 


return o; 


} 


由 于 我 们 使 用 了 两 张 纹理 ， 因 此 需要 存储 两 个 纹理 坐标 。 为 此 ， 
我 们 把 v2f 中 的 uv 变量 的 类 型 定义 为 oat4 类 型 ， 其 中 xy 分 量 存 储 了 
_MainTex 的 纹理 坐标 ， 而 zw 分 量 存储 了 _BumpMap 的 纹理 坐标 (实际 
上 ，_MainTex 和 _BumpMap 通 第 会 使 用 同一 组 纹理 坐标 ， 出 于 减少 插值 
寄存 器 的 使 用 数目 的 目的 ， 我 们 往往 只 计算 和 存储 一 个 纹理 坐标 即 
可 ) 。 然 后 ， 我 们 把 模型 空间 下 切线 方向 、 副 切线 方向 和 法 线 方向 按 
行 排列 来 得 到 从 模型 空间 到 切线 空间 的 变换 矩阵 rotation。 需 要 注意 的 
是 ， 在 计算 副 切线 时 我 们 使 用 vtangent,w 和 又 积 结果 进行 相 乘 ， 这 是 因 
为 和 切线 与 法 线 方 问 都 垂直 的 方 各 有 两 个 ， 而 w 决 定 了 我 们 选择 其 中 哪 
一 个 方向 。Unity 也 提供 了 一 个 内 置 安 TANGENT_SPACE_ROTATION 
(在 UnityCG.cginc 中 被 定义 ) 来 帮助 我 们 直接 计算 得 到 rotation 变 换算 
阵 ， 它 的 实现 和 和 上述 代码 完全 一 样 。 然 后 ， 我 们 使 用 Unity 的 内 置 画 数 
ObjSpaceLightDir 和 ObjSpaceViewDir 来 得 到 模型 空间 下 的 光照 和 视角 方 
富 ， 再 利用 变换 和 矩阵 rotation 把 它们 从 模型 空间 变换 到 切线 空间 中 。 


(10) 由 于 我 们 在 顶点 着 色 器 中 完成 了 大 部 分 工作 ， 因 此 片 元 着 
色 器 中 只 需要 采样 得 到 切线 空间 下 的 法 线 方向 ， 再 在 切线 空间 下 进行 
光照 计算 即 可 : 


fixed4 frag(v2f i) : SV_Target { 
fixed3 tangentLightDir = normalize(i,.1lightDir); 
fixed3 tangentViewDir = normalize(i.viewDir); 


// Get the texel in the normal map 


fixed4 packedNormal = tex2D(_BumpMap， 工 ,UV.zw) 

fixed3 tangentNormal; 

// If the texture is not marked as "Normal map" 
// tangentNormal.xy = (packedNormal.xy * 2 - 1) * _BumpScale; 
// tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, 
tangentNormal .xy))); 


// Or mark the texture as "Normal map", and use the built-in 
funciton 

tangentNormal = UnpackNormal(packedNormal); 

tangentNormal.xy *= _BumpScale,; 

tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, 
tangentNormal .xy))); 


fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb; 
fixed3 ambient = UNITY_LIGHTMODEL _ AMBIENT.xyz * albedo; 


fixed3 diffuse = _LightCcolorg,rgb * albedo * max(0, 
dot(tangentNormal, tangentLightDir)); 


fixed3 halfDir = normalize(tangentLightDir + tangentViewDir); 
fixed3 specular = _LightColorO.rgb * _Specular.rgb * pow(max(0, 
dot(tangentNormal, halfDir)), _Gloss); 


return fixed4(ambient + diffuse + specular, 1.0); 


在 上 面 的 代码 中 ， 我 们 首先 利用 tex2D 对 法 线 纹理 _BumpMap 进 行 
采样 。 正 如 本 而 一 开头 所 讲 的 ， 法 线 纹理 中 存储 的 是 把 法 线 经 过 映射 
后 得 到 的 像素 值 ， 因 此 我 们 需要 把 它们 反映 射 回 来 。 如 果 我 们 没有 在 
Unity 里 把 该 法 线 纹理 的 类 型 设置 成 Normal map 〈 详 见 7.2.4 节 ) ， 就 需 
要 在 代码 中 手动 进行 这 个 过 程 。 我 们 首先 把 packedNormal 的 xy 分 量 按 
之 前 提 到 的 公式 映 冉 回 法 线 方 生 ， 然 后 乘 以 _BumpScale (控制 凹凸 程 
度 ) 来 得 到 tangentNormal 的 xy 分 量 。 由 于 法 线 都 是 单位 矢量 ， 因 此 
tangentNormal.z 分 量 可 以 由 tangentNormal.xy 计 算 而 得 。 由 于 我 们 使 用 
的 是 切线 空间 下 的 法 线 纹理 ， 因 此 可 以 你 证 法 线 方 同 的 z 分 量 为 正 。 在 
Unity 中 ， 为 了 方便 Unity 对 法 线 纹理 的 存储 进行 优化 ， 我 们 通常 会 把 法 
线 纹 理 的 纹理 类 型 标识 成 Normal map，Unity 会 根据 平台 来 选择 不 同 的 


压缩 方法 。 这 时 ， 如 果 我 们 再 使 用 上 面 的 方法 来 计算 束 会 得 到 销 误 的 

结果 ， 因 为 此 时 _BumpMap 有 的 rgb 分 量 并 不 再 是 切线 空间 下 法 线 方 同 的 

xyz 值 了 。 在 7.2.4 太 中， 我 们 会 具体 解释 。 在 这 种 情况 下 ， 我 们 可 以 使 
用 Unity 的 内 置 函 数 UnpackNormal 来 得 到 正确 的 法 线 方向 。 


(11) 最 后 ， 我 们 为 该 Unity Shader 设 置 合适 的 Fallback: 


Fallback "Specular" 


保存 后 返回 Unity 中 查看 。 在 NormalMapTangentSpaceMat 的 面板 
上 ， 我 们 使 用 本 书 资源 中 的 Brick_Diffuse.jpg 和 Brick_Normal.jpg 纹 理 对 
其 赋值 。 我 们 可 以 调整 材质 面板 中 的 Bump Scale 属 性 来 改变 模型 的 辕 凸 
程度 。 图 7.15 给 出 了 不 同 的 Bump Scale 属 性 值 下 得 到 的 结果 。 


全 


图 7.15 “使 用 Bump Scale 属性 来 调整 模型 的 四 凸 程度 
2. 在 世界 空间 下 计算 
现在 ， 我 们 来 实现 第 二 种 方法 ， 即 在 世界 空间 下 计算 光照 模型 。 


我 们 需要 在 片 元 着 色 器 中 把 法 线 方向 从 切线 空间 变换 到 世界 空间 下 。 
这 种 方法 的 基本 思想 是 : 在 顶点 着 色 融 中 计算 从 切线 空间 到 世界 空间 


的 变换 矩 孟 ， 并 把 和 传 递 给 片 元 春色 郁 。 变 换 窍 阵 的 计算 可 以 由 顶点 
的 切线 、 副 切线 和 法 线 在 世界 空间 下 的 表示 来 得 到 。 最 后 ， 我 们 只 需 
要 在 片 元 着 色 右 中 把 法 线 纹理 中 的 法 线 方 向 从 切线 空间 变换 到 世界 空 
间 下 即 可 。 尽 管 这 种 方法 需要 更 多 的 计算 ， 但 在 需要 使 用 Cubemap 进 行 
环境 映 冉 等 情况 下 ， 我 们 就 需要 使 用 这 种 方法 。 


为 此 ， 我 们 进行 如 下 准备 工作 。 
(1) 使 用 上 一 节 中 使 用 的 场景 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
Normal MapWorldSpaceMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter7-NormalMapWorldSpace。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材 
质 o 


(4) 把 第 2 步 中 创建 的 材质 赋 给 胶 宫 体 。 


打开 Chapter7-NormalMapWorldSpace， 把 上 一 下 中 的 代码 粘贴 进 
去 ， 并 进行 如 下 修改 : 


(1) 我 们 需要 修改 顶点 着 色 器 的 输出 结构 体 v2f， 使 它 包含 从 切线 
空间 到 世界 空间 的 变换 矩阵 : 


struct v2f { 
float4 pos : SV_POSITION; 
float4 uv : TEXCOORDO; 
float4 Ttow0 : TEXCOORD1; 


float4 Ttow1 : TEXCOORD2; 
float4 Ttow2 : TEXCOORD3; 


我 们 在 3.3.2 节 中 讲 到 ， 一 个 插值 寄存 器 最 多 只 能 存储 float4 大 小 的 
变量 ， 对 于 矩阵 这 样 的 变量 ， 我 们 可 以 把 它们 按 行 拆 成 多 个 变量 再 进 
行 存储 。 上 面 代 码 中 的 TtoW0、TtoW1 和 TtoW2 就 依次 存储 了 从 切线 空 
间 到 世界 空间 的 变换 矩阵 的 每 一 行 。 实 际 上 ， 对 方向 矢量 的 变换 只 需 
要 使 用 3x3 大 小 的 矩阵 ， 也 就 是 说 ， 每 一 行 只 需要 使 用 float3 类 型 的 变 
量 即 可 。 但 为 了 充分 利用 插值 寄存 器 的 存储 空间 ， 我 们 把 世界 空间 下 
的 顶点 位 置 存储 在 这 些 变 量 的 w 分 量 中 。 


(2) 修改 顶点 着 色 器 ， 计 算 从 切线 空间 到 世界 空间 的 变换 矩阵 : 


v2f vert(a2v v) { 
v2f 0o; 
0.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


O.UV.Xy 
O.UV.ZW 


VvV.texcoord.xy * _MainTex_ST.xy + _MainTex_ST.zw; 
VvV.texcoord.xy * _BumpMap_ST.xy + _BumpMap_ST.Zzw; 


float3 worldPos = mul(_Object2Wworld, v.vertex).xyz; 

fixed3 worldNormal = UnityObjectToworldNormal(v.normal); 

fixed3 worldTangent = UnityObjectToworldDir(v.tangent.xyz); 

fixed3 worldBinormal = cross(worldNormal, worldTangent) * 
Vv.tangent.w; 


// Compute the matrix that transform directions from tangent 
space to world space 

// Put the world position in w component for optimization 

Oo.Ttowo = float4(worldTangent.x, worldBinormal.x, 
worldNormal.x, worldPos.x); 

oOo.Ttow1 = float4(worldTangent.y, worldBinormal.y, 
worldNormal.y, worldPos.y); 

oOo.Ttow2 = float4(worldTangent.z, worldBinormal.z, 
worldNormal.z, worldPos.z); 


return o; 


在 上 面 的 代码 中 ， 我 们 计算 了 世界 空间 下 的 顶点 切线 、 副 切线 和 
法 线 的 矢量 表示 ， 并 把 它们 按 列 摆 放 得 到 从 切线 空间 到 世界 空间 的 变 
换 和 矩阵 。 我 们 把 该 答 阵 的 每 一 行 分 别 存储 在 TtoW0、TtoW1 和 TtoW2 


中 ， 并 把 世界 空间 下 的 顶点 位 置 的 xyz 分 量 分 别 存 储 在 了 这 些 变量 的 w 
分 量 中 ， 以 便 充分 利用 插值 寄存 器 的 存储 空间 。 


(3) 修改 片 元 着 色 器 ， 在 世界 空间 下 进行 光照 计算 : 


fixed4 frag(v2f i) : SV_Target { 
// Get the position in world space 
float3 worldPos = float3(i.TtowO.w, i.Ttowi.w, i.TtoWw2.w); 
// Compute the light and view dir in world space 
fixed3 lightDir = normalize(UnityworldSpaceLightDir(worldPos)); 
fixed3 viewDir = normalize(UnityworldSpaceViewDir(worldPos)); 


// Get the normal in tangent space 

fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.,.uv.zw)); 

bump. xy *= _BumpScale， 

bump.z = sqrt(1.0 - saturate(dot(bump.xy, bump.xy))); 

// Transform the normal from tangent space to world space 

bump = normalize(half3(dot(i.TtowoO.xyz, bump), dot(i.Ttowi1.xyz, 
bump), dot(i.Ttow2.xyz, bump))); 


我 们 首先 从 TtoW0、TtoW1 和 TtoW2 的 w 分 量 中 构建 世界 空间 下 的 
坐标 。 然 后 ， 使 用 内 置 的 UnityWorldSpaceLightDir 和 
UnityWorldSpaceViewDir 函 数 得 到 世界 空间 下 的 光照 和 视角 方向 。 接 
着 ， 我 们 使 用 内 置 的 UnpackNormal 函 数 对 法 线 纹理 进行 采样 和 解码 

(需要 把 法 线 纹理 的 格式 标识 成 Normal map) ， 并 使 用 _BumpScale 对 
其 进行 缩放 。 最 后 ， 我 们 使 用 TtoW0、TtoW1 和 TtoW2 存 储 的 变换 矩阵 
把 法 线 变 换 到 世界 空间 下 。 这 是 通过 使 用 点 乘 操 作 来 实现 矩阵 的 每 一 
行 和 法 线 相 乘 来 得 到 的 。 


从 视觉 表现 上 ， 在 切线 空间 下 和 在 世界 空间 下 计算 光照 几乎 没有 
任何 差别 。 在 Unity 4.x 版 本 中 ， 在 不 需要 使 用 Cubemap 进 行 环境 映射 的 
情况 下 ， 内 置 的 Unity Shader 使 用 的 是 切线 空间 来 进行 法 线 映 射 和 光照 


计算 。 而 在 Unity 5.x 中 ， 所 有 内 置 的 Unity Shader 都 使 用 了 世界 空间 来 
进行 光照 计算 。 这 也 是 为 什么 Unity 5.x 中 表面 着 色 器 更 容易 报错 ， 因 为 
它们 使 用 了 更 多 的 插值 寄存 器 来 存储 变换 矩阵 (还 有 一 些 人 额外 的 插值 
寄存 器 是 用 来 辅助 计算 筋 效 的 ， 更 多 内 容 可 以 参见 19.2 他 ) 。 


7.2.4 Unity 中 的 法 线 纹理 类 型 


上 面 我 们 提 到 了 当 把 法 线 纹理 的 纹理 类 型 标识 成 Normal map 时 ， 
可 以 使 用 Unity 的 内 置 函 数 UnpackNormal 来 得 到 正确 的 法 线 方向 ， 如 图 
7.16 所 示 。 
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图 7.16” 当 使 用 UnpackNormal 函 数 计 算法 线 纹理 中 的 法 线 方向 时 ， 需 要 把 纹理 类 型 标识 为 


Normal map 


当 我 们 需要 使 用 那些 包含 了 法 线 映射 的 内 置 的 Unity Shader 时 ， 必 
须 把 使 用 的 法 线 纹理 按 上 面 的 方式 标识 成 Normal map 才 能 得 到 正确 结 
果 (即便 你 忘 了 这 么 做 ，Unity 也 会 在 材质 面板 中 提醒 你 修正 这 个 问 
题 ) ， 这 是 因为 这 些 Unity Shader 都 使 用 了 内 置 的 UnpackNormal 芳 数 来 
采样 法 线 方向。 那么 ， 当 我 们 把 纹理 类 型 设置 成 Normal map 时 a 到 发 发 
生 了 什么 呢 ? 为 什么 要 这 么 做 呢 ? 


简单 来 说 ， 这 么 做 可 以 让 Unity 根 据 不 同 平台 对 纹理 进行 压缩 ( 例 
如 使 用 DXT5nm 格 式 ， 有 具体 的 压缩 细节 可 以 参考 : http://tech- 
artists.org/wiki/Normal_map_compression) ， 再 通过 UnpackNormal 函 数 
来 针对 不 同 的 压缩 格式 对 法 线 纹理 进行 正确 的 采样 。 我 们 可 以 在 
UnityCG.cginc 里 找到 UnpackNormal 函 数 的 内 部 实现 : 


inline fixed3 UnpackNormalDXT5nm (fixed4 packednormal) 


fixed3 normal; 

normal.xy = packednormal.wy * 2 - 1; 

normal.z = sqrt(1 - saturate(dot(normal.xy, normal.xy))); 
return normal; 


} 


inline fixed3 UnpackNormal(fixed4 packednormal) 


{ 
#if defined(UNITY_NO_DXTS5Nm) 
return packednormal.xyz * 2 - 1; 
#else 
return UnpackNormalDXT5nm(packednormal); 
#endif 


从 代码 中 可 以 看 出 ， 在 某 些 平台 上 由 于 使 用 了 DXT5nm 的 压缩 格 
式 ， 因 此 需要 针对 这 种 格式 对 法 线 进行 解码 。 在 DXT5nm 格 式 的 法 线 纹 
理 中 ， 纹 素 的 a 通道 ( 即 w 分 量 ) 对 应 了 法 线 的 x 分 量 ，g 通 道 对 应 了 法 
线 的 y 分 量 ， 而 纹理 的 rfib 通 道 则 会 被 舍 弃 ， 法 线 的 z 分 量 可 以 由 xy 分 量 
推导 而 得 。 为 什么 之 前 的 普通 纹理 不 能 按 这 种 方式 压缩 ， 而 法 线束 需 
要 使 用 DXT5nm 格 式 来 进行 压缩 呢 ? 这 是 因为 ， 按 我 们 之 前 的 处 理 方 
式 ， 法 线 纹理 被 当成 一 个 和 普通 纹理 无 异 的 图 ， 但 实际 上 ， 它 只 有 两 
个 通道 是 真正 必 不 可 少 的 ， 因 为 第 三 个 通道 的 值 可 以 用 另外 两 个 推导 

) 


J 
出 来 (法 线 是 单位 向 量 ， 并 且 切 线 空间 下 的 法 线 方向 的 z 分 量 始 终 为 
正 ) 。 使 用 这 种 压缩 方法 整 可 以 减少 法 线 纹理 占用 的 内 存 空间 。 


当 我 们 把 纹理 类 型 设置 成 Normal map 后 ， 还 有 一 个 复 选 框 是 Create 
from Grayscale， 那 么 它 是 做 什么 用 的 呢 ? 读者 应 该 还 记得 在 本 节 开 始 
我 们 提 到 过 另 一 种 四 是 映射 的 方法 ， 即 使 用 高 度 图 ， 而 这 个 复 选 框 就 
是 用 于 从 高 度 图 中 生成 法 线 纹理 的 。 高 度 图 本 身 记录 的 是 相对 高 度 ， 

是 一 张 灰 度 图 ， 日 色 表 示 相 对 更 高 ， 黑 色 表 示 相 对 更 低 。 当 我 们 把 一 
张 高 度 图 导入 Unity 后 ， 除 了 需要 把 它 的 纹理 类 型 设置 成 Normal map 
外 ， 还 需要 勾 选 Create from Grayscale， 这 样 就 可 以 得 到 类 似 图 7.17 中 的 
结果 。 然 后 ， 我 们 就 可 以 把 它 和 切线 空间 下 的 法 线 纹理 同等 对 待 了 


Wall_Height Import Settings 。 园 加 人 
[Open ， 
Texture Type Normal map $ | 
Create from Grayscale 3 
Bumpiness 
Filtering 
Wrap Mode 
Filter Mode 
Wall_Height 
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A 图 7.17 当 勾 选 了 Create from Grayscale 后 ，Unity 会 根据 高 度 图 来 生成 一 张 切线 空间 下 的 法 线 
纹理 
当 勾 选 了 了 Create from Grayscale 后 ， 还 多 出 了 两 个 选项 -一 


Bumpiness 和 Filtering。 其 i 于 控制 是 凸 程度， 而 Filtering 决 


定 我 们 使 用 哪 种 方式 来 计算 凹凸 程度 ， 它 有 两 种 选项 : 一 种 是 
Smooth， 这 使 得 生成 后 的 法 线 纹理 会 比较 平 消 ， 男 一 种 是 Sharp， 它 会 
使 用 Sobel 滤 波 (一 种 边缘 检测 时 使 用 的 滤波 器 ) 来 生成 法 线 。Sobel 渡 
波 的 实现 非常 简单 ， 我 们 只 需要 在 一 个 3x3 的 滤波 器 中 计算 x 和 y 方 向 上 
的 导数 ， 然 后 从 中 得 到 法 线 即 可 。 有 具体 方法 是 : 对 于 高 度 图 中 的 每 个 
像素 ， 我 们 考虑 它 与 水 平方 向 和 竖 直 方向 上 的 像素 差 ， 把 它们 的 差 当 
成 该 点 对 应 的 法 线 在 x 和 y 方 癌 上 的 位 移 ， 然 后 使 用 之 前 提 到 的 映射 函 
数 存 储 成 到 法 线 纹理 的 r 和 g 分 量 即 可 。 


7.3 渐变 纹理 


尽管 在 一 开始 ， 我 们 在 洽 染 中 使 用 纹理 是 为 了 定义 一 个 物体 的 颜 
色 ， 但 后 来 人 们 发 现 ， 纹 理 其 实 可 以 用 于 存储 任何 表面 属性 。 一 种 常 
见 的 用 法 就 是 使 用 渐 变 纹 理 来 控制 漫 反 射 光照 的 结果 。 在 之 前 计算 漫 
反射 光照 时 ， 我 们 都 是 使 用 表面 法 线 和 光照 方向 的 点 积 结果 与 材质 的 
反射 率 相 乘 来 得 到 表面 的 漫 反 射 光 照 。 但 有 时 ， 我 们 需要 更 加 有 灵活 地 
控制 光照 结果 。 这 种 技术 在 游戏 《军团 要 塞 2》 〈 英 文 名 : 《Team 
Fortress 2》) 中 流行 起 来 ， 它 也 是 由 Valve 公司 (提出 半 兰 伯 特 光照 技 
术 的 公司 ) 提出 来 的 ， 他 们 使 用 这 种 技术 来 泻 染 游戏 中 具有 手 画 风格 
的 角色 。Valve 发 表 了 一 篇 著名 的 论文 来 专门 讲述 在 制作 《军团 要 塞 2》 
时 使 用 的 技术 。 


这 种 技术 最 初 由 Gooch 等 人 在 1998 年 他 们 发 表 的 一 篇 著名 的 论文 
《A Non-Photorealistic Lighting Model For Automatic Technical 
Illustration》 中 被 提出 ， 在 这 篇 论文 中 ， 作 者 提出 了 一 种 基于 冷 到 暖色 
调 (cool-to-warm tones) 的 着 色 技 术 ， 用 来 得 到 一 种 插画 风格 的 泻 染 


效果 。 使 用 这 种 技术 ， 可 以 保证 物体 的 轮廓 线 相 比 于 之 前 使 用 的 传统 
漫 反 射 沦 照 更 加 明显 ， 而 且 能 够 提供 多 种 色调 变化 。 而 现在 ， 很 多 卡 
通风 格 的 泻 染 中 都 使 用 了 这 种 技术 。 我 们 在 14.1 市 中 会 专门 学 习 如 何 编 
写 一 个 卡通 风格 的 Unity Shader 。 


在 本 万 中 ， 我 们 将 学 习 如 何 使 用 一 张 渐变 纹理 来 控制 漫 反 射 光 
照 。 在 学 习 完 本 市 后 ， 我 们 可 以 得 到 类 似 图 7.18 中 的 效 末 。 


4 图 7.18 ”使 用 不 同 的 渐变 纹理 控制 漫 反 射 光照 ， 左 下 和 角 给 出 了 每 张 图 使 用 的 渐变 纹理 


可 以 看 出 ， 使 用 这 种 方式 可 以 自由 地 控制 物体 的 漫 反 射 光 照 。 不 
同 的 渐变 纹理 有 不 同 的 特性 。 例 如 ， 在 左边 的 图 中 ， 我 们 使 用 一 张 从 
紫色 调 到 浅黄 色调 的 渐变 纹理 ; 而 中 间 的 图 使 用 的 渐变 纹理 则 和 《和 军 
团 有 要 塞 2》 中 泻 染 人 物 使 用 的 渐变 纹理 是 类 似 的 ， 它 们 都 是 从 黑色 逐渐 
癌 浅 灰色 徘 扰 ， 而 且 中 间 的 分 界线 部 分 微微 发 红 ， 这 是 因为 画家 在 插 
画 中 往往 会 在 阴影 处 使 用 这 样 的 色调 ; 右 侧 的 渐变 纹理 则 通常 被 用 于 
卡通 风格 的 演 染 ， 这 种 痢 变 纹理 中 的 色调 通 肖 是 突变 的 ， 即 没有 平滑 
过 波 ， 以 此 来 模拟 卡通 中 的 阴影 色 块 。 


为 了 实现 上 述 效果 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene 7_3。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包公 一 个 摄像 机 和 一 个 
平行 光 ， 并 有 旦 使 用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 
中 去 掉 场 景 中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 


RampTlexture Mat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 为 
Chapter7-RampTexture。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 向 场景 中 拖 忠 一 个 Suzanne 模 型 ， 并 把 第 2 步 中 的 材质 赋 给 该 


(5) 保存 场景 。 


打开 新 建 的 Chapter7-RampTexture， 删 除 所 有 已 有 代码 ， 并 进行 如 
下 修改 。 


(1) 首先 ， 我 们 需要 为 这 个 Shader 起 一 个 名 字 : 


(2) 我 们 在 Properties 语 义 块 中 声明 一 个 纹理 属性 来 存储 渐变 纹 


理 : 


Properties { 
_Color ("Color Tint", Color) = (1,1,1,1) 
_RampTex ("Ramp Tex", 2D) = "white" {} 


_Specular ("Specular", Color) = (1, 1, 1, 1) 
_Gloss ("Gloss", Range(8.0, 256)) = 20 


} 


(3) 然后 ， 我 们 在 SubShader 语 义 块 中 定义 了 一 个 Pass 语 义 块 ， 并 
在 Pass 的 第 一 行 指 明了 该 Pass 的 光照 模式 : 
SubShader { 


Pass { 
Tags { "LightMode"="ForwardBase" } 


LightMode 标 签 是 Pass 标 签 中 的 一 种 ， 它 用 于 定义 该 Pass 在 Unity 的 
光照 流水 线 中 的 角色 。 


(4) 然后 ， 我 们 使 用 CGPROGRAM 和 ENDCG 来 包围 住 Cg 代 码 
片 ， 以 定义 最 重要 的 顶点 着 色 器 和 片 元 着 色 器 代码 。 我 们 使 用 #pragma 
指令 来 告诉 Unity， 我 们 定义 的 顶点 着 色 器 和 片 元 着 色 器 叫 什么 名 字 。 
在 本 例 中 ， 它 们 的 名 字 分 别 是 vert 和 frag: 


CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


(5) 为 了 使 用 Unity 内 置 的 一 些 变量 ， 如 _LightColor0， 还 需要 包 
含 进 Unity 的 内 置 文件 Lighting.cginc: 


(6) 随后 ， 我 们 需要 定义 和 Properties 中 各 个 属性 类 型 相 匹配 的 变 


fixed4 _Color; 
sampler2D _RampTex; 
float4 _RampTex_ST; 


fixed4 _Specular; 
float _Gloss; 


我 们 为 渐变 纹理 _RampTex 定 义 了 它 的 纹理 属性 变量 
_Ramplex 9ST。 


(7) 定义 顶点 着 色 器 的 输入 和 输出 结构 体 : 


struct a2v { 
float4 vertex : POSITION; 
float3 normal : NORMAL; 
float4 texcoord : TEXCOORDO; 


}; 


struct v2f { 
float4 pos : SV_POSITION; 
float3 worldNormal : TEXCOORDO; 
float3 worldPos : TEXCOORD1.; 
float2 uv : TEXCOORD2; 


(8) 定义 顶点 着 色 器 : 


vert(a2v v) { 

v2f 0o; 

oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 
oOo.worldNormal = UnityObjectToworldNormal(v.normal); 
oOo.worldPos = mul(_Object2world, v.vertex).xyz; 


O.UV = TRANSFORM_TEX(V.texcoord，_RampTex ) ; 


return o; 


我 们 使 用 了 内 置 的 TRANSFORM_TEX 安 来 计算 经 过 平 铺 和 偏 移 后 
的 纹理 坐标 。 


(9) 接 下 来 是 关键 的 片 元 着 色 器 : 


fixed4 frag(v2f i) : SV_Target { 
fixed3 worldNormal = normalize(i.worldNormal); 
fixed3 worldLightDir = 


normalize(UnityworldSpaceLightDir(i.worldPos)); 
fixed3 ambient = UNITY_LIGHTMODEL_ AMBIENT .xyz; 


// Use the texture to sample the diffuse color 

fixed halfLambert = 0.5 * dot(worldNormal, worldLightDir) + 
0.5; 

fixed3 diffuseColor = tex2D(_RampTex, fixed2(halfLambert, 
halfLambert)).rgb * _Color.rgb; 


fixed3 diffuse = _LightColorO.rgb * diffuseColor; 


fixed3 viewDir normalize(UnityworldSpaceViewDir(i.worldPos)); 

fixed3 halfDir normalize(worldLightDir + viewDir); 

fixed3 specular = _LightColorO.rgb * _Specular.rgb * pow(max(0, 
dot(worldNormal, halfDir)), _Gloss); 


return fixed4(ambient + diffuse + specular, 1.0); 


在 上 面 的 代码 中 ， 我 们 使 用 6.4.3 节 中 提 到 的 半 兰 伯 特 模型 ， 通 过 
对 法 线 方向 和 光照 方 问 的 点 积 做 一 次 0.5 倍 的 缩放 以 及 一 个 0.5 大 小 的 偶 
移 来 计算 半 兰 伯 特 部 分 halfLambert。 这 样 ， 我 们 得 到 的 halfLambert 的 范 
围 被 映 冉 到 了 [0，1] 之 间 。 之 后 ， 我 们 使 用 halfLambert 来 构建 一 个 纹理 
坐标 ， 并 用 这 个 纹理 坐标 对 渐变 纹理 _RampTexj 进 行 采样 。 由 于 
_RampTex 实 际 就 是 一 个 一 维 纹理 〈 它 在 纵 轴 方 向 上 颜色 不 变 ) ， 因 此 
纹理 坐标 的 ul 和 v 方 向 我 们 都 使 用 了 halfLambert。 然 后 ， 把 从 渐变 纹理 
采样 得 到 的 颜色 和 材质 颜色 _Color 相 乘 ， 得 到 最 终 的 漫 反 射 颜色 。 剩 下 
的 代码 就 是 计算 高 光 反 射 和 环境 光 ， 并 把 它们 的 结果 进行 相 加 。 相 信 
读者 已 经 对 这 些 步 又 非常 熟悉 了 。 


(10) 最 后 ， 我 们 为 该 Unity Shader 设 置 合 适 的 Fallback: 


Fallback "Specular" 


傈 存 后 返回 场景 。 我 们 在 本 书 资源 中 提供 了 多 种 渐变 纹理 ， 如 
Ramp_Texture0.psd 和 Ramp_Texture1.psd 等 。 读 者 可 以 党 试 把 不 同 的 渐 
变 纹 理 拖 上 忠 到 材质 面板 查看 效果 。 


需要 注意 的 是 ， 我 们 需要 把 渐变 纹理 的 Wrap Mode 设 为 Clamp 模 
式 ， 以 防止 对 纹理 进行 采样 时 由 于 浮 点 数 精 度 而 造成 的 问题 。 图 7.19 给 
出 了 Wrap Mode 分 别 为 Repeat 和 Clamp 模 式 的 效果 对 比 。 


Wrap Mode: Repea me Wrap Mode: Clamp wd 


A 图 7.19 Wrap Mode 分 别 为 Repeat 和 Clamp 模 式 的 效果 对 比 


可 以 看 出 ， 左 图 (使 用 Repeat 模 式 ) 中 在 高 光 区 域 有 一 些 黑 点 。 这 
是 由 浮 点 精度 造成 的 ， 当 我 们 使 用 fixed2(halfLambert, halfLambert) 对 浙 
变 纹理 进行 采样 时 ， 虽 然 理论 上 halfLambert 的 值 在 [0, 1] 之 间 ， 但 可 能 
会 有 1.000 01 这 样 的 值 出 现 。 如 果 我 们 使 用 的 是 Repeat 模 式 ， 此 时 就 会 
舍弃 整数 部 分 ， 只 保留 小 数 部 分 ， 得 到 的 值 就 是 0.000 01， 对 应 了 渐变 
图 中 最 左边 的 值 ， 即 黑色 。 因 此 ， 就 会 出 现 图 中 这 样 在 高 光 区 域 反 而 


有 黑 点 的 情况 。 我 们 只 需要 把 渐变 纹理 的 Wrap Mode 设 为 Clamp 模 式 就 
可 以 解决 这 种 问题 。 


7.4 刻章 纹理 


遮 罩 纹 理 (mask texture) 是 本 章 要 介绍 的 最 后 一 种 纹理 ， 它 非常 
有 用 ， 在 很 多 商业 游戏 中 都 可 以 见 到 它 的 号 影 。 那 么 什么 是 遮 旱 呢 ? 
丛 单 来 讲 ， 遮 章 人 允许 我 们 可 以 保护 某 些 区 域 ， 使 它们 免 于 某 些 修 改 。 
例如 ， 在 之 前 的 实现 中 ， 我 们 都 是 把 高 光 反 射 应 用 到 模型 表面 的 所 有 
地 方 ， 即 所 有 的 像素 都 使 用 同样 大 小 的 高 光 强 度 和 高 光 指数 。 但 有 
时 ， 我 们 希望 模型 表面 某 些 区 域 的 反光 强烈 一 些 ， 而 某 些 区 域 弱 一 
些 。 为 了 得 到 更 加 细 肛 的 效 末 ， 我 们 融 可 以 使 用 一 张 遮 党 纹理 来 控制 
光照 。 另 一 种 常见 的 应 用 是 在 制作 地 形 材 质 时 需要 混合 多 张 图 片 ， 例 
如 表现 章 地 的 纹理 、 表 现 石子 的 纹理 、 表 现 裸 露 土地 的 纹理 等 ， 使 用 
遮 淖 纹理 可 以 控制 如 何 混合 这 些 纹理 。 


使 用 让 章 纹 理 的 流程 一 般 是 ， 通 过 采样 得 到 迟 章 纹理 的 纹 素 值 ， 
然后 使 用 其 中 某 个 或 某 几 个 ) 通道 的 值 (例如 texel.r) 来 与 某 种 表面 
属性 进行 相 乘 ， 这 样 ， 当 该 通道 的 值 为 0 时 ， 可 以 保护 表面 不 受 该 属性 
的 影响 。 总 而 言 之 ， 使 用 遮 章 纹理 可 以 让 美术 人 员 更 加 精准 (像素 级 
别 ) 地 控制 模型 表面 的 各 种 性 质 。 


7.4.1 ”实践 
在 本 节 中 ， 我 们 将 学 习 如 何 使 用 一 张 高 光 遮 晶 纹 理 ， 逐 像素 地 控 


制 模型 表面 的 高 光 反 射 强度 。 图 17.20 显 示 了 只 包含 漫 反射 、 未 使 用 庶 
齐 的 高 光 反 射 和 使 用 遮 置 的 高 光 反 射 的 对 比 效 果 。 


~ 


> 


图 7.20 ”使 用 高 光 遮 罩 纹 理 。 


从 左 到 右 : 只 包含 漫 反 射 ， 未 使 用 迟 章 的 高 光 反 射 ， 使 


漫 反 漫 + 高 光 反 射 + 遮 罩 


的 高 光 反 射 


用 遮 音 


我 们 使 用 的 收音 纹理 如 图 7.21 所 示 。 可 以 看 出 ， 食 章 纹 理 可 以 让 我 
们 更 加 精细 地 控制 光照 细 下 ， 得 到 更 细腻 的 效果 。 


全 


图 7.21 本 节 使 


用 的 高 光 庶 旱 纹 理 


为 了 在 Unity Shader 中 实现 上 述 效果 ， 我 们 需要 进行 如 下 准备 工 
作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene_7_4。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 
平行 光 ， 并 有 旦 使 用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 
中 去 掉 场 景 中 的 天 空 全 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
MaskTextureMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 为 
Chapter7-MaskTexture。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 创建 一 个 胶 赛 体 ， 并 把 第 2 步 中 的 材质 赋 给 该 胶 喜 
体 。 


(5) 保存 场景 。 


打开 新 建 的 Chapter7-MaskTexture， 删 除 所 有 已 有 代码 ， 并 进行 如 
下 修改 : 


(1) 首先 ， 我 们 需要 为 这 个 Shader 起 一 个 名 字 : 
(2) 我 们 需要 在 Properties 语 义 块 中 声明 更 多 的 变量 来 控制 高 光 反 


射 : 


Properties { 
_Color ("Color Tint", Color) = (1,1,1,1) 
_MainTex ("Main Tex", 2D) = "white" {} 
_BumpMap ("Normal Map", 2D) = "bump" {0} 
_BumpScale("Bump Scale", Float) = 1.0 


_SpecularMask ("Specular Mask", 2D) = "white" {} 
_SpecularScale ("Specular Scale", Float) = 1.0 
_Specular ("Specular", Color) = (1, 1, 1, 1) 
_Gloss ("Gloss", Range(8.0, 256)) = 20 


} 


上 面 属性 中 的 _SpecularMask 即 是 我 们 需要 使 用 的 高 光 反射 让 日 弘 
理 ，_SpecularScale 则 是 用 于 控制 遮 踢 影响 度 的 系数 。 


(3) 然后 ， 我 们 在 SubShader 语 义 块 中 定义 了 一 个 Pass 语 义 块 ， 并 
在 Pass 的 第 一 行 指 明了 该 Pass 的 光照 模式 : 
SubShader { 


Pass { 
Tags { "LightMode"="ForwardBase" } 


LightMode 标 签 是 Pass 标 签 中 的 一 种 ， 它 用 于 定义 该 Pass 在 Unity 的 
光照 流水 线 中 的 角色 。 


(4) 然后 ， 我 们 使 用 CGPROGRAM 和 ENDCG 来 包围 住 Cg 代 码 
片 ， 以 定义 最 重要 的 顶点 着 色 器 和 片 元 着 色 器 代码 。 我 们 使 用 #pragma 
指令 来 告诉 Unity， 我 们 定义 的 顶点 着 色 器 和 片 元 着 色 器 叫 什么 名 字 。 
在 本 例 中 ， 它 们 的 名 字 分 别 是 vert 和 frag: 


CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


(5) 为 了 使 用 Unity 内 置 的 一 些 变量 ， 如 _LightColor0， 还 需要 包 
含 进 Unity 的 内 置 文件 Lighting.cginc: 


#include "Lighting.cginc" 


(6) 随后 ， 我 们 需要 定义 和 Properties 中 各 个 属性 类 型 相 匹配 的 变 


fixed4 _Color; 

sampler2D _MainTex; 
float4 MainTex_ST; 
sampler2D _BumpMap; 


float _BumpScale; 
sampler2D _SpecularMask; 
float _SpecularSscale; 
fixed4 _Specular; 

float _Gloss; 


我 们 为 主 纹理 _MainTex、 法 线 纹理 _ BumpMap 和 氮 罩 纹理 
_SpecularMask 定 义 了 它们 共同 使 用 的 纹理 属性 变量 MainTex_ST。 这 
意味 着 ， 在 材质 面板 中 修改 主 纹理 的 平 铺 系 数 和 偏 移 系数 会 同时 影响 3 
个 纹理 的 采样 。 使 用 这 种 方式 可 以 让 我 们 节省 需要 存储 的 纹理 坐标 数 
目 ， 如 采 我 们 为 每 一 个 纹理 都 使 用 一 个 单独 的 属性 变量 
TextureName_ST， 那 么 随 着 使 用 的 纹理 数目 的 增加 ， 我 们 会 迅速 占 满 
顶点 着 色 器 中 可 以 使 用 的 插值 寄存 器 。 而 很 多 时 候 ， 我 们 不 需要 对 纹 
理 进 行 平 铺 和 位 移 操 作 ， 或 者 很 多 纹理 可 以 使 用 同一 种 平 铺 和 位 移 操 
作 ， 此 时 我 们 残 可 以 对 这 些 纹理 使 用 同一 个 变换 后 的 纹理 坐标 进行 采 
样 。 


(7) 定义 顶点 着 色 器 的 输入 和 输出 结构 体 : 


struct a2v { 
float4 vertex : POSITION; 
float3 normal : NORMAL; 
float4 tangent : TANGENT 
float4 texcoord : TEXCOORDO; 


Struct v2f { 
float4 pos : SV_POSITION; 
float2 uv : TEXCOORDO; 
float3 lightDir: TEXCOORD1.; 
float3 viewDir : TEXCOORD2; 


}; 


(8) 在 顶点 着 色 器 中 ， 我 们 对 光照 方向 和 视角 方向 进行 了 坐标 空 

间 的 变换 ， 把 它们 从 模型 空间 变换 到 了 切线 空间 中 ， 以 便 在 乒 元 着 色 
妖 中 和 法 线 进行 光照 运算 : 
v2f vert(a2v v) { 

v2f Oo; 

oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 

O.UV.Xy = Vv.texcoord.xy * MainTex_ST.xy + _MainTex_ST.Zzw; 

TANGENT_SPACE_ROTATION; 

o.1ightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz; 


oO.vViewDir = mul(rotation, ObjSpaceViewDir(v.vertex)).xyz; 


return o; 


(9) 使 用 遮 罩 纹理 的 地 方 是 片 元 着 色 器 。 我 们 使 用 它 来 控制 模型 
表面 的 高 区 反射 强度 : 


fixed4 frag(v2f i) : SV_Target { 
fixed3 tangentLightDir = normalize(i,.1lightDir); 
fixed3 tangentViewDir = normalize(i.viewDir); 


fixed3 tangentNormal = UnpackNormal(tex2D(_BumpMap, i.uv)); 

tangentNormal.xy *= _BumpScale,; 

tangentNormal.z = sqrt(1.0 - saturate(dot(tangentNormal.xy, 
tangentNormal .xy))); 

fixed3 albedo = tex2D(_MainTex, i.uv).rgb * _Color.rgb; 

fixed3 ambient = UNITY_LIGHTMODEL _ AMBIENT.xyz * albedo; 


fixed3 diffuse = _LightCcolorg,rgb * albedo * max(0, 
dot(tangentNormal, tangentLightDir)); 


fixed3 halfDir = normalize(tangentLightDir + tangentViewDir); 


// Get the mask Value 

fixed specularMask = tex2D(_SpecularMask, i.uv).r * 
_SpecularSscale; 

// Compute specular term with the specular mask 

fixed3 specular = _LightColorO.rgb * _Specular.rgb * pow(max(0, 
dot(tangentNormal, halfDir)), _Gloss) * specularMask; 


return fixed4(ambient + diffuse + specular, 1.0); 


环境 光照 和 漫 反 射 光照 和 之 前 使 用 过 的 代码 完全 一 样 。 在 计算 高 
光 反 射 时 ， 我 们 首先 对 提单 纹理 _SpecularMask 进 行 采 样 。 由 于 本 书 使 
用 的 侦 章 纹理 中 每 个 纹 素 的 rgb 分 量 其 实 都 是 一 样 的 ， 表 明了 该 点 对 应 
的 高 光 反 尉 强度， 在 这 里 我 们 选择 使 用 r 分 量 来 计算 掩 码 值 。 然 后 ， 我 
们 用 得 到 的 掩 码 值 和 _SpecularScale 相 乘 ， 一 起 来 控制 高 光 反 射 的 强 
度 o 


需要 说 明 的 是 ， 我 们 使 用 的 这 张 遮 置 纹理 其 实 有 很 多 空间 被 浪费 
了 一 一 它 的 rgb 分 量 存储 的 都 是 同一 个 值 。 在 实际 的 游戏 制作 中 ， 我 们 
往往 会 充分 利用 迟 章 纹理 中 的 每 一 个 颜色 通道 来 存储 不 同 的 表面 属 
性 ， 我 们 会 在 7.4.2 市 中 介绍 这 样 一 个 例子 。 


(10) 最 后 ， 我 们 为 该 Unity Shader 设 置 了 合适 的 Fallback: 


7.4.2 ”其 他 让 单 纹理 


在 真实 的 游戏 制作 过 程 中 ， 遮 旱 纹 理 已 经 不 止 限 于 保护 某 些 区 域 
使 它们 免 于 某 些 修改 ， 而 是 可 以 存储 任何 我 们 希望 逐 像 素 控制 的 表面 
属性 。 通 常 ， 我 们 会 充分 利用 一 张 纹理 的 RGBA 四 个 通道 ， 用 于 存储 不 
同 的 属性 。 例 如 ， 我 们 可 以 把 高 光 反 射 的 强度 存储 在 R 通 道 ， 把 边缘 光 


照 的 强度 存储 在 G 通 道 ， 把 高 光 反 射 的 指数 部 分 存储 在 B 通 道 ， 最 后 把 
目 发 光 强 度 存储 在 A 通道 。 


在 游戏 《DOTA 2》 的 开发 中 ， 开 发 人 员 为 每 个 模型 使 用 了 4 张 纹 
理 ， 一 张 用 于 定义 模型 颜色 ， 一 张 用 于 定义 表面 法 线 ， 另 外 两 张 则 者 
是 遮 四 纹理。 这 样 ， 两 张 遗 章 纹 理 提供 了 共 8 种 额外 的 表面 属性 ， 这 使 
得 游戏 中 的 人 物 材 质 自由 度 很 强 ， 可 以 支持 很 多 高 级 的 模型 属性 。 读 
者 可 以 在 他 们 的 官网 上 找到 关于 《DOTA 2》 的 更 加 详细 的 制作 资料 ， 
包括 游戏 中 的 人 物 模型 、 纹 理 以 及 制作 手册 等 。 这 是 非常 好 的 学 习 资 
料 。 


第 8 章 ”透明 效果 


透明 是 游戏 中 经 常 要 使 用 的 一 种 效果 。 在 实时 渔 染 中 要 实现 透明 
效果 ， 通 常会 在 演 染 模型 时 控制 它 的 透明 通道 (Alpha Channel) 。 当 
开局 透明 混合 后 ， 当 一 个 物体 被 洽 染 到 屏 硕 上 时 ， 每 个 片 元 除了 闫 色 
值 和 深度 值 之 外 ， 它 还 有 男 一 个 属性 一 一 透明 度 。 当 透明 度 为 1 时 ， 表 
示 该 像素 生 完 全 不 透明 的 ， 而 当 其 为 0 时 ， 则 表示 该 像 系 完全 不 会 显 
生 有 


在 Unity 中 ， 我 们 通常 使 用 两 种 方法 来 实现 透明 效果 :第 一 种 是 使 
用 透明 度 测试 (Alpha Test) ， 这 种 方法 其 实 无 法 得 到 真正 的 半 透 明 效 
果 ; 另 一 种 是 透明 度 混合 (Alpha Blending) 9 


在 之 前 的 学 习 中 ， 我 们 从 没有 强调 过 演 染 顺序 的 问题 。 也 就 是 
说 ， 当 场景 中 包含 很 多 模型 时 ， 我 们 并 没有 考 卡 是 先 泻 染 A， 再 泻 染 
B， 最 后 再 泻 染 C， 还 是 按照 其 他 的 顺序 来 泻 染 。 事 实 上 ， 对 于 不 透明 
(opaque) 物体 ， 不 考虑 它们 的 泻 染 顺 序 也 能 得 到 正确 的 排序 效果 ， 
这 是 由 于 强大 的 深度 缓冲 (depth buffer， 也 被 称 为 z-buffer) 的 存在 。 
在 实时 泻 染 中 ， 深 度 绥 冲 是 用 于 解决 可 见 性 (visibility) 问题 的 ， 它 可 
以 决定 哪个 物体 的 哪些 部 分 会 被 泻 染 在 前 面 ， 而 哪些 部 分 会 被 其 他 物 
体 侦 挡 。 它 的 基本 思想 是 :根据 深度 缓存 中 的 值 来 判断 该 片 元 距离 摄 
像 机 的 距离 ， 当 泻 染 一 个 片 元 时 ， 需 要 把 它 的 深度 值 和 已 经 存在 于 深 
度 缓冲 中 的 值 进行 比较 (如 果 开 启 了 深度 测试 ， 如 果 它 的 值 距 离 摄 
像 机 更 远 ， 那 么 说 明 这 个 片 元 不 应 该 被 渲染 到 屏幕 上 (有 物体 挡住 了 


它 ) ; 否则 ， 这 个 片 元 应 该 履 盖 掉 此 时 颜色 缓冲 中 的 像素 值 ， 并 把 它 
的 深度 值 更 新 到 深度 缓冲 中 (如 有 果 开 启 了 深度 写 入 ) 。 


使 用 深度 绥 冲 ， 可 以 让 我 们 不 用 关心 不 透明 物体 的 泻 染 顺序 ， 例 
如 A 挡 住 E， 即 便 我 们 先 光 染 A 再 得 染 B 也 不 用 担心 B 会 谴 兰 抒 A， 因 为 
在 进行 深度 测试 时 会 判断 出 B 距 离 摄 像 机 更 还， 也 就 不 会 写 入 到 颜色 绥 
冲 中 。 但 如 琳 想 要 实现 透明 效果 ， 事 情 束 不 那么 简单 了 ， 这 是 因为 ， 
当 使 用 透明 度 混合 时 ， 我 们 关闭 了 深度 写 入 (ZWirite) 。 


简单 来 说 ， 透 明度 测试 和 透明 度 混 合 的 基本 原理 如 下 。 


透明 度 测 试 : 它 采 用 一 种 “霸道 极端 ”的 机 制 ， 只 要 一 个 片 元 的 透 
明度 不 满足 条 件 〈 通 常 是 小 于 某 个 靖 值 ) ， 那 么 它 对 应 的 片 元 就 
会 被 舍弃 。 被 舍弃 的 片 元 将 不 会 再 进行 任何 处 理 ， 也 不 会 对 颜色 
缓冲 产生 任何 影响 ， 否 则 ， 就 会 按照 普通 的 不 透明 物体 的 处 理 方 
式 来 处 理 它 ， 即 进行 深度 测试 、 深 度 写 入 等 。 也 就 是 说 ， 透 明度 
测试 是 不 需要 关闭 深度 写 入 的 ， 它 和 其 他 不 透明 物体 最 大 的 不 同 
就 是 它 会 根据 透明 度 来 舍弃 一 些 片 元 。 虽 然 简单 ， 但 是 它 产 生 的 
效果 也 很 极端 ， 要 么 完全 透明 ， 即 看 不 到 ， 要 么 完全 不 透明 ， 恕 
像 不 透明 物体 那样 。 

透明 度 混合 ， 这 种 方法 可 以 得 到 真正 的 半 透 明 效 果 。 它 会 使 用 当 
前 片 元 的 透明 度 作 为 混合 因子 ， 与 已 经 存储 在 颜色 绥 冲 中 的 颜色 
值 进行 混合 ， 得 到 新 的 颜色 。 但 是 ， 透 明度 混合 需要 关闭 深度 写 
入 (我们 下 面 会 讲 为 什么 需要 关闭 ) ， 这 使 得 我 们 要 非常 小 心 物 
体 的 深 染 顺序 。 需 要 注意 的 是 ， 透 明度 混合 只 关闭 了 深度 写 入 ， 
但 没有 关闭 深度 测试 。 这 意味 着 ， 当 使 用 透明 度 混合 泻 染 一 个 片 


元 时 ， 还 是 会 比较 它 的 深度 值 与 当前 深度 缓冲 中 的 深度 值 ， 如 果 
它 的 深度 值 距离 摄像 机 更 远 ， 那 么 束 不 会 再 进行 混合 操作 。 这 一 
点 决定 了 ， 当 一 个 不 透明 物体 出 现在 一 个 透明 物体 的 前 面 ， 而 我 
们 先 泻 染 了 不 透明 物体 ， 它 仍然 可 以 正 闻 地 这 挡 住 透明 物体 。 也 
就 是 说 ， 对 于 透明 度 混 合 来 说 ， 深 度 缓冲 是 只 读 的 。 


8.1 为 什么 泻 染 顺 序 很 重要 


前 面 说 到 ， 对 于 透明 度 混 合 技术 ， 需 要 关闭 深度 写 入 ， 此 时 我 们 
训 需 要 小 心 处 理 透 明 物 体 的 泻 染 顺序 。 那 么 ， 我 们 为 什么 要 关闭 深度 
写 入 昵 ? 如 采 不 关闭 深度 写 入 ， 一 个 半 透 明 表面 背后 的 表面 本 来 是 可 
以 透 过 它 被 我 们 看 到 的 ， 但 由 于 深度 测试 时 判断 结果 是 该 半 透 明 表 面 
距离 摄像 机 更 近 ， 导 致 后 面 的 表面 将 会 家 剔除 ， 我 们 也 融 无 法 透 过 半 
透明 表面 看 到 后 面 的 物体 了 。 但 是 ， 我 们 由 此 束 破 坏 了 深度 缓冲 的 工 
作 机 制 ， 而 这 是 一 个 非常 非常 非常 《重要 的 事情 要 讲 3 遍 ) 粳 糕 的 事 
情 ， 尽 管 我 们 不 得 不 这 样 做 。 关 闭 深 度 写 入 导致 演 染 顺序 将 变 得 非常 
重要 。 


我 们 来 考虑 最 简单 的 情况 。 假 设 场景 里 有 两 个 物体 A 和 B， 如 网 8.1 
所 示 ， 其 中 A 有 是 半 透 明 物 体 ， 而 B 是 不 透明 物体 。 


我 们 来 考虑 不 同 的 泻 染 顺序 会 有 什么 结 


。 第 一 种 情况 ， 我 们 爷 演 染 B， 再 齐 染 A。 那 么 由 于 不 透明 物体 开局 
了 深度 测试 和 深度 写 入 ， 而 此 时 深度 绥 促 中 没有 任何 有 效 数 据 ， 
因此 B 首 先 会 写 入 颜色 绥 冲 和 深度 绥 冲 。 随 后 我 们 泻 染 A， 透 明 物 
体 仍 然 会 进行 深度 测试 ， 因 此 我 们 发 现 和 B 相 比 A 距 离 摄像 机 更 


近 ， 因 此 ， 我 们 会 使 用 A 的 透明 度 来 和 颜色 绥 冲 中 的 B 的 颜色 进行 
混合 ， 得 到 正确 的 半 透 明 效 果 。 

。 第 二 种 情况 ， 我 们 先 泻 染 A， 再 渲染 B。 演 染 A 时 ， 深 度 缓冲 区 中 
没有 任何 有 效 数 据 ， 因 此 A 直接 写 入 颜色 绥 冲 ， 但 由 于 对 半 透 明 物 
体 关 闭 了 深度 写 入 ， 因 此 A 不 会 修改 深度 缓冲 。 等 到 泻 染 B 时 ，B 
会 进行 深度 测试 ， 它 发 现 ,“ 距 ， 深 度 缓 存 中 还 没有 人 来 过 ， 那 我 
就 放心 地 写 入 颜色 缓冲 了 ! ”， 结 果 就 是 B 会 直接 柳 盖 A 的 颜色 。 从 
视觉 上 来 看 ，B 就 出 现在 了 A 的 前 面 ， 而 这 是 错误 的 。 


从 这 个 例子 可 以 看 出 ， 当 关闭 了 深度 写 入 后 ， 演 染 顺 序 是 多 么 重 
要 。 由 此 我 们 知道 ， 我 们 应 该 在 不 透明 物体 泻 染 完 之 后 再 泻 染 半 透 明 
物体 。 那 么 ， 如 有 果 都 是 半 透 明 物 体 ， 演 染 顺 序 还 重要 吗 ? 答案 是 肯定 
的 。 还 是 假设 场景 里 有 两 个 物体 A 和 B， 如 图 8.2 所 示 ， 其 中 A 和 B 都 是 
半 透 明 物 体 。 


| | 
A B 


4 图 8.1 场景 中 有 两 个 物体 ， 其 中 A (黄色 ) 是 半 透 明 物体 ，B (紫色 ) 是 不 透明 物体 


记 
四 


4 图 8.2 ”场景 中 有 两 个 物体 ， 其 中 A 和 B 都 是 半 透 明 物 体 


我 们 还 是 考虑 不 同 的 演 染 顺序 有 什么 不 同 结果 。 


。 第 一 种 情况 ， 我 们 移 泻 庚 B， 再 泻 染 A。 那 么 B 会 正 冲 写 入 颜色 组 
冲 ， 然 后 A 会 和 瑞 色 缓冲 中 的 B 颜 色 进 行 混 合 ， 得 到 正确 的 半 透 明 
人 

。 第 二 种 情况 ， 我 们 先 浑 染 A， 再 演 染 B。 那 么 A 会 先 写 入 颜色 缓 
冲 ， 随 后 B 会 和 颜色 缓冲 中 的 A 进 行 混合 ， 这 样 混合 结 有 末 会 完全 反 
过 来 ， 看 起 来 吏 好 像 B 在 A 的 前 面 ， 得 到 的 吏 是 错 旋 的 半 透 明 绩 
构 。 


从 这 个 例子 可 以 看 出 ， 半 透明 物体 之 间 也 是 要 答 合 一 定 的 浑 染 顺 
序 的 。 

基于 这 两 点 ， 泻 染 引擎 一 般 都 会 先 对 物体 进行 排序 ， 再 浑 染 。 党 
用 的 方法 是 。 


(1) 先 泻 染 所 有 不 透明 物体 ， 并 开启 它们 的 深度 测试 和 深度 写 
入 。 


(2) 把 半 透 明 物 体 按 它们 距离 摄像 机 的 远近 进行 排序 ， 然 后 按照 
从 后 往 前 的 顺序 泻 染 这 些 半 透 明 物体 ， 并 开启 它们 的 深度 测试 ， 但 关 
闭 深度 写 入 。 


那么 ， 问 题 都 解决 了 吗 ? 不 驻 的 是 ， 仍 然 没 有 。 在 一 些 情况 下 ， 

半 透 明 物体 还 是 会 出 现 “ 罕 帮 镜 头 ”。 如 琳 我 们 仔细 想 想 的 话 ， 上 面 给 
出 的 第 2 步 中 渲染 顺序 仍然 是 含糊 不 清 的 一 一 “ 按 它们 距离 摄像 机 的 远 
近 进 行 排序 ?"， 那 么 它们 距离 摄像 机 的 远近 是 如 何 决 定 的 呢 ? 读者 可 能 
会 马上 脱口 而 出 , “就 是 距离 摄像 的 深度 值 嘛 ! ”但 是 ， 深 度 缓冲 中 的 
值 其 实 是 像素 级 别 的 ， 即 每 个 像素 有 一 个 深度 值 ， 但 是 现在 我 们 对 单 
个 物体 级 别 进行 排序 ， 这 意味 着 排序 结果 是 ， 要 么 物体 A 全 部 在 B 前 面 
泻 染 ， 要 么 A 全 部 在 B 后 面 泻 染 。 但 如 果 存 在 循环 重 苔 的 情况 ， 那 么 使 
用 这 种 方法 就 永远 无 法 得 到 正确 的 结果 。 图 8.3 给 出 了 3 个 物体 循环 重 苹 
的 情况 。 


在 图 8.3 中 ， 由 于 3 个 物体 互相 重要 ， 我 们 不 可 能 得 到 一 个 正确 的 排 
序 顺序 。 这 种 时 候 ， 我 们 可 以 选择 把 物体 拆 分 成 两 个 部 分 ， 然 后 再 进 
行 正确 的 排序 。 但 即便 我 们 通过 分 割 的 方法 解决 了 循环 履 盖 的 问题 ， 

还 是 会 有 其 他 的 情况 来 ”的 想 ”。 考虑 图 8.4 给 出 的 情况 。 


图 8.3 


区 


也 


这 里 的 问题 是 : 如 何 排序 ? 我 们 知道 ， 一 个 物体 的 网 格 结构 往往 
占据 了 空间 中 的 某 一 块 区 域 ， 也 就 古 说 ， 这 个 网 格 上 每 一 个 点 的 深度 
值 可 能 都 是 不 一 样 的 ， 我 们 选择 哪个 深度 值 来 作为 整个 物体 的 深度 值 
和 其 他 物体 进行 排序 呢 ? 是 网 格 中 点 吗 ? 还 是 最 远 的 点 ? 还 是 最 近 的 
点 ? 不 和 的 是 ， 对 于 图 8.4 中 的 情况 ， 选 择 哪个 深度 值 都 会 得 到 错误 的 
结 采 ， 我 们 的 排序 结果 总 是 A 在 B 的 前 面 ， 但 实际 上 A 有 一 部 分 被 B 遮 挡 
了 。 这 也 意味 着 ， 一 旦 选 定 了 一 种 判断 方式 后 ， 在 某 些 情况 下 半 透 明 
物体 之 间 一 定 会 出 现 错误 的 民 挡 问题 。 这 种 问题 的 解决 方法 通 第 也 是 


分 割 网 格 。 


图 8.4 ”使 用 哪个 深度 对 物体 进行 排序 。 纪 


循环 重合 的 半 透 明 物 体 总 是 无 没 


A 


得 到 正 丰 


远 的 点 以 及 网 格 中 扣 


的 3 


透明 效果 


[ 色 点 分 别 标明 了 网 格 上 距离 摄像 机 最 近 的 点 、 最 


尽管 结论 是 ， 总 是 会 有 一 些 情况 打 乱 我 们 的 阵脚 ， 但 由 于 上 壕 方 
法 足够 有 效 并 且 容 易 实 现 ， 因 此 大 多 数 游戏 引擎 都 使 用 了 这 样 的 方 
法 。 为 了 减少 错误 排序 的 情况 ， 我 们 可 以 尽 可 能 让 模型 是 凹面 体 ， 并 
且 考 虑 将 复 洒 的 模型 拆 分 成 可 以 独立 排序 的 多 个 子 模型 等 。 其 实 束 算 
排序 错误 结 有 末 有 时 也 不 会 非常 糟糕 ， 如 采 我 们 不 想 分 割 网 格 ， 可 以 试 
着 让 透明 通道 更 加 和 柔和， 使 穿插 看 起 来 并 不 是 那么 明显 。 我 们 也 可 以 
使 用 开局 了 深度 写 入 的 半 透 明 效果 来 近似 模拟 物体 的 半 透 明 ( 详 见 8.5 


市) 


下 面 ， 我 们 就 来 看 一 下 Unity 是 如 何 解 决 排序 问题 的 。 


8.2 Unity Shader 的 泻 染 顺序 


Unity 为 了 解决 泻 染 顺序 的 问题 提供 了 泻 染 队列 (render queue) 
这 一 解决 方案 。 我 们 可 以 使 用 SubShader 的 Queue 标 签 来 决定 我 们 的 模 
型 将 归于 哪个 泻 染 队列 。Unity 在 内 部 使 用 一 系列 整数 索引 来 表示 每 个 
泻 染 队列 ， 且 索引 号 越 小 表示 越 早 被 泻 染 。 在 Unity 5 中 ，Unity 提 前 定 
义 了 5 个 泻 染 队 列 (与 Unity 5 之 前 的 版 本 相 比 多 了 一 个 AlphaTest 泻 染 队 
列 ) ， 当 然 在 每 个 队列 中 间 我 们 可 以 使 用 其 他 队列 。 表 8.1 给 出 了 这 5 个 
提前 定义 的 泻 染 队列 以 及 它们 的 描述 。 


表 8.1 Unity 提 前 定义 的 5 个 演 染 队列 


队列 
名 称 ”| 索引 


号 


队列 
名 称 > 
这 个 演 染 队列 会 在 任何 其 他 队列 之 前 被 渲染 ， 我 们 通常 使 用 
Background | 1000 2 
列 来 演 染 那些 需要 绘制 在 背景 上 的 物体 
默认 的 泻 染 队列 ， 大 多 数 物体 都 使 用 这 个 队列 。 不 透明 物体 使 用 
Geometry |2000|. 
这 个 队列 


需要 透明 度 测试 的 物体 使 用 这 个 队列 。 在 Unity 5 中 它 从 
AlphaTest | 2450 | Geometry 队 列 中 被 单独 分 出 来 ， 这 是 因为 在 所 有 不 透明 物体 泻 染 

之 后 再 泻 染 它们 会 更 加 高 这 

这 个 队列 中 的 物体 会 在 所 有 Geometry 和 AlphaTest 物 体 泻 染 后 ， 
Transparent | 3000 | 再 按 从 后 往 前 的 顺序 进行 泻 染 。 任 何 使 用 了 透明 度 混合 (例如 关 

闭 了 深度 写 入 的 Shader) 的 物体 都 应 该 使 用 该 队列 

i 1 用 可 3 效果 。 需要 在 最 后 泻 染 的 物体 都 应 
Overlay 4000|、 

吏 用 该 队列 


因此 ， 如 果 我 们 想 要 通过 透明 度 测试 实现 透明 效果 ， 代 码 中 应 该 
包含 类 似 下 面 的 代码 ; 


SubShader { 
Tags { "Queue"="AlphaTest" } 
Pass { 


} 


如 有 果 我 们 想 要 通过 透明 度 混 合 来 实现 透明 效果 ， 代 码 中 应 该 包含 
类 似 下 面 的 代码 : 


SubShader { 
Tags { "Queue"="Transparent" } 
Pass 
ZWrite Off 


} 
} 


其 中 ，ZWrite Off 用 于 关闭 深度 写 入 ， | ] 选 择 把 它 写 在 
Pass 中 。 我 们 也 可 以 把 它 写 在 SubShader 中 ， 这 意味 着 该 SubShader 下 的 
所 有 Pass 都 会 关闭 深度 写 入 。 


8.3 透明 度 测试 


我 们 来 看 一 下 如 何在 Unity 中 实现 透明 度 测试 的 效果 。 在 上 面 我 们 
已 经 知道 了 透明 度 测 试 的 工作 原理 。 


透明 度 测 试 : 只 要 一 个 片 元 的 透明 度 不 满足 条 件 (通常 是 小 于 茶 
个 靖 值 ) ， 那 么 它 对 应 的 片 元 就 会 被 舍弃 。 被 舍弃 的 片 元 将 不 会 再 进 
行 任何 处 理 ， 也 不 会 对 颜色 缓冲 产生 任何 影响 ， 否 则 ， 束 会 按照 普通 
的 不 透明 物体 的 处 理 方式 来 处 理 它 。 


通常 ， 我 们 会 在 片 元 着 色 器 中 使 用 clip 函 数 来 进行 透明 度 测试 。 
clip 是 Cg 中 的 一 个 函数 ， 它 的 定义 如 下 。 


阔 数 : void clip(float4 x); void clip(float3 x); void clip(float2 x); void 
clip(float1 x); void clip(float x); 


参数 : 裁剪 时 使 用 的 标量 或 矢量 条 件 。 


描述 ， 如 果 给 定 参数 的 任何 一 个 分 量 是 负数 ， 就 会 舍弃 当前 像素 
的 输出 颜色 。 它 等 同 于 下 面 的 代码 : 


void clip(float4 x) 


if (any(x < 0)) 
discard; 


在 本 下 中 ， 我 们 使 用 图 8.5 中 的 半 透 明 纹理 来 实现 透明 度 测试 。 在 
本 书 资源 中 ， 该 纹理 名 为 ransparent_texture.psd。 该 透明 纹理 在 不 同 区 
域 的 透明 度 也 不 同 ， 我 们 通过 它 来 查看 透明 度 测试 的 效果 。 


在 学 习 完 本 广 后 ， 我 们 可 以 得 到 类 似 图 8.6 中 的 效 采 。 
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图 8.5 一 张 透明 纹理 ， 其 中 


每 个 方 格 的 透明 度 都 不 同 


和 图 8.6， 透明 度 测 试 


为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene 8 3。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包公 一 个 摄像 机 和 一 个 
平行 光 ， 并 有 旦 使 用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 
中 去 掉 场 景 中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 AlphaTestMat 。 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 为 
Chapter8-AlphaTest。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 创建 一 个 立方 体 ， 并 把 第 2 步 中 的 材质 赋 给 该 模 
型 。 创 建 一 个 平面 ， 使 得 平面 位 于 立方 体 下 面 。 


(5) 保存 场景 。 


打开 新 建 的 Chapter8-AlphaTest， 删 除 所 有 已 有 代码 ， 并 进行 如 下 
修改 。 


(1) 首先 ， 我 们 需要 为 这 个 Shader 起 一 个 名 字 : 


Shader "Unity Shaders Book/Chapter 8/Alpha Test" { 


(2) 为 了 在 材质 面板 中 控制 透明 度 测试 时 使 用 的 阔 值 ， 我 们 在 
Properties 语 义 块 中 声明 一 个 范围 在 [0, 1] 之 则 的 属性 _Cutoff: 


Properties { 
_Color ("Main Tint", Color) = (1,1,1,1) 


_MainTex ("Main Tex", 2D) = "white" {} 
_Cutoff ("Alpha Cutoff", Range(0, 1)) = 0.5 


_Cutoff 参 数 用 于 决定 我 们 调用 clip 进 行 透 明度 测试 时 使 用 的 判断 条 
件 。 它 的 范围 是 [0，1]， 这 是 因为 纹理 像素 的 透明 上 度 就 是 在 此 范围 内 。 


(3) 然后 ， 我 们 在 SubShader 语 义 块 中 定义 了 一 个 Pass 语 义 块 : 


SubShader { 
Tags {"Queue"="AlphaTest" "IgnoreProjector"="True" 
"RenderType"="TransparentCutout"} 


Pass { 
Tags { "LightMode"="ForwardBase" } 


我 们 在 8.2 节 中 已 经 知道 泻 染 顺序 的 重要 性 ， 并 且 知 道 在 Unity 中 透 
明度 测试 使 用 的 渲染 队列 是 名 为 AlphaTest 的 队列 ， 因 此 我 们 需要 把 
Queue 标 签 设置 为 AlphaTest。 而 RenderType 标 签 可 以 让 Unity 把 这 个 
Shader 归 入 到 提前 定义 的 组 〈 这 里 就 是 TransparentCutout 组 ) 中， 以 指 
明 该 Shader 是 一 个 使 用 了 透明 度 测试 的 Shader 。 Romar Ie 常 被 
用 于 着 色 器 替换 功能 。 我 们 还 把 IgnoreProjector 设 置 为 True， 这 意味 着 
这 个 Shader 不 会 受到 投影 器 (Projectors) 的 影响 。 通 常 ， 使 用 了 透明 度 
测试 的 Shader 都 应 该 在 SubShader 中 设置 这 三 个 标签 。 最 后 ，LightMode 
标签 是 Pass 标 签 中 的 一 种 ， 它 用 于 定义 该 Pass 在 Unity 的 光照 流水 线 中 的 
角色 。 只 有 定义 了 正确 的 LightMode， 我 们 才能 正确 得 到 一 些 Unity 的 内 
置 光 照 变 量 ， 例 如 _LightColor0 。 


(4) 然后 ， 我 们 使 用 CGPROGRAM 和 ENDCG 来 包围 住 Cg 代码 
片 ， 来 定义 最 重要 的 顶点 着 色 器 和 片 元 着 色 器 代码 。 首 先 ， 我 们 使 用 


ee 告诉 Unity， 我 们 定义 的 顶点 看 色 器 和 片 元 着 色 器 叫 什 么 
名 字 。 在 本 例 中 ， 它 们 的 名 字 分 别 是 vert 和 frag: 


CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


(5) 为 了 使 用 Unity 内 置 的 一 些 变 量 ， 如 _LightColor0， 还 需要 包 
售 进 Unity 的 内 置 文件 Lighting.cginc: 


#include "Lighting.cginc" 


(6) 为 了 和 Properties 语 义 块 中 声明 的 属性 建立 联系 ， 我 们 需要 定 
义 和 各 个 属性 类 型 相 匹配 的 变量 : 


fixed4 _Color; 
sampler2D _MainTex; 


float4 _MainTex_ST; 
fixed _Cutoff; 


由 于 _Cutoff 的 范围 在 [0, 1]， 因 此 我 们 可 以 使 用 fixed 精 度 来 存储 


(7) 然后 ， 我 们 定义 了 顶点 着 色 器 的 输入 和 输出 结构 体 ， 接 着 定 


struct a2v { 
float4 vertex : POSITION; 
float3 normal : NORMAL; 
float4 texcoord : TEXCOORDO; 


}; 


struct v2f { 
float4 pos : SV_POSITION; 
float3 worldNormal : TEXCOORDO; 
float3 worldPos : TEXCOORD1.; 


}; 
v2f 


float2 uv : TEXCOORD2; 


vert(a2v v) { 

v2f Oo; 

oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 
oOo.worldNormal = UnityObjectToworldNormal(v.normal); 


oOo.worldPos = mul(_Object2world, v.vertex).xyz; 


O.UV = TRANSFORM_TEX(Vv.texcoord, _MainTex); 


return o; 


上 面 的 代码 我 们 已 经 见 到 过 很 多 次 了 ， 我 们 在 顶点 看 色 秀 计算 出 


世界 空间 的 法 线 方 向 和 顶点 位 置 以 及 变换 后 的 纹理 坐标 ， 再 把 它们 传 
递 给 片 元 着色 郁 。 


(8) 最 重要 的 透明 度 测试 的 代码 在 片 元 着 色 器 中 


fixed4 frag(v2f i) : SV_Target { 


fixed3 worldNormal = normalize(i.worldNormal); 
fixed3 worldLightDir = 


normalize(UnityworldSpaceLightDir(i.worldPos)); 


fixed4 texColor = tex2D(_MainTex, i.uv); 
// Alpha test 
clip (texColor.a - _Cutoff); 
// Equal to 
if ((texColor.a - _Cutoff) < 0.0) { 
discard; 
} 
fixed3 albedo = texColor.rgb * _Color.rgb; 
fixed3 ambient = UNITY_LIGHTMODEL_ AMBIENT.xyz * albedo; 


fixed3 diffuse = _LightCcolorg,rgb * albedo * max(0, 


dot (worldNormal, worldLightDir)); 


return fixed4(ambient + diffuse, 1.0); 


前 面 我 们 已 经 提 到 过 clip 函 数 的 定义 ， 它 会 判断 它 的 参数 ， 即 
texColora - _Cnutoff 是 否 为 负数 ， 如 果 是 就 会 舍弃 该 片 元 的 输出 。 也 就 
是 说 ， 当 texColora 小 于 材质 参数 _Cutoff 时 ， 该 片 元 承 会 产生 完全 透明 
的 歼 果 。 使 用 dlip 芳 数 等 同 于 先 判 断 参 数 是 否 小 于 零 ， 如 果 是 束 使 用 
discard 指 令 来 显 式 别 除 该 片 元 。 后 面 的 代码 和 之 前 使 用 过 的 完全 一 
样 ， 我 们 计算 得 到 环境 光照 和 漫 反射 光照 ， 把 它们 相 加 后 再 进行 输 
出 o 


(9) 最 后 ， 我 们 需要 为 这 个 Unity Shader 设 置 合适 的 Fallback: 


Fallback "Transparent/Cutout/VertexLit" 


和 之 前 使 用 的 Diffuse 和 Specular 不 同 ， 这 次 我 们 使 用 内 置 的 
Transparent/Cutout/VertexLit 来 作为 回调 Shader。 这 不 仅 能 够 保证 在 我 们 
编写 的 SubShader 无 法 在 当前 显卡 上 工作 时 可 以 有 合适 的 代替 Shader， 
还 可 以 保证 使 用 透明 上 度 测 试 的 物体 可 以 正确 地 向 其 他 物体 投射 阴影 ， 
具体 原理 可 以 参见 9.4.5T。 


材质 面板 中 的 Alpha cutoff 参 数 用 于 调整 透明 度 测 试 时 使 用 的 阔 
值 ， 当 纹理 像素 的 透明 度 小 于 该 值 时 ， 对 应 的 片 元 就 会 被 舍弃 。 当 我 
们 逐渐 调 大 该 值 时 ， 立 方 体 上 的 网 格 会 逐渐 消失 ， 如 图 8.7 所 示 。 


A 图 8.7 随 着 Alpha cutoff 参 数 的 增 大 ， 更 多 的 像素 由 于 不 满足 透明 度 测 试 条件 而 被 剔除 


从 图 8.6 和 图 8.7 可 以 看 出 ， 透 明度 测试 得 到 的 透明 效果 很 “ 极 
端 ' 一 一 要 么 完全 透明 ， 要 么 完全 不 透明 ， 它 的 效果 往往 像 在 一 个 不 透 
明 物 体 上 挖 了 一 个 空洞 。 而 且 ， 得 到 的 透明 效果 在 边缘 处 往往 参差 不 
齐 ， 有 锯 疮 ， 这 是 因为 在 边界 处 纹理 的 透明 度 的 变化 精度 问题 。 为 了 
得 到 更 加 柔滑 的 透明 效果 ， 就 可 以 使 用 透明 度 混 合 。 


8.4 透明 度 混合 


透明 度 混 合 的 实现 要 比 透 明度 测试 复杂 一 些 ， ee 
理 透 明度 测试 时 ， 实 际 上 跟 对 待 普 通 的 不 透明 物体 几乎 是 一 样 的 ， 
是 在 片 元 着 色 器 中 增加 了 对 透明 度 判断 并 裁 前 片 元 的 代码 。 而 想 要 实 
现 透 明度 混合 束 没 有 这 么 简单 了 。 我 们 回顾 之 前 提 到 的 透明 度 混合 的 
原理 : 


透明 度 混合 : 这 种 方法 可 以 得 到 真正 的 半 透 明 效 果 。 它 会 使 用 当 
前 片 元 的 透明 度 作为 混合 因子 ， 与 已 经 存储 在 颜色 缓冲 中 的 颜色 值 进 


行 混合 ， 得 到 新 的 颜色 。 但 是 ， 透 明度 混合 需要 关闭 深度 写 入 ， 这 使 
得 我 们 要 非常 小 心 物体 的 泻 染 顺 序 。 


为 了 进行 混合 ， 我 们 需要 使 用 Unity 提 供 的 混合 命令 一 一 Blend 。 
Blend 是 Unity 提 供 的 设置 混合 模式 的 命令 。 想 要 实现 半 透 明 的 效果 就 需 
要 把 当前 自身 的 颜色 和 已 经 存在 于 颜色 缓冲 中 的 颜色 值 进 行 混 合 ， 混 
合 时 使 用 的 函数 就 是 由 该 指令 决定 的 。 表 8.2 给 出 了 Blend 命 令 的 语义 。 


表 8.2 ShaderLab 的 Blend 命 令 


语 义 
Blend Off 关闭 混 


开启 混合 ， 并 设置 混合 因子 。 源 颜色 (该 片 元 产生 的 颜色 ) 会 
以 SrcFactor， 而 目标 颜色 (已 经 存在 于 颜色 缓存 的 颜色 ) 会 乘 b 
DstFactor， 然 后 把 两 者 相 加 后 再 存 入 颜色 绥 ? 


Blend SrcFactor 


DstFactor 


Blend SrcFactor 
DstFactor, 


:使 用 不 同 的 因子 来 混 


SrcFactorA 
DstFactorA 


BlendOp 并 非 是 把 源 颜 色 和 目标 颜色 简单 相 加 后 混合 ， 
BlendOperation ”| BlendOperation 对 它们 进行 其 他 操作 


在 本 节 里 ， 我 们 会 使 用 第 二 种 语义 ， 即 Blend SrcFactor DstFactor 来 
进行 混合 。 需 要 注意 的 是 ， 这 个 命令 在 设置 混合 因子 的 同时 也 开启 了 


混合 模式 。 这 是 因为 ， 只 有 开局 了 混合 之 后 ， 设 置 片 元 的 透明 通道 才 
有 意义 ， 而 Unity 在 我 们 使 用 Blend 命 令 的 时 候 就 自动 帮 我 们 打开 了 。 很 
多 初学 者 总 是 抱怨 为 什么 目 己 的 模型 没有 任何 透明 效果 ， 这 往往 是 因 
为 他 们 没有 在 Pass 中 使 用 Blend 命 令 ， 一 方面 是 没有 设置 混合 因子 ,但 
更 重要 的 是 ， 根 本 没有 打开 混合 模式 。 我 们 会 把 源 颜 色 的 混合 因子 
SrcFactor 设 为 本 而 目标 颜色 的 混合 因子 DstFactor 设 为 
OneMinusSrcAlpha。 这 意味 着 ， 经 过 混合 后 新 的 颜色 是 : 


DstColor ov = SrcAlpha x SrcColor+ ( 1- SrcAlpha ) x DstColorog 


通常 ， 透 明度 混合 使 用 的 就 是 这 样 的 混合 命令 。 在 8.6 方 中， 我 们 
会 看 到 更 多 混合 语义 的 用 法 。 


我 们 使 用 和 8.3 市 中 同样 的 透明 纹理 ， 在 学 习 完 本 广 后 ， 我 们 可 以 
得 到 类 似 图 8.8 这 样 的 效果 。 
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和 图 8.8 透明 度 混合 


为 了 在 Unity 中 实现 透明 度 混合 ， 我 们 先进 行 如 下 谁 备 工 作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene 8 4。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包 侣 一 个 摄像 机 和 一 个 
平行 光 ， 并 且 使 用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 
中 去 掉 场 景 中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
AlphaBlendMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 为 
Chapter8-AlphaBlend。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 创建 一 个 立方 体 ， 并 把 第 2 步 中 的 材质 赋 给 该 模 
型 。 创 建 一 个 平面 ， 使 得 平面 位 于 立方 体 下 面 。 


(5) 保存 场景 。 


打开 新 建 的 Chapter8-AlphaBlend， 删 除 所 有 已 有 代码 ， 并 把 8.3 节 
的 Chapter8-AlphaTest 代 码 全 部 粘贴 进去 ， 我 们 只 需要 在 这 个 基础 上 进 
行 一 些 修改 即 可 。 


(1) 修改 Properties 语 义 块 : 


Properties { 
_Color ("Main Tint", Color) = (1,1,1,1) 
_MainTex ("Main Tex", 2D) = "white" { 


_Alphascale ("Alpha Scale", Range(0, 1)) = 1 


我 们 使 用 一 个 新 的 属性 _AlphaScale 来 替代 原先 的 _Cutoff 属 性 。 
_AlphaScale 用 于 在 透明 纹理 的 基础 上 控制 整体 的 透明 度 。 相 应 的 ， 我 
们 也 需要 在 Pass 中 修改 和 属性 对 应 的 变量 : 


fixed4 _Color; 
sampler2D _MainTex; 


float4 MainTex_ST; 
fixed _Alphascale; 


(2) 修改 SubShader 使 用 的 标签 : 


SubShader { 
Tags {"Queue"="Transparent" "IgnoreProjector"="True" 
"RenderType"="Transparent"} 


在 本 章 一 开头 ， 我 们 已 经 知道 在 Unity 中 透明 度 混 合 使 用 的 演 染 队 
列 是 名 为 Transparent 的 队列 ， 因 此 我 们 需要 把 Queue 标 签 设置 为 
Transparent。RenderType 标 签 可 以 让 Unity 把 这 个 Shader 归 入 到 提前 定义 
的 组 (这 里 就 是 Transparent 组 ) 中 ， 用 来 指明 该 Shader 是 一 个 使 用 了 透 
明度 混合 的 Shader。 tt 通常 被 用 于 着 色 器 替换 功能 。 我 们 
还 把 IgnoreProjector 设 置 为 True， 这 意味 着 这 个 Shader 不 会 受到 投影 器 

(Projectors) 的 影响 。 通 常 ， 使 用 了 透明 度 混 合 的 Shader 都 应 该 在 

SubShader 中 设置 这 3 个 标签 。 


(3) 与 透明 度 测 试 不 同 的 是 ， 我 们 还 需要 在 Pass 中 为 透明 度 混 合 
进行 合适 的 竭 合 状态 设置 : 


Pass { 
Tags { "LightMode"="ForwardBase" } 


ZWrite Off 
Blend SrcAlpha OneMinusSrcAlpha 


Pass 的 标签 仍 和 之 前 一 样 ， 即 把 LightMode 设 为 ForwardBase， 这 是 
为 了 让 Unity 能 够 按 前 癌 泻 染 路 径 的 方式 为 我 们 正确 提供 各 个 光照 变 
量 。 除 此 之 外 ， 我 们 还 把 该 Pass 的 深度 写 入 (ZWrite) 设置 为 关闭 状态 
(Off) ， 我 们 在 之 前 已 经 讲 过 为 什么 要 这 样 做 了 。 这 是 非常 重要 的 。 


然后 ， 我 们 开局 并 设置 了 该 Pass 的 混合 模式 。 如 在 本 世 开 头 所 讲 的 ， 我 
们 将 源 颜 色 (该 片 元 着 色 句 产生 的 颜色 ) 的 混合 因子 设 为 SrcAlpha， 把 
目标 颜色 (已 经 存在 于 颜色 缓冲 中 的 颜色 ) 的 混合 因子 设 为 
OneMinusSrcAlpha， 以 得 到 合适 的 半 透 明 效 果 。 


(4) 修改 片 元 着 色 器 


fixed4 frag(v2f i) : SV_Target { 
fixed3 worldNormal = normalize(i.worldNormal); 
fixed3 worldLightDir = 
normalize(UnityworldSpaceLightDir(i.worldPos)); 
fixed4 texColor = tex2D(_MainTex, i.uv); 
fixed3 albedo = texColor.rgb * _Color.rgb; 


fixed3 ambient = UNITY_LIGHTMODEL AMBIENT.xyz * albedo; 


fixed3 diffuse = _LightCcolorg,rgb * albedo * max(0, 
dot(worldNormal, worldLightDir)); 


return fixed4(ambient + diffuse, texColor.a * _Alphascale); 


上 壕 代 码 和 8.3 市 中 的 几乎 完全 一 样 ， 只 是 移 除 了 透明 度 测试 的 代 
码 ， 并 设置 了 该 片 元 着 色 器 返回 值 中 的 透明 通道 ， 它 是 纹理 像素 的 透 
明 通 道 和 材质 参数 _AlphaScale 的 乘积 。 正 如 本 证 一 开始 所 说 的 ， 只 有 
i 打开 混合 后 ， 我 们 在 这 里 设置 透明 通道 才 有 意义 ， 否 
则 ， 这 些 透 明度 并 不 会 对 片 元 的 透明 效果 有 任何 影响 。 


(5) 最 后 ， 修 改 Unity Shader 的 Fallback: 


Fallback "Transparent/VertexLit" 


我 们 可 以 调节 材质 面板 上 的 Alpha Scale 参 数 ， 以 控制 整体 透明 度 。 
图 8.9 给 出 了 不 同 Alpha Scale 参数 下 的 半 透 明 效 果 。 


和 图 8.9 ” 随 着 Alpha Scale 参数 的 减 小 ， 模 型 变 得 越 来 越 透 明 


我 们 在 8.1 节 中 详细 解释 了 由 于 关闭 深度 写 入 带 来 的 各 种 问题 。 当 
模型 本 身 有 复杂 的 遮挡 关系 或 是 包含 了 复杂 的 非 凸 网 格 的 时 候 ， 束 会 
有 各 种 各 样 因 为 排序 错误 而 产生 的 错误 的 透明 效果 。 图 8.10 给 出 了 使 用 
上 面 的 Unity Shader 泻 染 Knot 模 型 时 得 到 的 效果 。 


€ Came 
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A 图 8.10” 当 模型 网 格 之 间 有 互相 交 义 的 结构 时 ， 往 往 会 得 到 错误 的 半 透 明 效 果 


这 都 是 由 于 我 们 关闭 了 深度 写 入 造成 的 ， 因 为 这 样 我 们 就 无 法 对 
模型 进行 像素 级 别 的 深度 排序 。 在 8.1 市 中 我 们 提 到 了 一 种 解决 方法 是 


分 割 网 格 ， 从 而 可 以 得 到 一 个 “质量 优等 ?的 网 格 。 但 是 很 多 情况 下 这 
往往 是 不 切实 际 的 。 这 时 ， 我 们 可 以 想 办 法 重新 利用 深度 写 入 ， 让 模 
型 可 以 像 半 透 明 物 体 一 样 进行 痰 入 淡出 。 这 融 是 我 们 下 面 要 讲 的 内 
容 o 
8.5 开启 深度 写 入 的 半 透 明 效 果 

在 8.4 节 最 后 ， 我 们 给 出 了 一 种 由 于 关闭 深度 写 入 而 造成 的 错误 排 
序 的 情况 。 一 种 解决 方法 是 使 用 两 个 Pass 来 泻 染 模型 : 第 一 个 Pass 开 启 
深度 写 入 ， 但 不 输出 颜色 ， 它 的 目的 仅仅 是 为 了 把 该 模型 的 深度 值 写 
入 深度 缓冲 中 ; 第 二 个 Pass 进 行 正常 的 透明 度 混 合 ， 由 于 上 一 个 Pass 已 
经 得 到 了 未 像素 的 正确 的 深度 信息 ， 该 Pass 束 可 以 按照 像素 级 别 的 深度 
排序 结果 进行 透明 演 染 。 但 这 种 方法 的 缺点 在 于 ， 多 使 用 一 个 Pass 会 对 
性 能 造成 一 定 的 影响。 在 本 节 最 后 ， 我 们 可 以 得 到 类 似 图 8.11 中 的 效 
果 。 可 以 看 出 ， 使 用 这 种 方法 ， 我 们 仍然 可 以 实现 模型 与 它 后 面 的 背 
景 混合 的 效果 ， 但 模型 内 部 之 间 不 会 有 任何 真正 的 半 透 明 效 果 。 


NS 


A 图 8.11 开局 了 深度 写 入 的 半 透 明 效 果 


为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene 8 5。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包公 一 个 摄像 机 和 一 个 
平行 光 ， 并 有 旦 使 用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 
中 去 掉 场 景 中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
AlphaBlendZWriteMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 为 
Chapter8-AlphaBlendZWrite。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材 
质 o 


(4) 在 场景 中 创建 一 个 立方 体 ， 并 把 第 2 步 中 的 材质 赋 给 该 模 
型 。 创 建 一 个 平面 ， 使 得 平面 位 于 立方 体 下 面 。 


(5) 保存 场景 。 


本 厄 使 用 的 代码 和 8.4 节 使 用 的 Chapter8-AlphaBlend 几 平 完 全 一 
样 。 我 们 把 Chapter8- AlphaBlend 中 的 代码 粘贴 到 本 万 的 Chapter8- 
AlphaBlendZWrite 中 ， 我 们 只 需要 在 原来 使 用 的 Pass 前 面 再 增加 一 个 新 
的 Pass 即 可 : 


Shader "Unity Shader Book/Chapter8-Alpha Blending ZWrite" { 
Properties { 
_Color ("Main Tint", Color) = (1,1,1,1) 
_MainTex ("Main Tex", 2D) = "white" {} 
_Alphascale ("Alpha Scale", Range(0, 1)) = 1 
} 


SubShader { 
Tags {"Queue"="Transparent" "IgnoreProjector"="True" 
"RenderType"="Transparent"} 


// Extra pass that renders to depth buffer only 
Pass { 

ZWrite On 

ColorMask 0 


} 


Pass { 


// 和 8 .4 六 同样 的 代码 


} 
Fallback "Diffuse" 


这 个 新 添加 的 Pass 的 目的 仅仅 是 为 了 把 模型 的 深度 信息 写 入 深度 绥 
冲 中 ， 从 而 剔除 模型 中 被 目 身 性 挡 的 族 元 。 因 此 ，Pass 的 第 一 行 开 局 了 
深度 写 入 。 在 第 二 行 ， 我 们 使 用 了 一 个 新 的 泻 染 命令 一 一 ColorMask 。 


在 ShaderLab 中 ，ColorMask 用 于 设置 颜色 通道 的 写 掩 码 (write 
mask) 。 它 的 语义 如 下 : 


ColorMask RGB | A | 9 | 其 他 任何 R、G、B、A 的 组 合 


当 ColorMask 设 为 0 时 ， 意 味 着 该 Pass 不 写 入 任何 颜色 通道 ， 即 不 会 
输出 任何 颜色 。 这 正 是 我 们 需要 的 一 一 该 Pass 只 需 写 入 深度 缓存 即 可 。 


8.6 ShaderLab 的 混合 命令 


在 8.4 一 世 中 ， 我 们 已 经 看 到 如 何 利用 Blend 命 令 进 行 混 合 。 实 际 
上 ， 混 含 还 有 很 多 其 他 用 处 ， 不 仅仅 是 用 于 透明 度 混合 。 在 本 下 里 ， 
我 们 将 更 加 详细 地 了 解 混 合 中 的 细 世 问题 。 


我 们 首先 来 看 一 下 混合 是 如 何 实现 的 。 当 片 元 着 色 器 产生 一 个 颜 

色 的 时 候 ， 可 以 选择 与 颜色 缓存 中 的 颜色 进行 混合 。 这 样 一 来 ， 混 合 
就 和 两 个 操作 数 有 关 : 源 颜 色 (source color) 和 目标 颜色 
(destination color) 。 源 颜色 ， 我 们 用 S 表 示 ， 指 的 是 由 片 元 着 色 器 产 
生 的 颜色 值 ， 目 标 颜 色 ， 我 们 用 D 表 示 ， 指 的 是 从 颜色 缓冲 中 读 取 到 的 
颜色 值 。 对 它们 进行 混合 后 得 到 的 输出 颜色 ， 我 们 用 0 表示， 它 会 重新 
写 入 到 颜色 缓冲 中 。 需 要 注意 的 是 ， 当 我 们 谈 及 混合 中 的 源 颜色 、 目 
标 颜 色 和 输出 颜色 时 ， 它 们 都 包含 了 RGBA 四 个 通道 的 值 ， 而 并 非 仅 仅 
是 RGB 通道 。 


想 要 使 用 混合 ， 我 们 必须 首先 开启 它 。 在 Unity 中 ， 当 我 们 使 用 
Blend (Blend Off 命 令 除外 ) 命令 时 ， 除 了 设置 混合 状态 外 也 开启 了 混 
合 。 但 是 ， 在 其 他 图 形 API 中 我 们 是 需要 手动 开启 的 。 例 如 在 OpenGL 
中 ， 我 们 需要 使 用 EnableGL BLEND) 来 开启 混合 。 但 在 Unity 中 ， 它 
已 经 在 背后 为 我 们 做 了 这 些 工作 。 


8.6.1 混合 等 式 和 参数 


在 2.3.8 市 中 我 们 提 到 过 ， 温 合 古 一 个 逐 片 元 的 操作 ， 而 且 它 不 是 
可 编程 的 ， 但 却 是 高 度 可 配置 的 。 也 就 是 说 ， 我 们 可 以 设置 混合 时 使 
用 的 运算 操作 、 混 合 因子 等 来 影响 混合 。 那么 ， 这 些 配置 义 是 如 何 实 
现 的 呢 ? 


现在 ， 我 们 已 知 两 个 操作 数 : 源 颜 色 $S 和 目标 颜色 D， 想 要 得 到 输 
出 颜色 O 就 必须 使 用 一 个 等 式 来 计算 。 我 们 把 这 个 等 式 称 为 混合 等 式 
(blend equation) 。 当 进行 混合 时 ， 我 们 需要 使 用 两 个 混合 等 式 : 一 
个 用 于 混合 RGB 通道 ， 一 个 用 于 混合 A 通 道 。 当 设置 混合 状态 时 ， 我 们 


实际 上 设置 的 就 是 混合 等 式 中 的 操作 和 因子 。 在 默认 情况 下 ， 混 合 等 
式 使 用 的 操作 都 是 加 操作 Cae le 我 们 只 需 需要 
再 设置 一 人 因子 即 可 。 由 于 需要 两 个 等 式 (分 别 用 于 混合 RGB 通 
道 和 A 通 道 ) ， 每 个 等 式 有 两 个 因子 (一 个 用 于 和 源 颜色 相 习 = 用 
于 和 目标 颜色 相 乘 ) ， 因 此 一 共 需 要 4 个 因子 。 表 8.3 给 出 了 ShaderLab 
中 设置 混合 因子 的 命令 。 


表 8.3 ShaderLab 中 设置 混合 因子 的 命令 


开启 混合 ， 并 设置 混合 因子 。 源 颜色 (该 片 元 产生 的 颜色 ) 会 乘 
以 SrcFactor， 而 目标 颜色 〈 已 经 存在 于 颜色 缓存 的 颜色 ) 会 乘 以 


Blend SrcFactor 


DstFactor 


DstFactor， 然 后 者 后 再 存 入 颜色 缓 ; 


Blend SrcFactor 
DstFactor, 


用 不 同 的 因子 来 混 


SrcFactorA 
DstFactorA 


可 以 发 现 ， 第 一 个 命令 只 提供 了 两 个 因子 ， 这 意味 着 将 使 用 同样 
的 混合 因子 来 混合 RGB 通 道 和 A 通道 ， 即 此 时 SrcFactorA 将 等 
SrcFactor，DstFactorA 将 等 于 DstFactor。 下 面 就 是 使 用 这 些 因 子 进行 加 
法 混合 时 使 用 的 混合 公式 : 


Orgb = SrcFactor x 9， gb 十 DstF actor x Dro 


Os = SrecFactorA x So + DstFactorA x DD, 


那么 ， 这 些 混合 因子 可 以 有 哪些 值 呢 ? 表 8.4 给 出 了 ShaderLab 文 持 
的 几 种 混合 因子 。 


表 8.4 ShaderLab 中 的 混合 因子 


因子 为 源 颜色 值 。 当 
SrcColor SrcColor 的 RGB 分 量 作 为 
时 ， 使 用 SrcColor 的 A 分 量 作 


SrcAlpha 天 


因子 为 目标 颜色 值 。 当 用 于 混合 RGB 通 道 的 混合 等 式 时 ， 使 用 
DstColor DstColor 的 RGB 分 量 作为 混合 因子 ， 当 用 于 混合 A 通道 的 混合 等 
式 时 ， 使 用 DstColor 的 A 分 量 作为 混合 因子 。 


DstAlpha 因子 为 目标 颜色 的 透明 度 值 ( 


因子 为 (1- 源 颜色 )。 当 用 于 混合 RGB 的 混合 等 式 时 ， 使 用 结果 
OneMinusSrcColor | 的 RGB 分 量 作为 混合 因子 ， 当 用 于 混合 A 的 混合 等 式 时 ， 使 
结果 的 A 分 量 和 量 


OneMinusSrcAlpha | 因子 为 (1- 源 颜色 的 透明 度 值 ) 


OneMinusDstColor | 因子 为 (1- 目 标 颜色 )。 当 用 于 混合 RGB 的 混合 等 式 时 ， 使 用 结 
的 RGB 分 量 作为 ; 子 ; 当 用 于 混合 A 的 混合 等 式 时 ， 使 
] 结 果 的 A 分 量 作为 混合 因子 


因子 为 (1- 目 标 颜 色 的 透明 度 值 ) 


使 用 上 面 的 指令 进行 设置 时 ，RGB 通 道 的 混合 因子 和 A 通道 的 混合 
因子 都 古 一 样 的 ， 有 时 我 们 希望 可 以 使 用 不 同 的 参数 混合 A 通道 ， 这 时 
就 可 以 利用 Blend SrcFactor DstFactor, SrcFactorA DstFactorA 指 令 。 
例如 ， 如 果 我 们 想 要 在 混合 后 ， 输 出 颜色 的 透明 度 值 就 是 源 颜色 的 透 
明度 ， 可 以 使 用 下 面 的 命令 : 


Blend SrcAlpha OneMinusSrcAlpha, One Zero 


8.6.2 ”混合 操作 


在 上 面 涉及 的 混合 等 式 中 ， 当 把 源 颜 色 和 目标 颜色 与 它们 对 应 的 
混合 因子 相 乘 后 ， 我 们 都 是 把 它们 的 结 末 加 起 来 作为 输出 颜色 的 。 那 
么 可 不 可 以 选择 不 使 用 加 法 ， 而 使 用 减法 呢 ? 答案 是 肯定 的 ， 我 们 可 
以 使 用 ShaderLab 的 BlendOp BlendOperation 命 令 ， 即 混合 操作 命令 。 
表 8.5 给 出 了 ShaderLab 中 文 持 的 混合 操作 。 


表 8.5 ShaderLab 中 的 混合 操作 


将 混合 后 的 源 颜 色 和 目标 颜色 相 加 。 默 认 的 混合 操作 。 使 用 的 混合 等 式 
. Orgb = SrcFactor x Srgv + DstF actor x D 


= SrcFactorA x So DstFactorA x Do 


rgb 


Rl ne 9 : 
Orgb = STCFactor x Pro 一 DstF actor x Drop 


Os, = SrcF'actorA x So — DstF'actorA x D, 


标 闫 色 减 去 混合 后 的 源 颜色 。 使 用 的 六 


用 源 颜 色 和 目标 颜色 中 较 小 的 值 ， 是 逐 分 量 比较 的 。 使 用 的 混合 等 式 


Orgba = (min(Sr, Dr), min(Syg, Dg), min(Ss, D,}, min{ 5,, D, )) 


用 源 颜 色 和 目标 颜色 中 较 大 的 值 ， 是 逐 分 量 比较 的 。 使 用 的 混合 等 式 


Orgba = (max(Sr, Dr), maxl Sg, Dg), maxl Sb, Do), maxl Sa, D',)) 


其 他 逻 
仅 在 DirectX 11.19 


混合 操作 命令 通 第 古 与 混合 因子 命令 一 起 工作 的 。 但 需要 注意 的 
征 ， 当 使 用 Min 或 Max 混 合 操作 时 ， 混 合 因 子 实际 上 有 是 不 起 任何 作用 
的 ， 它 们 仅 会 判断 原始 的 涯 颜色 和 目的 闫 色 之 间 的 比较 结 


8.6.3 ”常见 的 混合 类 型 


过 混合 操作 和 混合 因子 命令 的 组 合 ， 我 们 可 以 得 到 一 些 类 似 
有 模式 中 的 混合 效 采 : 


bd 


// 正常 (Normal) ， 即 透明 度 混 合 
Blend SrcAlpha OneMinusSrcAlpha 


// 柔和 相 加 (Soft Additive) 
Blend OneMinusDstColor One 


// 正片 苔 底 (Multiply) ， 即 相 如 
Blend DstColor Zero 


// 两 倍 相对 (2x Multiply) 
Blend DstColor SrcColor 


// 变 暗 (Darken) 
Blendop Min 
Blend One One 


// 变 亮 (Lighten) 
BlendOop Max 
Blend One One 


// 滤 色 (Screen) 

Blend OneMinusDstColor One 
// 等 同 于 
Blend One OneMinusSrcColor 


// 线性 减 淡 (Linear Dodge) 
Blend One One 


图 8.12 给 出 了 上 面 不 同 设置 下 得 到 的 结果 。 我 们 可 以 在 本 书 资 源 中 
的 Scene_8_6_ 3 场景 中 找到 相关 资源 


正常 (透明 度 混 合 ) 柔和 相 加 


线性 减 淡 


A 图 8.12 不 同 混 合 状 态 设 置 得 到 的 效果 


需要 注意 的 是 ， 虽 然 上 面 使 用 Min 和 Max 混 合 操作 时 仍然 设置 了 混 
合 因 子 ， 但 实际 上 它们 并 不 会 对 结果 有 任何 影响 ， 因 为 Min 和 Max 混 合 
操作 会 名 略 混 合 因 子 。 另 一 点 是 ， 虽 然 上 面 有 些 混合 模式 并 没有 设置 
混合 操作 的 种 类 ， 但 是 它们 默认 就 是 使 用 加 法 操作 ， 相 当 于 设置 了 
BlendOp Add 。 


8.7 双 面 泻 染 的 透明 效果 


在 现实 生活 中 ， 如 果 一 个 物体 是 透明 的 ， 意 味 着 我 们 不 仅 可 以 透 
过 它 看 到 其 他 物体 的 样子 ， 也 可 以 看 到 它 内 部 的 结构 。 但 在 前 面 实现 
的 透明 效果 中 ， 无 论 是 透明 度 测试 还 是 透明 度 混 合 ， 我 们 都 无 法 观察 
到 正方 体内 部 及 其 背面 的 形状 ， 导 致 物体 看 起 来 束 好 像 只 有 半 个 一 
样 。 这 是 因为 ， 默认 情况 下 渲染 引 苟 捆 除 了 物体 背面 (相对 于 摄像 机 
的 方 同 ) 的 洽 染 图 元 ， 而 只 渲染 了 物体 的 正面 。 如 末 我 们 想 要 得 到 双 


面 泻 染 的 效果 ， 可 以 使 用 Cull 指 令 来 控制 需要 剔除 哪个 面 的 演 染 网 元 。 
在 Unity 中 ，Cull 指 令 的 语法 如 下 : 


Cull Back | Front | Off 


如 条 设置 为 Back， 那 么 那些 育 对 着 摄像 机 的 深 染 图 元 吏 不 会 被 演 
沪 ， 这 也 是 于 认 情况 下 的 殊 除 状态 ， 如 琳 设 置 为 Front， 那 么 那些 朝 癌 
摄像 机 的 演 染 图 元 束 不 会 被 渲染 ;如 朱 设 置 态 Off， 残 会 天 财 别 除 功 
能 ， 那 么 所 有 的 泻 染 图 元 都 会 被 泻 染 ， 但 由 于 这 时 需要 泻 染 的 图 元 数 
目 会 成 倍增 加 ， 因 此 除非 是 用 于 特殊 效果 ， 例 如 这 里 的 双 面 泻 染 的 透 
明 效 果 ， 通 向 情况 是 不 会 天 闭 别 除 功 能 的 。 


8.7.1 透明度 测试 的 双 面 演 染 


我 们 首先 来 看 一 下 ， 如 何 让 使 用 了 透明 度 测 试 的 物体 实现 双 面 渔 
染 的 效果 。 这 非常 简单 ， 只 需要 在 Pass 的 泻 染 设置 中 使 用 Cull 指 令 来 关 
闭 剔 除 即 可 。 为 此 ， 我 们 新 建 了 一 个 场景 ， 在 本 章 资 源 中 ， 该 场景 4 
为 Scene 8 7 1， 场景 中 同样 包含 了 一 个 正方 体 ， 它 使 用 的 材质 和 Unity 
Shader 分 别名 为 AlphaTestBothSidedMat 和 Chapter8- 
AlphaTestBothSided。Chapter8-AlphaTestBothSided 风 代码 和 8.3 世 中 的 
Chapter8-AlphaTest 儿 乎 完全 一 样 ， 只 添加 了 一 行 代码 : 


Pass { 
Tags { "LightMode"="ForwardBase" } 


// Turn off culling 
Cull Off 


如 上 所 示 ， 这 行 代 码 的 作用 是 关闭 剔除 功能 ， 使 得 该 物体 的 所 有 
的 泻 染 图 元 都 会 被 洽 染 。 由 此 ， 我 们 可 以 得 到 图 8.13 中 的 效 采 。 


€ Came sm 
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4 图 8.13 ” 双 面 泻 染 的 透明 度 测试 的 物体 


此 时 ， 我 们 可 以 透 过 正方 体 的 镑 空 区 域 看 到 内 部 的 洽 染 结果 。 
8.7.2 ”透明 度 混合 的 双 面 泻 染 


和 透明 度 测 试 相 比 ， 想 要 让 透明 度 混 合 实现 双 面 泻 染 会 更 复杂 一 
些 ， 这 是 因为 透明 度 混 合 需要 关闭 深度 写 入 ， 而 这 是 “一 切 寓 乱 的 开 
端 ”。 我 们 知道 ， 想 要 得 到 正确 的 透明 效果 ， 泻 染 顺序 是 非常 重要 的 
一 一 我 们 想 要 保证 图 元 是 从 后 往 前 泻 染 的 。 对 于 透明 度 测 试 来 说 ， 由 
于 我 们 没有 关闭 深度 写 入 ， 因 此 可 以 利用 深度 缓冲 按 逐 像素 的 粒度 进 
行 深度 排序 ， 从 而 保证 泻 染 的 正确 性 。 然 而 一 旦 关闭 了 深度 写 入 ,我 
们 就 需要 小 心地 控制 泻 染 顺 序 来 得 到 正确 的 深度 关系 。 如 果 我 们 仍然 
采用 8.7.1 广 中 的 方法 ， 直 接 关 闭 吻 除 功能 ， 那 么 我 们 就 无 法 你 证 同一 
个 物体 的 正面 和 背面 图 元 的 演 染 顺序 ， 就 有 可 能 得 到 错误 的 半 透 明 歼 
二 


为 此 ， 我 们 选择 把 双 面 渲染 的 工作 分 成 两 个 Pass 一 一 第 一 个 Pass 只 
泻 染 背面 ， 第 二 个 Pass 只 泻 染 正面 ， 由 于 Unity 会 顺序 执行 SubShader 中 


的 各 个 Pass， 因 此 我 们 可 以 你 证 至 面 总 是 在 正面 被 演 染 之 前 泻 染 ， 从 而 
可 以 保证 正确 的 深度 泻 染 关系 。 


我 们 新 建 了 一 个 场景 ， 在 本 章 资 源 中 ， 该 场景 名 为 Scene_ 8_7_2， 
场景 中 包含 了 一 个 正方 体 ， 它 使 用 的 材质 和 Unity Shader 分 别名 为 
AlphaBlendBothSidedMat 和 Chapter8-AlphaBlendBothSided。 相 较 于 8.4 
六 的 Chapter8-AlphaBlend， 我 们 对 Chapter8-AlphaTestBothSided 的 代码 
做 了 两 个 改动 。 


(1) 复制 原 Pass 的 代码 ， 得 到 另 一 个 Pass 。 


(2) 在 两 个 Pass 中 分 别 使 用 Cull 指 令 剔 除 不 同 朝向 的 泻 染 图 元 : 


Shader "Unity Shaders Book/Chapter 8/Alpha Blend With Both Side" { 
Properties { 
_Color ("Main Tint", Color) = (1,1,1,1) 
_MainTex ("Main Tex", 2D) = "white" {} 
_Alphascale ("Alpha Scale", Range(0, 1)) = 1 


} 
SubShader { 
Tags {"Queue"="Transparent" "IgnoreProjector"="True" 
"RenderType"="Transparent"} 


Pass { 
Tags { "LightMode"="ForwardBase" } 


// First pass renders only back faces 
Cull Front 


// 和 之 前 一 样 的 代码 


} 
Pass { 
Tags { "LightMode"="ForwardBase" } 
// Second pass renders only front faces 
Cull Back 
// 和 之 前 一 样 的 代码 
} 


Fallback "Transparent/VertexLit" 
} 


通过 上 面 的 代码 ， 我 们 可 以 得 到 图 8.14 中 的 效 琳 。 
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和 图 8.14 双 面 泻 染 的 透明 度 混合 的 物体 


第 3 篇 ”中 级 篇 


中 级 篇 是 本 书 的 进 阶 篇 ， 将 讲解 Unity 中 的 泻 染 路 径 、 如 何 计算 光 
照 衰减 和 阴影 、 如 何 使 用 高 级 纹理 和 动画 等 一 系列 进 阶 内 容 。 


第 9 章 更 复杂 的 光照 


我 们 在 初级 篇 中 实现 的 光照 模型 中 没有 考虑 一 些 重要 的 光照 计 
算 ， 如 阴影 和 光照 衰减 。 本 章 首 移 讲 解 Unity 中 的 3 种 演 染 路 径 和 3 种 重 
要 的 光源 类 型 ， 再 解释 如 何在 前 向 渲染 路 径 中 实现 包含 了 光照 衰减 、 
阴影 等 效果 的 完整 的 光照 计算 。 在 本 章 最 后 ， 会 给 出 基于 之 前 学 习 内 
容 实现 的 包含 了 完整 光照 计算 的 Unity Shader 。 


第 10 章 高 级 纹理 


这 一 章 将 会 讲解 如 何在 Unity Shader 中 使 用 立方 体 纹理 、 泻 染 纹理 
和 程序 纹理 等 类 型 的 纹理 。 


第 11 章 让 画面 动 起 来 


静态 的 画面 往往 是 无 趣 的 。 这 一 章 将 帮助 读者 学 习 如 何在 Shader 
中 使 用 时 间 变 量 来 实现 纹理 动画 、 顶 点 动画 等 动态 效果 。 


第 9 章 更 复杂 的 光照 


从 本 章 开始 ， 我 们 就 进入 了 中 级 篇 的 学 习 。 在 初级 篇 中 ， 我 们 对 
实现 的 Unity Shader 中 的 每 一 行 代码 都 进行 了 详细 解释 。 我 们 相信 通过 
初级 篇 的 学 习 ， 读 者 已 经 对 Shader 的 基本 语法 有 了 一 定 了 解 ， 因 此 在 中 
级 篇 以 及 之 后 的 篇 节 中 ， 我 们 不 再 列 出 Unity Shader 中 的 每 一 行 代码 ， 
而 是 选择 其 中 的 关键 代码 进行 解释 。 读 者 可 以 在 本 书 资源 中 找到 完整 
的 实现 。 需 要 注意 的 是 ， 本 章 实 现 的 代码 大 多 是 为 了 阐述 一 些 计 算 的 
实现 原理 ， 并 不 可 以 直接 用 于 项 目 中 。 我 们 会 在 9.5 方 给 出 包含 了 完整 
光照 计算 的 Unity Shader 。 


在 前 面 的 学 习 中 ， 我 们 的 场景 中 都 仪 有 一 个 光源 且 光 源 类 型 是 平 
行 光 (如 果 你 的 场景 不 是 这 样 的 话 ， 可 能 会 得 到 错误 的 结果 ) 。 但 在 
实际 的 游戏 开发 过 程 中 ， 我 们 往往 需要 处 理 数 目 更 多 、 类 型 更 复杂 的 
光源 。 更 重要 的 是 ， 我 们 想 要 得 到 阴影 。 在 本 间 我 们 就 会 学 习 如 何在 
Unity 中 实现 上 面 的 功能 。 


在 学 习 这 些 之 前 ， 我 们 有 必要 知道 Unity 到 故 是 如 何 处 理 这 些 光源 
的 。 也 就 是 说 ， 当 我 们 在 场景 里 放置 了 各 种 类 型 的 光源 后 ，Unity 的 压 
层 泻 染 引 擎 是 如 何 让 我 们 在 Shader 中 访问 到 它们 的 ， 因 此 9.1 节 首先 介 
绍 了 Unity 的 泻 染 路 径 。 之 后 ， 我 们 将 在 9.2 广 中 学 习 如 何人 处理 更 多 不 同 
类 型 的 光源 ， 如 点 光源 和 聚光灯 。9.3 节 将 介绍 如 何在 Unity Shader 中 处 
理光 照 衰减 ， 实 现 距离 光源 越 远 光 强 越 弱 的 效果 。 在 9.4 帮 ， 我 们 将 介 
绍 Unity 中 阴影 的 实现 方法 ， 并 学 习 在 Unity Shader 中 如 何 为 不 同类 型 的 


物体 实现 阴影 效果 。 最 后 ， 我 们 会 在 9.5 广 给 出 本 书 使 用 的 标准 的 Unity 
Shader， 这 些 Unity Shader 包 含 了 完整 的 光照 计算 ， 本 书后 面 的 草 和 中 
也 会 使 用 这 些 Shader 进 行 场景 搭建 。 


9.1 Unity 的 演 染 路 径 


在 Unity 里 ， 泻 染 路 径 (Rendering Path) 决定 了 光照 是 如 何 应 用 
到 Unity Shader 中 的 。 因 此 ， 如 果 要 和 光源 打交道 ， 我 们 需要 为 每 个 
Pass 指 定 它 使 用 的 演 染 路 径 ， 只 有 这 样 才能 让 Unity 知 道 ,“ 哦 ， 原 来 这 
个 程序 员 想 要 这 种 泻 染 路 径 ， 那 么 好 的 ， 我 把 光源 和 处 理 后 的 光照 信 
居 都 放 在 这 些 数 据 里 ， 你 可 以 访问 啦 ! ”也 就 是 说 ， 我 们 只 有 为 Shader 
正确 地 选择 和 设置 了 需要 的 演 染 路 径 ， 该 Shader 的 光照 计算 才能 被 正确 
执行 。 


Unity 文 持 多 种 类 型 的 泻 染 路 径 。 在 Unity 5.0 版 本 之 前 ， 主 要 有 3 

种 : 前 向 演 染 路 径 (Forward Rendering Path) 、 延 迟 泻 染 路 径 

(Deferred Rendering Path) 和 顶点 照明 泻 染 路 径 (Vertex Lit 
Rendering Path) ° 但 在 Unity 5.0 版 本 以 后 ，Unity 做 了 很 多 更 改 ， 主 要 
有 了 两 个 变化 ， 首 和 完 ， 顶 反照 明 泻 染 路 径 已 经 被 Unity 抛 弃 (但 目前 仍然 
可 以 对 之 前 使 用 了 顶点 照明 渲染 路 径 的 Unity Shader 兼 容 | ; 其 次 ， 新 
的 延迟 泻 染 路 径 代 蔡 了 原来 的 延迟 演 染 路 径 (同样 ， 目 前 也 提供 了 对 
较 旧 版 本 的 兼容 ) 。 


大 多 数 情况 下 ， 一 个 项 目 只 使 用 一 种 演 染 路 径 ， 因 此 我 们 可 以 为 
整个 项 目 设置 泻 染 时 的 泻 染 路 径 。 我 们 可 以 通过 在 Unity 的 Edit -~ 
Project Settings — Player -~ Other Settings -~ Rendering Path 中 选择 项 目 


所 需 的 泻 染 路 径 。 默 认 情 况 下 ， 该 设置 选择 的 是 前 向 渲染 路 径 ， 如 图 
9.1 所 示 。 


但 有 时 ， 我 们 希望 可 以 使 用 多 个 演 当 路径， 例如 摄像 机 A 演 染 的 物 
体 使 用 前 向 泻 染 路 径 ， 而 摄像 机 B 泻 染 的 物体 使 用 延迟 泻 染 路 径 。 这 
时 ， 我 们 可 以 在 每 个 摄像 机 的 演 染 路 径 设置 中 设置 该 摄像 机 使 用 的 泻 
染 路 径 ， 以 覆盖 Project Settings 中 的 设置 ， 如 图 9.2 所 示 。 
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A 图 9.2 ”摄像 机 组 件 的 Rendering Path 中 的 设置 可 以 覆盖 Project Settings 中 的 设置 


在 上 面 的 设置 中 ， 如 果 选 择 了 Use Player Settings， 那 么 这 个 摄像 机 
会 使 用 Project Settings 中 的 设置 ;否则 残 会 履 盖 掉 Project Settings 中 的 设 
置 。 需 要 注意 的 是 ， 如 果 当 前 的 显卡 并 不 支持 所 选择 的 演 染 路 径 ， 


Unity 会 自动 使 用 更 低 一 级 的 泻 染 路 径 。 例 如 ， 如 果 一 个 GPU 不 支持 迁 
迟 泻 染 ， 那 么 Unity 就 会 使 用 前 向 泻 染 。 


完成 了 上 面 的 设置 后 ， 我 们 就 可 以 在 每 个 Pass 中 使 用 标签 来 指定 该 
Pass 使 用 的 泻 染 路 径 。 这 是 通过 设置 Pass 的 LightMode 标 签 实现 的 。 不 
同类 型 的 演 染 路 径 可 能 会 包含 多 种 标 答 设置。 例如， 我 们 之 前 在 代码 
中 写 的 : 


Pass { 
Tags { "LightMode" = "ForwardBase" } 


上 面 的 代码 将 告诉 Unity， 该 Pass 使 用 前 癌 泻 染 路 径 中 的 
ForwardBase 路 径 。 而 前 同 泻 染 路 径 还 有 一 种 路 径 叫 做 ForwardAdd 。 
表 9.1 给 出 了 Pass 的 LightMode 标 签 文 持 的 泻 染 路 径 设置 选项 。 


表 9.1 ”LightMode 标 签 支 持 的 演 染 路 径 设 置 选 项 


标 签 名 
不 管 使 用 哪 种 泻 染 路 径 ， 该 Pass 总 是 会 被 泻 染 ， 但 不 
Always 
算 任何 光照 
用 于 前 向 泻 染 。 该 Pass 会 计算 环境 光 、 最 重要 的 平行 光 、 
ForwardBase 
逐 顶 点 /SH 光源 和 Lightmaps 


于 前 向 泻 染 。 该 Pass 会 计算 额外 的 逐 像素 光源 ， 每 个 
ForwardAdd 、 
Pass 对 应 一 个 光源 


| 


ShadowCaster 


把 物体 的 深度 信息 演 染 到 阴影 映射 纹理 (shadowmap) 或 
一 张 深度 纹理 


3 于 和 遗留 的 延迟 泻 染 。 该 Pass 会 浑 染 法 线 和 高 光 反 射 的 指 
PrepassBase Cte 
数 部 分 
于 遗留 的 延迟 泻 染 。 该 Pass 通 过 合并 纹理 、 光 照 和 
PrepassFinal ee 
光 来 泻 染 得 到 最 后 的 颜色 


VerteX、 


VertexLMRGBM 和 于 遗留 的 顶点 照明 演 染 
VertexLM 


那么 指定 泻 染 路 径 到 压 有 什么 用 呢 ? 如果 一 个 Pass 没 有 指定 任何 泻 
染 路 人 径 会 有 什么 问题 吗 ? 通俗 来 讲 ， 指 定 泻 染 路 人 径 古 我 们 和 Unity 的 展 
层 浑 染 引 擎 的 一 次 重要 的 沟通 。 例 如 ， 如 果 我 们 为 一 个 Pass 设 置 了 前 同 
泻 染 路 径 的 标签 ， 相 当 于 会 告诉 Unity: “ 嘿 ， 我 准备 使 用 前 向 演 染 了 ， 
你 把 那些 光照 属性 都 按 前 向 痊 染 的 流程 给 我 准备 好 ， 我 一 会 儿 要 
用 ! ”随后 ， 我 们 可 以 通过 Unity 提 供 的 内 置 光 照 变 量 来 访问 这 些 属性 。 
如 采 我 们 没有 指定 任何 渲染 路 径 (实际 上 ， 在 Unity 5.x 版 本 中 如 果 使 用 
了 前 问 泻 染 义 没有 为 Pass 指 定 任 何 前 问 渔 染 适 合 的 标签 ， 束 会 被 当成 一 


个 和 顶点 照明 泻 染 路 径 等 同 的 Pass) ， 那 么 一 些 光 照 变 量 很 可 能 不 会 被 
正确 赋值 ， 我 们 计算 出 的 效 来 也 束 很 有 可 能 是 错误 的 。 


那么 ，Unity 的 渲染 引擎 是 如 何 处 理 这 些 泻 染 路 径 的 昵 ?下面 ， 我 
们 会 对 这 些 泻 染 路 径 进 行 更 加 详细 的 解释 。 


9.1.1 前 向 演 染 路 径 


前 同 泻 染 路 人 径 是 传统 的 渔 染 方式 ， 也 是 我 们 最 第 用 的 一 种 痊 染 路 
径 。 在 本 市 ， 我 们 首先 会 概括 前 向 演 染 路 径 的 原理 ， 然 后 再 给 出 Unity 
对 于 前 向 渲染 路 人 径 的 实现 细 证 和 有 要求， 最 后 给 出 Unity Shader 中 哪些 内 
置 变 量 是 用 于 前 向 演 染 路 径 的 。 


1. 前 向 演 染 路 径 的 原理 


每 进行 一 次 完整 的 前 向 泻 染 ， 我 们 需要 泻 染 该 对 象 的 演 染 图 元 ， 
并 计算 两 个 缓冲 区 的 信息 : 一 个 是 颜色 缓冲 区 ， 一 个 是 深度 缓冲 区 。 
我 们 利用 深度 缓冲 来 决定 一 个 片 元 是 否 可 见 ， 如 果 可 见 就 更 新 颜色 绥 
冲 区 中 的 颜色 值 。 我 们 可 以 用 下 面 的 伪 代 码 来 描述 前 癌 泻 染 路 径 的 大 
致 过 程 : 


Pass { 
for (each primitive in this model) { 
for (each fragment covered by this primitive) { 
if (failed in depth test) { 


// 如 果 没 有 通过 深度 测试 ， 说 明 该 片 元 是 不 可 见 的 
discard; 

} else { 
// 如 果 该 片 元 可 见 
// 就 进行 光照 计算 
float4 color = Shading(materialInfo，pos，normal， 

lightDir, viewDir); 

// 更 新 帧 缓冲 
writeFrameBuffer(fragment, color); 


} 


对 于 每 个 逐 像素 光源 ， 我 们 都 需要 进行 上 面 一 次 完整 的 泻 染 流 
程 。 如 果 一 个 物体 在 多 个 逐 像素 光源 的 影响 区 域内 ， 那 么 该 物体 就 需 
要 执行 多 个 Pass， 每 个 Pass 计 算 一 个 逮 像素 光源 的 光照 结果 ， 然 后 在 帧 
缓冲 中 把 这 些 光 照 结果 混合 起 来 得 到 最 终 的 闫 色 值 。 假 设 ， 场 景 中 有 N 
个 物体 ， 每 个 物体 受 M 个 光源 的 有 影响， 那么 要 泻 染 整个 场景 一 共 需 要 
N*M 个 Pass。 可 以 看 出 ， 如 果 有 大 量 逐 像素 光照 ， 那 么 需要 执行 的 Pass 
数目 也 会 很 大 。 因 此 ， 泻 染 引 擎 通常 会 限制 每 个 物体 的 未 像素 光照 的 
数目 。 

2. Unity 中 的 前 向 渲染 

事实 上 ， 一 个 Pass 不 仅仅 可 以 用 来 计算 逐 像素 光照 ， 它 也 可 以 用 来 
计算 逐 顶 点 等 其 他 光照 。 这 取决 于 光照 计算 所 处 流水 线 阶段 以 及 计算 
时 使 用 的 数学 模型 。 当 我 们 泻 染 一 个 物体 时 ，Unity 会 计算 哪些 光源 照 
亮 了 它 ， 以 及 这 些 光 源 照 亮 该 物体 的 方式 。 


在 Unity 中 ， 前 向 泻 染 路 径 有 3 种 处 理光 照 ( 即 照 亮 物体 的 方式 : 
逐 顶 点 处 理 、 逐 像素 处 理 ， 球 谐 函 数 (Spherical Harmonics ， SHI) 处 
理 。 而 决定 一 个 光源 使 用 哪 种 处 理 模式 取决 于 它 的 类 型 和 泻 染 模 式 。 
光源 类 型 指 的 是 该 光源 是 平行 光 还 十 其 他 类 型 的 光源 ， 而 光源 的 渔 染 
模式 指 的 是 该 光源 是 否 是 重要 的 《Important) 。 如 果 我 们 把 一 个 光照 
的 模式 设置 为 Important， 意 味 着 我 们 告诉 Unity,“ 哩 老兄 ， 这 个 光源 很 
重要 ， 我 希望 你 可 以 认真 对 待 它 ， 把 它 当 成 一 个 逐 像素 光源 来 处 
理 ! ”我 们 可 以 在 光源 的 Light 组 件 中 设置 这 些 属性 ， 如 图 9.3 所 示 。 


A 图 9.3 ”设置 光源 的 类 型 和 泻 染 模式 


在 前 同 泻 染 中 ， 当 我 们 泻 染 一 个 物体 时 ，Unity 会 根据 场景 中 各 个 
光源 的 设置 以 及 这 些 光 源 对 物体 的 影响 程度 (例如 ， 距 离 该 物体 的 远 
近 、 光 源 强度 等 ， 对 这 些 光源 进行 一 个 重要 度 排序 。 其 中 ， 一 定数 目 
的 苑 源 会 按 未 像素 的 方式 处 理 ， 然 后 最 多 有 4 个 光源 按 逐 项 上 后 的 方式 处 
理 ， 剩 下 的 光源 可 以 按 SH 方 式 处 理 。Unity 使 用 的 判断 规则 如 下 。 


。 场景 中 最 亮 的 平行 光 总 是 按 逐 像素 处 理 的 。 

。 演 染 模 式 被 设置 成 Not Important 的 光源 ， 会 按 逐 顶点 或 者 SH 处 
理 。 

泻 染 模 式 被 设置 成 Important 的 光源 ， 会 按 逐 像素 处 理 。 

如 采 根 据 以 上 规则 得 到 的 逐 像素 光源 数量 小 于 Quality Setting 中 的 
逐 像素 光源 数量 (Pixel Light CounD， 会 有 更 多 的 光源 以 逐 像素 的 方 
式 进行 泻 染 。 


那么 ， 在 哪里 进行 光照 计算 呢 ? 当然 是 在 Pass 里 。 前 面 提 到 过 ， 前 
癌 泻 染 有 两 种 Pass: Base Pass 和 Additional Pass。 通 常 来 说 ， 这 两 种 Pass 
进行 的 标签 和 泻 染 设置 以 及 和 常规 光照 计算 如 图 9.4 所 示 。 


~ AN 日 
可 实现 的 光照 效果 家 Tags { "LightMode"="ForwardBase"} 
光照 纹理 i #pragma multi_compile_fwdbase 
环境 光 
自发 光 
阴影 (平行 光 的 阴影 ) 


人 人 人 


奖 现 AN 妥 : 
Dt ss Tags { "LightMode"="ForwardAdd"} 
Y 默认 情况 下 不 支持 阴影 ， ¢ Blend One One 

但 可 以 通过 使 用 #pragma #pragma multi_compile_fwdadd 


multi_compile_fwdadd_fulls 


~ 


盈 其 他 影响 该 物体 的 逐 像素 光源 
每 个 光源 执行 一 次 Pass 


A 图 9.4 ”前 向 泻 染 的 两 种 Pass 


图 9.4 中 有 几 点 需要 说 明 的 地 方 。 


。 首先 ， 可 以 发 现在 泻 染 设置 中 ， 我 们 除了 设置 了 Pass 的 标签 外 ， 还 
使 用 了 #pragma multi_compile_fwdbase 这 样 的 编译 指令 。 根 据 官 
方 文档 (https://docs.unity3d.com/Manual/ SL- 
MultipleProgramVariants.html) 中 的 相关 解释 ， 我 们 可 以 知道 ， 这 
些 编译 指令 会 保证 Unity 可 以 为 相应 类 型 的 Pass 生 成 所 有 需要 的 
Shader 变 种 ， 这 些 变 种 会 处 理 不 同 条 件 下 的 泻 染 逻辑 ， 例 如 是 否 使 


用 光照 贴图 、 当 前 处 理 哪 种 光源 类 型 、 是 否 开 局 了 阴影 等 ， 同 时 
Unity 也 会 在 背后 声明 相关 的 内 置 变量 并 传递 到 Shader 中 。 通 俗 来 
讲 ， 只 有 分 别 为 Base Pass 和 Additional Pass 使 用 这 两 个 编译 指令 ， 
我 们 才 可 以 在 相关 的 Pass 中 得 到 一 些 正确 的 光照 变量 ， 例 如 光照 去 
减 值 等 。 

Base Pass 劳 边 的 注释 给 出 了 Base Pass 中 文 持 的 一 些 光 照 特 性 。 例 
如 在 Base Pass 中 ， 我 们 可 以 访问 光照 纹理 \lightmap) 

Base Pass 中 泻 染 的 平行 光 默 认 是 支持 阴影 的 (如果 开启 了 光源 的 
阴影 功能 ) ， 而 Additional Pass 中 泻 染 的 光源 在 默认 情况 下 是 没有 
阴影 效果 的 ， 即 便 我 们 在 它 的 Light 组 件 中 设置 了 有 阴影 的 Shadow 
Type。 但 我 们 可 以 在 Additional Pass 中 使 用 #pragma multicompile 
fwdadd_fullshadows 代 替 #pragma multi_compile_fwdadd 编 译 指令 ， 
为 点 光源 和 聚光灯 开启 阴影 效果 ， 但 这 需要 Unity 在 内 部 使 用 更 多 
的 Shader 变 种 。 

环境 光 和 上 自 发光 也 是 在 Base Pass 中 计算 的 。 这 是 因为 ， 对 于 一 个 
物体 来 说 ， 环 境 光 和 目 发 光 我 们 只 硕 望 计算 一 次 即 可 ， 而 如 果 我 
们 在 Additional Pass 中 计算 这 两 种 光照 ， 就 会 造成 车 加 多 次 环境 光 
和 上 自发 光 ， 这 不 是 我 们 想 要 的 。 

在 Additional Pass 的 泻 染 设置 中 ， 我 们 还 开局 和 设置 了 混合 模式 。 
这 是 因为 ， 我 们 希望 每 个 Additional Pass 可 以 与 上 一 次 的 光照 结果 
在 帧 缓存 中 进行 琶 加 ， 从 而 得 到 最 终 的 有 多 个 光照 的 演 染 效果 。 
如 采 我 们 没有 开局 和 设置 混合 模式 ， 那 么 Additional Pass 的 泻 染 结 
采 会 履 次 抒 之 前 的 演 染 结果 ， 看 起 来 瓯 好 像 该 物体 只 受 该 光源 的 
影响 。 通 常情 况 下 ， 我 们 选择 的 混合 模式 是 Blend One One 。 


。 对 于 前 癌 泻 染 来 说 ， 一 个 Unity Shader 通 常会 定义 一 个 Base Pass 
(Base Pass 也 可 以 定义 多 次 ， 例 如 需要 双 面 泻 染 等 情况 ) 以 及 一 
个 Additional Pass。 一 个 Base Pass 仅 会 执行 一 次 〈 定 义 了 多 个 Base 
Pass 的 情况 除外 ) ， 而 一 个 Additional Pass 会 根据 影响 该 物体 的 其 
他 逐 像素 光源 的 数目 被 多 次 调用 ， 即 每 个 逐 像 素 光 源 会 执行 一 次 
Additional Pass。 


图 9.4 给 出 的 光照 计算 是 通常 情况 下 我 们 在 每 种 Pass 中 进行 的 计 
算 。 实 际 上 ， 演 染 路 径 的 设置 用 于 告诉 Unity 该 Pass 在 前 问 演 染 路 径 中 
的 位 置 ， 然 后 底层 的 泻 染 引擎 会 进行 相关 计算 并 填充 一 些 内置 变 量 
(如 _LightColor0 等 ; ， 如 何 使 用 这 些 内 置 变 量 进行 计算 完全 取决 于 开 
发 者 的 选择 。 例 如 ， 我 们 完全 可 以 利用 Unity 提 供 的 内 置 变 量 在 Base 
Pass 中 只 进行 逐 顶点 光照 ; 同样 ， 我 们 也 完全 可 以 在 Additional Pass 中 
按 逐 顶点 的 方式 进行 光照 计算 ， 不 进行 任何 逐 像素 光照 计算 。 


3. 内 置 的 光照 变量 和 函数 


前 面 说 过 ， 根 据 我 们 使 用 的 泻 染 路 人 径 ( 即 Pass 标 签 中 LightMode 的 
值 ) ，Unity 会 把 不 同 的 光照 变量 传递 给 Shader 。 


在 Unity 5 中 ， 对 于 前 回 洽 染 〈 即 LightMode 为 ForwardBase 或 
ForwardAdd) 来 说 ， 表 9.2 给 出 了 我 们 可 以 在 Shader 中 访问 到 的 光照 变 


表 9.2 ”前 向 泻 染 可 以 使 用 的 内 置 光照 变量 


类 


_LightColor0 float4 
该 Pass 处 理 的 逐 像素 光源 的 颜色 


_WorldSpaceLightPos0.xyz 是 该 Pass 处 理 的 逐 像素 光 
. 源 的 位 置 。 如 果 该 光源 是 平行 光 ， 那 么 
_WorldSpaceLightPos0 | float4 3 Ey we \ 
_WorldSpaceLightPos0.w 是 0， 其 他 光源 类 型 w 值 为 


1 


. . 从 世界 空间 到 光源 空间 的 变换 矩阵 。 可 以 用 于 采样 
_LightMatrix0 float4x4 es 
cookie 和 光 强 衰减 (attenuation) 纹理 
unity_4LightPosX0, . 
0 kt 于 Base Pass。 前 4 个 非 重 要 的 点 光源 在 1 
unity_4L1igntPos YU, oat 
人 的 位 置 
unity_4LightPosZ0 
| | 于 Base Pass。 存储 了 前 4 个 非 重 要 的 点 光源 的 
unity_ 4LightAtten0 float4 | . 
爱 减 因子 
加 于 Base Pass。 存 储 了 前 4 个 非 重要 的 点 光源 的 
unity_LightColor half4[4] 颜色 
需 


我 们 在 6.6 广 中 已 经 给 出 了 一 些 可 以 用 于 前 向 洽 染 路 人 径 的 函数 ， 例 
如 WorldSpaceLightDir、UnityWorldSpaceLightDir 和 ObjSpaceLightDir 。 


为 了 完整 性 ， 我 们 在 表 9.3 中 再 次 列 出 了 前 同 演 染 中 可 以 使 用 的 内 置 光 
照 玉 数 。 


表 9.3 ”前 向 演 染 可 以 使 用 的 内 置 光照 画 数 


float3 仅 可 用 于 前 向 浑 染 中 。 输 入 一 个 模型 空间 中 的 顶点 位 
WorldSpaceLightDir 置 ， 返 回 世界 空间 中 从 该 点 到 光源 的 光照 方向 。 内 部 实 
(float4 v) 现 使 用 了 UnityWorldSpaceLightDir 范 数 。 没 有 被 归 一 化 


float3 仅 可 用 于 前 向 泻 染 中 。 输 入 一 个 世界 空间 中 的 顶点 位 


UnityWorldSpaceLightDir | 置 ， 返 回 世 界 空间 中 从 该 点 到 光源 的 光照 方向 。 没 有 被 
(float4 v) 由 二 化 


仅 可 用 于 前 向 泻 染 中 。 输 入 一 个 模型 空间 中 的 顶点 位 
置 ， 返 回 模型 空间 中 从 该 点 到 光源 的 光照 方向 。 没 有 被 
归 一 化 


float3 ObjSpaceLightDir 
(float4 v) 


仅 可 用 于 前 向 泻 染 中 。 计 算 四 个 点 光源 的 光照 ， 它 的 参 
数 是 已 经 打包 进 矢 量 的 光照 数据 ， 通 常 惑 是 表 9.2 中 的 内 
置 变量 ， 如 unity_4LightPosX0, unity_4LightPosY0， 
unity_4LightPosZ0、unity_LightColor 和 unity_4LightAtten0 
等 。 前 向 演 染 通常 会 使 用 这 个 函数 来 计算 逐 顶 点 光照 


float3 Shade4PointLights 
(...) 


需要 说 明 的 是 ， 上 面 给 出 的 变量 和 函数 并 不 是 完整 的 ， 一 些 前 向 
党 染 可 以 使 用 的 内 置 变量 和 函数 官方 文档 中 并 没有 给 出 说 明 。 在 后 面 
的 学 习 中 ， 我 们 会 使 用 到 一 些 不 在 这 些 表 中 的 变量 和 画 数 ， 那 时 我 们 
会 特别 说 明 的 。 


9.1.2 ”顶点 照明 演 染 路 径 


顶点 照明 演 染 路 径 是 对 硬件 配置 要 求 最 少 、 运 算 性 能 最 高 ， 但 同 
时 也 是 得 到 的 效果 最 差 的 一 种 类 型 ， 它 不 支持 那些 逐 像 素 才 能 得 到 的 
效果 ， 例 如 阴影 、 法 线 映 射 、 高 精度 的 高 光 反 射 等 。 实 际 上 ， 它 仅仅 
苹 前 同 泻 染 路 径 的 一 个 于 集 ， 也 束 是 说 ， 所 有 可 以 在 顶点 照明 渔 染 路 
径 中 实现 的 功能 都 可 以 在 前 向 渲染 路 径 中 完成 。 就 如 它 的 名 字 一 样 ， 
顶点 照明 泻 染 路 径 只 是 使 用 了 逐 顶 总 的 方式 来 计算 光照 ， 并 没有 什么 
神奇 的 地 方 。 实 际 上 ， 我 们 在 上 面 的 前 向 泻 染 路 径 中 也 可 以 计算 一 些 
逐 顶 把 的 光源 。 但 如 果 远 择 使 用 顶点 照明 泻 染 路 径 ， 那 么 Unity 会 只 填 
充 那 些 逐 顶点 相关 的 光源 变量 ， 意 味 着 我 们 不 可 以 使 用 一 些 逐 像素 光 


- 恒 . 


照 变量 。 


1. Unity 中 的 顶点 照明 泻 染 


顶点 照明 渲染 路 径 通 常 在 一 个 Pass 中 就 可 以 完成 对 物体 的 渲染 。 在 
这 个 Pass 中 ， 我 们 会 计算 我 们 关心 的 所 有 光源 对 该 物体 的 照明 ， 并 且 这 
个 计算 是 按 逐 顶点 处 理 的 。 这 是 Unity 中 最 快速 的 渲染 路 径 ， 并 且 具 有 
最 广泛 的 硬件 文 持 (但 是 游戏 机 上 并 不 支持 这 种 路 径 ) 


由 于 顶 操 照明 演 染 路 径 仅 仅 是 前 向 泻 染 路 径 的 一 个 子 集 ， 因 此 在 
Unity 5 发 布 之 前 ，Unity 在 论坛 上 发 起 了 一 个 投票 
(http://forum.unity3d.com/threads/official-dropping-vertexlit-rendering- 
path- for-unity-5-0.275248/) ， 让 开发 者 选择 是 否 应 该 在 Unity 5.0 中 抛弃 
顶点 照明 浴 染 路 径 。 在 这 个 投票 中 ， 很 多 开发 人 员 表 示 了 赞 同 的 意 
见 。 结 果 和 是，Unity 5 中 将 顶点 照明 洽 染 路 径 作 为 一 个 遗留 的 浑 染 路 
径 ， 在 未 来 的 版 本 中 ， 顶 点 照明 泻 染 路 径 的 相关 设 定 可 能 会 被 移 除 。 


2. 可 访问 的 内 置 变量 和 函数 


在 Unity 中 ， 我 们 可 以 在 一 个 顶点 照明 的 Pass 中 最 多 访问 到 8 个 逐 顶 
扩 光 源 。 如 果 我 们 只 需要 泻 染 其 中 两 个 光源 对 物体 的 照明 ， 可 以 仅 使 
用 表 9.4 中 内 置 光 照 数据 的 前 两 个 。 如 末 影 响 该 物体 的 光源 数目 小 于 8， 
那么 数组 中 剩 下 的 光源 颜色 会 设置 成 黑色 。 


表 9.4 ”顶点 照明 泻 染 路 径 中 可 以 使 用 的 内 置 变量 


half4[8] | 光源 颜色 


有 xyz 分 量 是 视角 空间 中 的 光源 位 置 。 如 果 光 源 是 平行 
unity_LightPosition |float4[8]| ， . Re ee 
光 ， 那 么 z 分 量 值 为 0， 其 他 光源 类 型 z 分 量 值 为 1 


光源 误 减 因子 。 如 果 光 源 是 聚光灯 ，x 分 量 是 
cos(spotAngle/2)，y 分 量 是 1/cos(spotAngle/4); 如 
unity LightAtten |half4[8] | 人 二 4 Wi ( a ) es 
其 他 类 型 的 光源 ，x 分 量 是 -1，y 分 量 是 1。z 分 量 是 
减 的 平方 ，w 分 量 是 光源 范围 开 根 号 的 结果 


jit ootpirection | hoat4re] | 各 果 光源 是 束 光 灯 的 话 ， 值 为 视角 空间 的 到 光 灯 的 位 
Unl 1 1 
0 置 ， 如 果 是 其 他 类 型 的 光源 ， 值 为 (0, 0, 1, 0) 


可 以 看 出 ， 一些 变 
unity_LightColor。 但 这 
值 是 不 同 的 。 


量 我 们 同样 可 以 在 前 癌 演 染 路 径 中 使 用 ， 例 如 
些 变 量 数组 的 维度 和 数值 在 不 同 泻 染 路 径 中 的 


表 9.5 给 出 了 顶 总 照明 浑 染 路 径 中 可 以 使 用 的 内 置 画 效 。 


表 9.5 ”顶点 照明 泻 染 路 径 中 可 以 使 用 的 内 置 画 数 


float3 ShadeVertexLights | 输入 模型 空间 中 的 顶点 位 置 和 法 线 ， 计 算 四 个 逐 顶 点 光源 
(float4 vertex, float3 的 光照 以 及 环境 光 。 内 部 实现 实际 上 调用 


normal) ShadeVertexLightsFull 函 数 


float3 
ShadeVertexLightsFull 
(float4 vertex, float3 


输入 模型 空间 中 的 顶点 位 置 和 法 线 ， 计 算 lightCount 个 光源 
的 光照 以 及 环境 光 。 如 果 spotLight 值 为 tue， 那 么 这 些 光 
源 会 被 当成 聚光灯 来 处 理 ， 虽 然 结 果 更 精确 ， 算 更 加 
耗 时 ;否则 ， 按 点 光源 处 理 


normal, int lightCount, 


bool spotLight) 


9.1.3 ”延迟 泻 染 路 径 


前 同 泻 染 的 问题 是 ， 当 场景 中 包含 大 量 实时 光源 时 ， 前 同 泻 染 的 
性 能 会 急速 下 降 。 例 如 ， 如 采 我 们 在 场景 的 某 一 块 区 域 放 置 了 多 个 交 
源 ， 这 些 光 源 影 响 的 区 域 互相 重大 ， 那 么 为 了 得 到 最 终 的 光照 效果 ， 
我 们 就 需要 为 该 区 域内 的 每 个 物体 执行 多 个 Pass 来 计算 不 同 光 源 对 该 物 
体 的 光照 结 订 ， 然 后 在 颜色 缓存 中 把 这 些 结 采 混合 起 来 得 到 最 终 的 访 
照 。 然 而 ， 每 执行 一 个 Pass 我 们 都 需要 重新 演 染 一 志 物 体 ， 但 很 多 计算 
实际 上 十 重复 的 。 


延迟 演 染 是 一 种 更 吾 老 的 泻 染 方法 ， 但 由 于 上 述 前 癌 浑 染 可 能 造 
成 的 瓶颈 问题 ， 近 几 年 又 流行 起 来 。 除 了 前 癌 演 染 中 使 用 的 颜色 缓冲 


和 深度 缓冲 外 ， 延 迟 泻 染 还 会 利用 额外 的 缓冲 区 ， 这 些 缓冲 区 也 被 统 

称 为 G 缓 冲 (G-buffer) ， 其 中 G 是 英文 Geometry 的 缩写 。G 缓 冲 区 存储 

ee 忆 的 表面 (通常 指 的 是 离 摄 像 机 最 近 的 表面 ) 的 其 他 信 
， 例 如 该 表面 的 法 线 、 位 置 、 用 于 光照 计算 的 材质 属性 等 。 


1. 延迟 泻 染 的 原理 


延迟 泻 梁 主要 包含 了 两 个 Pass。 在 第 一 个 Pass 中 ， 我 们 不 进行 任何 
光照 计算 ， 而 是 仅仅 计算 哪些 片 元 是 可 见 的 ， 这 主要 是 通过 深度 缓冲 
技术 来 实现 ， 当 发 现 一 个 片 元 是 可 见 的， 我 们 惑 把 它 的 相关 信息 存储 
到 G 缓 冲 区 中 。 然 后 ， 在 第 二 个 Pass 中 ， 我 们 利用 G 缓 冲 区 的 各 个 卢 元 
信息 ， 例 如 表面 法 线 、 视 角 方 向 、 漫 反射 系数 等 ， 进 行 真 正 的 光照 计 
管 。 


延迟 渔 染 的 过 程 大 致 可 以 用 下 面 的 伪 代 码 来 插 述 : 


Pass 1 { 
// 第 一 个 Pass 不 进行 真正 的 光照 计算 


// 仪 仅 把 光照 计算 需要 的 信息 存储 到 6 缓冲 中 


for (each primitive in this model) { 
for (each fragment covered by this primitive) { 

if (failed in depth test) { 
// 如 果 没 有 通过 深度 测试 ， 说 明 该 片 元 是 不 可 见 的 
discard; 
} else { 

// 如 果 该 片 元 可 见 

// 就 把 需要 的 信息 存储 到 6G 缓 ; 
writeGBuffer(materialInfo, pos, normal); 


} 


Pass 2 { 
// 利用 6G 缓 冲 中 的 信息 进行 真正 的 光照 计算 


for (each pixel in the Screen) { 


if (the pixel is Valid) { 
// 如 果 该 像素 是 有 效 的 
// 读 取 它 对 应 的 6 缓冲 中 的 信息 
readGBuffer(pixel, materialIinfo, pos, normal); 


// 根据 读 取 到 的 信息 进行 光照 计算 
float4 color = Shading(materialInfo, pos, normal, 

lightDir, viewDir); 
// 更 新 帧 缓 ; 


writeFrameBuffer(pixel, color); 


可 以 看 出 ， 延 迟 得 染 使 用 的 Pass 效 目 通 音 束 是 两 个 ， 这 跟 场 景 中 包 
舍 的 光源 数目 是 没有 关系 的 。 换 名 话说， 延迟 演 染 的 效率 不 依赖 于 场 
景 的 复杂 度 ， 而 是 和 我 们 使 用 的 屏幕 空间 的 大 小 有 关 。 这 是 因为 ,我 
们 需要 的 信息 都 存储 在 缓冲 区 中 ， 而 这 些 缓冲 区 可 以 理解 成 是 一 张 张 
2D 狗 像 ， 我 们 的 计算 实际 上 束 生 在 这 些 岁 像 至 间 中 进行 的 。 


2. Unity 中 的 延迟 演 染 


Unity 有 两 种 延迟 泻 染 路 径 ， 一 种 是 遗留 的 延迟 泻 染 路 径 ， 即 Unity 
5 之 前 使 用 的 延迟 泻 染 路 径 ， 而 为 一 种 是 Unity5.x 中 使 用 的 延迟 党 染 路 
于 。 如 琳 游 戏 中 使 用 了 大 量 的 实时 光照 ， 那 么 我 们 可 能 希望 选择 延迟 
泻 染 路 径 ， 但 这 种 路 径 需 要 一 定 的 硬件 支持 。 


新 旧 延 迟 泻 染 路 径 之 间 的 差别 很 小 ， 只 是 使 用 了 不 同 的 技术 来 权 
衡 不 同 的 需求 。 例 如 ， 较 旧版 本 的 延迟 演 染 路 径 不 文 持 Unity 5 的 基于 
物理 的 Standard Shader。 以 下 我 们 仅 讨论 Unity 5 后 使 用 的 延迟 泻 染 路 
径 。 对 于 遗留 的 延迟 演 染 路 径 ， 读 者 可 以 在 官方 文档 
(http://docs.unity3d.com/ Manual/RenderTech-DeferredLighting.html) 找 
到 更 多 的 资料 。 


对 于 延迟 演 染 路 径 来 说 ， 它 最 适合 在 场景 中 光源 数目 很 多 、 如 果 
使 用 前 向 演 染 会 造成 性 能 瓶 贷 的 情况 下 使 用 。 而 且 ， 延 迟 泻 染 路 径 中 
的 每 个 光源 部 可 以 按 逐 像素 的 方式 处 理 。 但 是 ， 延 迟 洽 染 也 有 一 些 缺 
局 


。 不 支持 真正 的 抗 锯齿 (anti-aliasing) 功能 。 
。 不 能 处 理 半 透明 物体 。 
。 对 显卡 有 一 定 要 求 。 如 果 要 使 用 延迟 演 染 的 话 ， 显 卡 必须 文 持 
MRT (Moultiple Render Targets) 、Shader Mode 3.0 及 以 上 、 深 上 度 泻 
染 纹 理 以 及 双 面 的 模板 缓冲 。 
当 使 用 延迟 演 染 时 ，Unity 要 求 我 们 提供 两 个 Pass。 
(1) 第 一 个 Pass 用 于 演 染 G 缓 冲 。 在 这 个 Pass 中 ， 我 们 会 把 物体 的 
漫 反 射 颜色 、 高 光 反 射 颜色 、 平 清 度 、 法 线 、 目 发光 和 深度 等 信息 演 
染 到 屏幕 空间 的 G 缓 冲 区 中 。 对 于 每 个 物体 来 说 ， 这 个 Pass 仅 会 执行 一 


次 。 


(2) 第 二 个 Pass 用 于 计算 真正 的 光照 模型 。 这 个 Pass 会 使 用 上 一 
个 Pass 中 演 染 的 数据 来 计算 最 终 的 光照 颜色 ， 再 存储 到 帆 缓 冲 中 。 


默认 的 G 缓 冲 区 (注意 ， 不 同 Unity 版 本 的 泻 染 纹理 存储 内 容 会 
所 不 同 ) 包含 了 以 下 几 个 渲染 纹理 (Render Texture，RT) 


。 RT0: 格式 是 ARGB32，RGB 通 道 用 于 存储 漫 反 射 颜色 ，A 通 道 没 
有 被 使 用 。 

。 RT1: 格式 是 ARGB32，RGB 通 道 用 于 存储 高 光 反 射 颜 色 ，A 通 道 
用 于 存储 高 光 反 射 的 指数 部 分 。 


。RT2: 格式 是 ARGB2101010，RGB 通 道 用 于 存储 法 线 ，A 通 道 没 有 
被 使 用 。 

。RT3: 格式 是 ARGB32 ( 非 HDR) 或 ARGBHalf (HDR) ， 用 于 存 
储 自发 光 +lightmap+ 反 射 探 针 (reflection probes) 。 

。 深度 缓冲 和 模板 缓冲 。 


当 在 第 二 个 Pass 中 计算 光照 时 ， 默 认 情 况 下 仅 可 以 使 用 Unity 内 置 
的 Standard 光 照 模 型 。 如 果 我 们 想 要 使 用 其 他 的 光照 模型 ， 束 需要 替换 
挥 原 有 的 Internal-DeferredShading.shader 义 件 。 更 详细 的 信息 可 以 访问 
官方 文档 (http://docs.unity3d.com/Manual/RenderTech- 
DeferredShading.html) 。 


3. 可 访问 的 内 置 变 量 和 画 数 


表 9.6 给 出 了 处 理 延 迟 演 染 路 径 可 以 使 用 的 光照 变量 。 这 些 变量 都 
加 | 以 在 UnityDeferred Library.cginc 文 件 中 找到 它们 的 声明 。 


表 9.6 ”延迟 演 染 路 径 中 可 以 使 用 的 内 置 变量 


_LightColor 加 本 
世界 空间 到 光源 空间 的 变换 和 矩阵。 可 以 用 于 采样 cookie 
_LightMatrix0 | float4x4 Ee 
和 光 强 衰减 纹理 


9.1.4 ”选择 哪 种 演 染 路 径 


Unity 的 官方 文档 
(http://docs.unity3d.com/Manual/RenderingPaths.html) 中 给 出 了 4 种 泻 
染 路 人 径 (前 问 演 染 路 径 、 延 迟 演 染 路 人 笃 、 遗 留 的 延迟 泻 染 路 径 和 顶点 
照明 泻 染 路 径 ) 的 详细 比较 ， 包 括 它 们 的 特性 比较 (是 否 支 持 逐 像素 
光照 、 半 透明 物体 、 实 时 阴影 等 ) 、 性 能 比较 以 及 平台 支持 。 


总 体 来 说 ， 我 们 需要 根据 游戏 发 布 的 目标 平台 来 选择 泻 染 路 径 。 
如 有 果 当 前 显卡 不 文 持 所 选 泻 染 路 径 ， 那 么 Unity 会 目 动 使 用 比 其 低 一 级 
的 演 染 路 径 。 


在 本 书 中 ， 我 们 主要 使 用 Unity 的 前 向 泻 染 路 径 。 
9.2 Unity 的 光源 类 型 


在 前 面 的 例子 中 ， 我 们 的 场景 中 都 仅仅 有 一 个 光源 且 光 源 类 型 是 
平行 光 (如 果 你 的 场景 不 是 这 样 的 话 ， 可 能 会 得 到 错误 的 结果 ) 。 只 

有 一 个 平行 光 的 世界 很 美好 ， 但 美梦 总 有 醒 的 一 天 ， 这 时 ， 我 们 就 需 

要 在 Unity Shader 中 处 理 更 复杂 的 光源 类 型 以 及 数目 更 多 的 光源 。 在 本 
节 中 ， 我 们 将 会 学 习 如 何在 Unity 中 处 理 点 光源 point light) 和 聚光灯 
(spot light) 9 


Unity 一 共 文 持 4 种 光源 类 型 : 平行 光 、 点 光源 、 聚 光 盯 和 面 光 源 
(area light) 。 面 光源 仅 在 烘焙 时 才 可 发 挥 作 用 ， 因 此 不 在 本 节 讨 论 
范围 内 。 由 于 每 种 光源 的 几何 定义 不 同 ， 因 此 它们 对 应 的 光源 属性 也 
就 各 不 相同 。 这 就 要 求 我 们 要 区 别 对 竺 它们 。 笠 运 的 是 ，Unity 提 供 了 
很 多 内 置 函 数 来 帮 有 我 们 处 理 这 些 光源 ， 在 本 章 的 最 后 我 们 会 介绍 这 些 
函数 ， 但 首先 我 们 需要 了 解 它 们 背后 的 原理 。 


9.2.1 ”光源 类 型 有 什么 影响 


我 们 来 看 一 下 光源 类 型 的 不 同 到 底 会 给 Shader 带 来 哪些 影响 。 我 们 
可 以 考虑 Shader 中 使 用 了 光源 的 哪些 属性 。 最 常 使 用 的 光源 属性 有 光源 
的 位 置 、 方 向 〈 更 具体 说 就 是 ， 到 某 点 的 方向 ) 、 颜 色 、 强 度 以 及 误 
减 “更 具体 说 就 是 ， 到 某 点 的 衰减 ， 与 该 点 到 光源 的 距离 有 关 ) 这 5 个 
属性 。 而 这 些 属性 和 它们 的 几何 定义 妃 息 相关 。 
和光 

对 于 我 们 之 前 使 用 的 平行 光 来 说 ， 它 的 几何 定义 是 最 简单 的 。 平 
行 光 可 以 照 亮 的 范围 是 没有 限制 的 ， 它 通常 是 作为 太阳 这 样 的 角色 在 
场景 中 出 现 的 。 图 9.5 给 出 了 Unity 中 和 平行 光 在 Scene 视图 中 的 表示 以 及 
Light 组 件 的 面板 。 


平行 光 之 所 以 简单， 是 因为 它 没 有 一 个 唯一 的 位 置 ， 也 就 是 说 ， 
它 可 以 放 在 场景 中 的 任意 位 置 (回忆 一 下 ， 我 们 小 时 候 是 不 是 总 感觉 
太阳 跟着 我 们 一 起 移动 ) 。 它 的 几何 属性 只 有 方向 ， 我 们 可 以 调整 平 
行 光 的 Transform 组 件 中 的 Rotation 属 性 来 改变 它 的 光源 方 辐 ， 而 且 平 行 
光 到 场景 中 所 有 点 的 方 同 都 是 一 样 的 ， 这 也 是 平行 光 名 字 的 由 来 。 除 
此 之 外 ， 由 于 平行 光 没 有 一 个 具体 的 位 置 ， 因 此 也 没有 衰减 的 概念 ， 
也 就 是 说 ， 光 照 强度 不 会 随 着 距离 而 发 生 改变 。 


2. 点 光源 


点 光源 的 照 亮 空间 则 是 有 限 鸭 ， 它 是 由 衬 间 中 的 一 个 球体 定义 
的 。 扩 光源 可 以 表示 由 一 个 点 发 出 的 、 向 所 有 方 同 延伸 的 光 。 图 9.6 给 
出 了 Unity 中 点 光源 在 Scene 视图 中 的 表示 以 及 Light 组 件 的 面板 。 
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Bounce Intensity OO 0 
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Flare INonel(Flare) |@ 
Render Mode | Auto a 
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A 图 9.5 平行 光 


vo IM Light 
Type Point $ 
Baking Realtime $ 
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Color 一 必 
Intensity ee Fa 
Bounce Intensity CC 一 0 


Shadow Type No Shadows 多 
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Culling Mask | Everything 多 


和 图 9.6 点 光源 


需要 提醒 读者 的 一 点 是 ， 我 们 需要 在 Scene 视图 中 开局 光照 才能 
到 预览 光源 是 如 何 影 响 场景 中 的 物体 的 。 图 9.7 给 出 了 开局 Scene 视 图 光 
照 的 按钮 。 


球体 的 半径 可 以 由 面板 中 的 Range 属 性 来 调整 ， 也 可 以 在 Scene 视 
图 中 直接 拖拉 点 光源 的 线 框 (如 球体 上 的 黄色 控制 点 ) 来 修改 它 的 属 
性 。 点 光源 是 有 位 置 属性 的 ， 它 是 由 点 光源 的 Transform 组 件 中 的 
Position 属 性 定义 的 。 对 于 方向 属性 ， 我 们 需要 用 点 光源 的 位 置 减 去 某 
点 的 位 置 来 得 到 它 到 该 点 的 方向 。 而 点 光源 的 颜色 和 强度 可 以 在 Light 
组 件 面 板 中 调整 。 同 时 ， 点 光源 也 是 会 衰减 的 ， 随 着 物体 逐渐 远离 点 
光源 ， 它 接收 到 的 光照 强度 也 会 逐渐 减 小 。 点 光源 球 心 处 的 光照 强度 
最 强 ， 球 体 边界 处 的 最 弱 ， 值 为 0。 其 中 间 的 衰减 值 可 以 由 一 个 函数 定 
义 o 
3. 育 光 灯 


聚光灯 是 这 3 种 光源 类 型 中 最 复杂 的 一 种 。 它 的 照 亮 空 间 同样 是 有 
限 的 ， 但 不 再 是 简单 的 球体 ， 而 是 由 空间 中 的 一 块 锥 形 区 域 定义 的 。 
聚光灯 可 以 用 于 表示 由 一 个 特定 位 置 出 发 、 向 特定 方向 延伸 的 光 。 图 
9.8 给 出 了 Unity 中 聚光灯 在 Scene 视图 中 的 表示 以 及 Light 组 件 的 面板 。 
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A 图 9.7 开启 Scene 视 图 
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A 图 9.8 聚光灯 


这 块 锥 形 区 域 的 半径 由 面板 中 的 Range 属 性 决定 ， 而 锥 体 的 张 开 角 
度 由 Spot Angle 属 性 决定 。 我 们 同样 也 可 以 在 Scene 视 图 中 直接 拖拉 限 
光 灯 的 线 框 (如 中 间 的 黄色 控制 点 以 及 四 周 的 黄色 控制 点 ;来 修改 它 
的 属性 。 聚 光 灯 的 位 置 同样 是 由 Transform 组 件 中 的 Position 属 性 定义 
的 。 对 于 方向 属性 ， 我 们 需要 用 聚光灯 的 位 置 减 去 某 点 的 位 置 来 得 到 
它 到 该 点 的 方向 。 聚 光 灯 的 衰减 也 是 随 着 物体 逐渐 远离 点 光源 而 逐渐 
减 小 ， 在 锥 形 的 顶点 处 光照 强度 最 强 ， 在 锥 形 的 边界 处 强度 为 0。 其 中 
间 的 衰减 值 可 以 由 一 个 函数 定义 ， 这 个 函数 相对 于 点 光源 衰减 计算 公 
式 要 更 加 复杂 ， 因 为 我 们 需要 判断 一 个 点 是 否 在 锥 体 的 范围 内 。 


9.2.2 ”在 前 向 演 染 中 处 理 不 同 的 光源 类 型 


在 了 解 了 3 种 光源 的 几何 定义 后 ， 我 们 来 看 一 下 如 何在 Unity Shader 
中 访问 它们 的 5 个 属性 : 位置 、 方 向、 颜色 、 强 度 以 及 衰减 。 需 要 注意 
的 是 ， 本 节 均 建立 在 使 用 前 向 泻 染 路 径 的 基础 上 。 


在 学 习 完 本 节 后 ， 我 们 可 以 得 到 类 似 见 9.9 中 的 效 末 。 


Maximize on Play | Mute audio | Stats Gizmos |™ 


图 9.9 ”使 用 一 个 平行 光 和 一 个 点 光源 共同 照 亮 物体 。 右 图 显示 了 胶 宫 体 、 平 行 光 和 点 光源 
在 场景 中 的 相对 位 置 


> 


1. 实践 
为 了 实现 上 述 效 有 果 ， 我 们 首先 做 如 下 准备 工作 。 

(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene 9 2 2 1。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 
一 个 平行 光 ， 并 且 使 用 了 内 置 的 天 空 合子。 在 Window 一 Lighting 一 
Skybox 中 去 掉 场 景 中 的 天 空 合子。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 


ForwardRenderingMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter9-ForwardRendering。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材 


质 。 


(4) 在 场景 中 创建 一 个 胶 宫 体 ， 并 把 第 2 步 中 的 材质 赋 给 该 胶 宫 
体 。 


(5) 为 了 让 物体 受 多 个 光源 的 影响 ， 我 们 再 新 建 一 个 点 光源 ， 把 
其 凑 色 设 为 绿色 ， 以 和 平行 光 进 行 区 分 。 
(6) 保存 场景 。 
我 们 的 代码 使 用 了 Blinn-Phong 光 照 模 型 ， 并 为 前 问 泻 染 定义 了 
Base Pass 和 Additional Pass 来 处 理 多 个 光源 。 在 这 里 我 们 只 给 出 其 中 关 


键 的 代码 ， 而 省 略 与 之 前 章节 中 重复 的 代码 。 完 整 的 代码 读者 可 以 在 
本 书 资源 中 找到 。 关 键 代码 如 下 。 


(1) 我 们 首先 定义 第 一 个 Pass 
置 该 Pass 的 泻 染 路 径 标签 ; 


Base Pass。 为 此 ， 我 们 需要 设 


Pass { 

// Pass for ambient light & first pixel light (directional 
light) 

Tags { "LightMode"="ForwardBase" } 


CGPROGRAM 


// Apparently need to add this declaration 
#pragma multi_compile_fwdbase 


需要 注意 的 是 ， 我 们 除了 设置 泻 染 路 径 外 ， 还 使 用 了 #pragma 编 译 
指令 。#pragma multi_ compile_fwdbase 指 令 可 以 保证 我 们 在 Shader 中 
使 用 光照 衰减 等 光照 变量 可 以 被 正确 赋值 。 这 是 不 可 缺少 的 。 


(2) 在 Base Pass 的 片 元 着 色 器 中 ， 我 们 首先 计算 了 场景 中 的 环境 
Se: 


// Get ambient term 
fixed3 ambient = UNITY_LIGHTMODEL AMBIENT .xyz; 


我 们 希望 环境 光 计 算 一 次 即 可 ， 因 此 在 后 面 的 Additional Pass 中 就 
“会 再 计算 这 个 部 分 。 与 之 类 似 ， 还 有 物体 的 自发 光 ， 但 在 本 例 中 ， 
我 们 假设 胶 赛 体 没有 目 发 光 效 果 。 


(3) 然后 ， 我 们 在 Base Pass 中 人 处理 了 场景 中 的 最 重要 的 平行 光 。 

在 这 个 例子 中 ， 场 景 中 只 有 一 个 平行 光 。 如 采 场 景 中 包含 了 多 个 平行 
光 ，Unity 会 选择 最 腕 的 平行 光 传递 给 Base Pass 进 行 逐 像素 处 理 ， 其 他 
平行 光 会 按照 逐 顶 点 或 在 Additional Pass 中 按 逐 像素 的 方式 处 理 。 如 果 
场景 中 没有 任何 平行 光 ， 那 么 Base Pass 会 当成 全 黑 的 光源 处 理 。 我 们 
提 到 过 ， 每 一 个 光源 有 5 个 属性 .位置 、 方 向、 颜色、 强度 以 及 衰减 。 
对 于 Base Pass 来 说 ， 它 处 理 的 逐 像 素 光 源 类 型 一 定 是 平行 光 。 我 们 可 
以 使 用 _WorldSpaceLightPos0 来 得 到 这 个 平行 光 的 方向 (位置 对 平行 光 
来 说 没有 意义 ) ， 使 用 _LightColor0 来 得 到 它 的 颜色 和 强度 

LLightColor0 已 经 是 颜色 和 强度 相 乘 后 的 结果 ) ， 由 于 平行 光 可 以 认 
为 是 没有 衰减 的 ， 因 此 这 里 我 们 直接 令 衰 减 值 为 1.0。 相 关 代码 如 下 : 


// Compute diffuse term 
fixed3 diffuse = _LightColorg,rgb * _Diffuse.rgb * max(0, 
dot(worldNormal, worldLightDir)); 


// Compute specular term 
fixed3 specular = _LightCcolorgo.rgb * _Specular.rgb * pow(max(0, 
dot(worldNormal, halfDir)), _Gloss); 


// The attenuation of directional light is always 1 


fixed atten = 1.0; 


return fixed4(ambient + (diffuse + specular) * atten, 1.0); 


至 此 ，Base Pass 的 工作 束 完 成 了 。 


(4) 接 下 来 ,我 们 需要 为 场景 中 其 他 逐 像素 光源 定义 Additional 
Pass。 为 此 ， 我 们 首先 需要 设置 Pass 的 泻 淋 路 径 标签 : 
Pass { 
// Pass for other pixel lights 
Tags { "LightMode"="ForwardAdd" } 


Blend One One 


CGPROGRAM 


// Apparently need to add this declaration 
#pragma multi_compile_fwdadd 


除了 设置 泻 染 路 径 标 签 外 ， 我 们 同样 使 用 了 #pragma 
multi_compile_fwdadd 指 令 ， 如 前 面 所 说 ， 这 个 指令 可 以 保证 我 们 在 
Additional Pass 中 访问 到 正确 的 光照 变量 。 与 Base Pass 不 同 的 是 ， 我 们 
还 使 用 Blend 命 令 开 局 和 设置 了 混合 模式 。 这 是 因为 ， 我 们 希望 
Additional Pass 计 算得 到 的 光照 结果 可 以 在 帧 缓存 中 与 之 前 的 光照 结 
进行 县 加 。 如 有 果 没 有 使 用 Blend 命 令 的 话 ，Additional Pass 会 直接 和 窗 盖 掉 
之 前 的 光照 结果 。 在 本 例 中 ， 我 们 选择 的 混合 系数 是 Blend One One， 
这 不 是 必需 的 ， 我 们 可 以 设置 成 Unity 支 持 的 任何 混合 系数 。 常 见 的 还 
有 Blend SrcAlpha One。 


(5) 通常 来 说 ，Additional Pass 的 光照 处 理 和 Base Pass 的 处 理 方 式 
是 一 样 的 ， 因 此 我 们 只 需要 把 Base Pass 的 顶点 和 片 元 着 色 器 代码 粘贴 
到 Additional Pass 中 ， 然 后 再 稍微 修改 一 下 即 可 。 这 些 修改 往往 是 为 了 


去 掉 Base Pass 中 环境 光 、 自 发 光 、 逐 顶点 光照 、SH 光 照 的 部 分 ， 并 添 
加 一 些 对 不 同 光 源 类 型 的 支持 。 因 此 ， 在 Additional Pass 的 族 元 着 色 器 
中 ， 我 们 没有 再 计算 场景 中 的 环境 光 。 由 于 Additional Pass 处 理 的 光源 
类 型 可 能 是 平行 光 、 点 光源 或 是 聚光灯 ， 因 此 在 计算 光源 的 5 个 属性 
一 -位置 、 方 向、 颜色 、 强 度 以 及 衰减 时 ， 颜 色 和 强度 我 们 仍然 可 以 
使 用 _LightColor0 来 得 到 ， 但 对 于 位 置 、 方 向 和 衰减 属性 ， 我 们 束 需 要 
根据 光源 类 型 分 别 计算 。 惠 先 ， 我 们 来 看 如 何 计算 不 同 光源 的 方 癌 ; 


#ifdef USING_DIRECTIONAL_LIGHT 
fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz); 
#else 


fixed3 worldLightDir = normalize(_WorldSpaceLightPos0.xyz - 
i.worldPosition.xyz); 
#endif 


在 上 面 的 代码 中 ， 我 们 首先 判断 了 当前 处 理 的 逐 像素 光源 的 类 
型 ， 这 是 通过 使 用 ##fdef 指 令 判 断 是 否定 义 了 
USING_DIRECTIONAL_LIGHT 来 得 到 的 。 如 有 果 当 前 前 癌 洽 染 Pass 处 理 
的 光源 类 型 是 平行 光 ， 那 么 Unity 的 底层 泻 染 引擎 就 会 定义 
USING_DIRECTIONAL_LIGHT。 如果 判断 得 知 是 平行 光 的 话 ， 光 源 方 
同 可 以 直接 由 _WorldSpaceLightPos0.xyz 得 到 ;， 如 果 是 点 光源 或 聚 光 
灯 ， 和 那么 _WorldSpaceLightPos0.xyz 表 示 的 是 世界 空间 下 的 光源 位 置 ， 
而 想 要 得 到 光源 方向 的 话 ， 我 们 就 需要 用 这 个 位 置 减 去 世界 空间 下 的 
顶点 位 置 。 


(6) 最 后 ， 我 们 需要 处 理 不 同 光 源 的 衰减 : 


#ifdef USING_DIRECTIONAL_LIGHT 

fixed atten = 1.0; 
#else 

float3 lightCoord = mul(_LightMatrix0©, float4(i.worldPosition, 
1)).xyz; 


fixed atten = tex2D(_LightTexture0，dot(1ightCcoord， 
lightCoord).rr).UNITY_ATTEN_CHANNEL.,; 
#endif 


我 们 同样 通过 判断 是 否定 义 了 USING_DIRECTIONAL _LIGHT 来 决 
定 当前 处 理 的 光源 类 型 。 如 果 是 平行 光 的 话 ， 衰 减 值 为 1.0。 如 果 是 其 
他 光源 类 型 ， 那 么 处 理 更 复杂 一 些 。 尽 管 我 们 可 以 使 用 数学 表达 式 来 
计算 给 定点 相对 于 点 光源 和 聚光灯 的 衰减 ， 但 这 些 计算 往往 涉及 开 根 
号 、 除 法 等 计算 量 相 对 较 大 的 操作 ， 因 此 Unity 人 选 择 了 使 用 一 张 纹理 作 
为 查找 表 (Lookup Table，LUT) ， 以 在 片 元 着 色 器 中 得 到 光源 的 臂 
减 。 我 们 首先 得 到 光源 空间 下 的 坐标 ， 然 后 使 用 该 坐标 对 衰减 纹理 进 
行 采 样 得 到 衰减 值 。 关 于 Unity 中 衰减 纹理 的 细节 可 以 参见 9.3 帮 。 


我 们 可 以 在 场景 中 添加 更 多 的 逐 像素 光源 来 照 亮 胶 赛 体 。 需 要 注 
意 的 是 ， 本 市 只 是 为 了 讲解 处 理 其 他 类 型 光源 的 实现 原理 ， 上 述 代 码 
并 不 会 用 于 真正 的 项 目 中 ， 我 们 会 在 9.5 季 给 出 包含 了 完整 光照 计算 的 
Unity Shader 。 


2. 实验: Base Pass 和 Additional Pass 的 调用 


我 们 在 9.1.1 闻 中 给 出 了 前 同 章 染 中 Unity 是 如 何 决 定 哪些 光源 是 逐 
像素 光 ， 而 哪些 是 逐 顺 点 或 SH 光 。 为 了 让 读 首 有 更 加 直观 的 理解 ， 我 
们 可 以 在 Unity 中 进行 一 个 实验 。 实 验 的 准备 工作 如 下 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene 9 2 2_ 2。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 


一 个 平行 光 ， 并 且 使 用 了 内 置 的 天 空 合子。 在 Window -> Lighting -> 
Skybox 中 去 挥 场景 中 的 天 空 盒 于。 


(2) 调整 平行 光 的 颜色 为 绿色 。 


(3) 在 场景 中 创建 一 个 胶 赛 体 ， 并 把 上 一 蔬 中 的 
ForwardRenderingMat 材 质 赋 给 该 胶 赛 体 。 


(4) 新 建 4 个 点 光源 ， 调 整 它们 的 颜色 为 相同 的 红色 。 
(5) 保存 场景 。 


我 们 可 以 得 到 类 似 图 9.10 中 的 效果 。 


A 图 9.10 ”使 用 1 个 平行 光 + 4 个 点 光源 照 亮 一 个 物体 


那么 ， 这 样 的 结果 是 怎么 来 的 呢 ? 当 我 们 创建 一 个 光源 时 ， 默 认 
情况 下 它 的 Render Mode (可 以 在 Light 组 件 中 设置 ) 是 Auto。 这 意味 
着 ，Unity 会 在 背后 为 我 们 判断 哪些 光源 会 按 逐 像素 处 理 ， 而 哪些 按 逐 
顶点 或 SH 的 方式 处 理 。 由 于 我 们 没有 更 改 Edit ~ Project Settings 一 


Quality ~” Pixel Light Count 中 的 数值 ， 因 此 默认 情况 下 一 个 物体 可 以 接 
收 除 最 腕 的 平行 光 外 的 4 个 逐 像素 光照 。 在 这 个 例子 中 ， 场 景 中 共 包 含 
J 二 5 个 光源 ， 其 中 一 个 症 平行 光 ; 下 会 人 RAR Rendering 
的 Base Pass 中 按 逐 像素 的 方式 被 处 理 ， 其 余 4 个 都 是 点 光源 ， 由 于 它们 
的 Render Mode 为 Auto 且 数目 正好 等 于 4 因此 都 会 在 Chapter9- 
ForwardRendering 的 Additional Pass 中 逐 像 素 的 方式 被 处 理 ， 每 个 光源 会 
调用 一 次 Additional Pass。 


在 Unity 5 中 ， 我 们 还 可 以 使 用 帧 调试 器 (Frame Debugger) 工具 
来 查看 场景 的 绘制 过 程 。 使 用 方法 是 : 在 Window -> Frame Debugger 中 
打开 帧 调试 器 ， 如 图 9.11 所 示 。 


从 帧 调试 大 中 可 以 看 出 ， 演 染 这 个 场景 Unity 一 共 进行 了 6 个 演 染 事 
件 ， 由 于 本 例 中 只 包含 了 一 个 物体 ， 因 此 这 6 个 瘟 染 事件 几乎 都 是 用 于 
党 染 该 物体 的 光照 结果 。 我 们 可 以 通过 依次 蛙 击 帧 调试 器 中 的 渔 染 事 
件 ， 来 查看 Unity 是 怎样 渲染 物体 的 。 图 9.12 给 出 了 本 例 中 Unity 进 行 的 6 
个 洽 染 事件 。 
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图 9.11 打开 帧 调试 器 查看 场景 的 绘制 事 
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图 9.12 ”本 例 中 的 6 个 泻 染 事件 ， 绘 制 顺 序 是 从 左 到 右 、 从 上 到 下 进行 的 


从 图 9.12 可 以 看 出 ，Unity 是 如 何 一 步 步 将 不 同 光 照 泻 染 到 物体 上 
的 : 在 第 一 个 泻 染 事件 中 ，Unity 首 先 清除 颜色 、 深 度 和 模板 缓冲 ， 为 
后 面 的 泻 染 做 准备 ， 在 第 二 个 洽 染 事件 中 ，Unity 利 用 Chapter9- 
ForwardRendering 的 第 一 个 Pass， 即 Base Pass， 将 平行 光 的 光照 泻 染 到 
由 缓存 中 ， 在 后 面 的 4 个 泻 染 事件 中 ，Unity 使 用 Chapter9- 
ForwardRendering 的 第 二 个 Pass， 即 Additional Pass， 依 次 将 4 个 点 光源 
的 光照 应 用 到 物体 上 ， 得 到 最 后 的 洽 染 结果 。 


可 以 注意 到 ，Unity 处 理 这 些 点 光源 的 顺序 是 按照 它们 的 重要 度 排 
序 的 。 在 这 个 例子 中 ， 由 于 所 有 点 光源 的 颜色 和 强度 都 相同 ， 因 此 它 


们 的 重要 度 取决 于 它们 距离 胶 宫 体 的 远近 ， 因 此 图 9.12 中 首 移 绘制 的 是 
距离 胶 宫 体 最 近 的 点 光源 。 但 是 ， 如 果 光 源 的 强度 和 颜色 互 不 相同 ， 
那么 距离 束 不 再 是 唯一 的 衡量 标准 。 例 如 ， 如 果 我 们 把 现在 距离 最 近 
的 点 光源 的 强度 设 为 0.2， 那 么 从 帧 调试 器 中 我 们 可 以 发 现 绘制 顺序 发 
生 了 变化 ， 此 时 前 先 绘制 的 古 距 离 胶 时 体 第 二 近 的 后 光源 ， 最 近 的 所 
光源 则 会 在 最 后 被 泻 染 。Unity 官 方 文档 中 并 没有 给 出 光源 强度 、 颜 色 
和 距离 物体 的 远近 古 如 何 具体 影响 光源 的 重要 度 排序 的 ， 我 们 仅 知 道 
排序 结果 和 这 三 者 都 有 关系 。 


对 于 场景 中 的 一 个 物体 ， 如 果 它 不 在 一 个 光源 的 光照 范围 内 ， 
I 为 这 个 物体 调用 Pass 来 处 理 这 个 光源 的 。 我 们 可 以 把 本 例 
中 距离 最 远 的 点 光源 的 范围 调 小 ， 使 得 胶 吉 体 在 它 的 照 亮 范围 外 。 此 
时 再 查看 帧 调 斌 器， 我 们 可 以 发 现 洽 染 事 件 比 之 前 少 了 一 个 ， 如 图 9.13 
所 示 。 同 样 ， 如 果 一 个 物体 不 在 某 个 聚光灯 的 范围 内 ，Unity 也 是 不 会 
为 该 物体 调用 相关 的 泻 染 事 件 的 。 


图 9.13 ”如 果 物 体 不 在 一 个 光源 的 光照 范围 内 〈 从 右 图 可 以 看 出 ， 胶 宫 体 不 在 最 左 方 的 点 光 
源 的 照明 范围 内 ) ，Unity 是 不 会 调用 Additional Pass 来 为 该 物体 处 理 该 光源 的 


> 


我 们 知道 ， 如 果 未 像素 光源 的 数目 很 多 的 话 ， 该 物体 的 Additional 
Pass 束 会 被 调用 多 次 ， 影 响 性 能 。 我 们 可 以 通过 把 光源 的 Render Mode 
设 为 Not Important 来 告诉 Unity， 我 们 不 希望 把 该 光源 当成 未 像素 处 
理 。 在 本 例 中 ， 我 们 可 以 把 4 个 点 光源 的 Render Mode 都 设 为 Not 
Important， 可 以 得 到 图 9.14 中 的 结果 。 
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图 9.14” 当 把 光源 的 Render Mode 设 为 Not Important 时 ， 这 些 光 源 就 不 会 按 逐 像素 光 来 处 理 


由 于 我 们 在 Chapter9-ForwardRendering 中 没有 在 Bass Pase 中 计算 逐 
顶点 和 SH 光 源 ， 因 此 场景 中 的 4 个 点 光源 实际 上 不 会 对 物体 造成 任何 影 
啊 。 同 样 ， 如 果 我 们 把 平行 光 的 Render Mode 也 设 为 Not Important， 
那么 读者 可 以 猜测 一 下 结果 会 是 什么 。 没 钳 ， 物 体 束 会 仅 显 示 环 境 沧 
的 光照 结果 。 


那么 ， 我 们 如 何在 前 向 泻 染 路 径 的 Base Pass 中 计算 逐 顶点 和 SH 交 
呢 ? 我 们 可 以 使 用 9.1.1 市 中 提 到 的 内 苇 变 量 和 函数 来 计算 这 些 光源 的 


光照 效果 。 
9.3 Unity 的 光照 衰减 


在 9.2 节 中 ， 我 们 提 到 Unity 使 用 一 张 纹理 作为 查找 表 来 在 片 元 着 色 
器 中 计算 逐 像 素 光 照 的 衰减 。 这 样 的 好 处 在 于 ， 计 算 衰 减 不 依赖 于 数 
学 公式 的 复杂 性 ， 我 们 只 要 使 用 一 个 参数 值 去 纹理 中 采样 即 可 。 但 使 
用 纹理 查找 来 计算 豪 减 也 有 一 些 束 端 。 


需要 预 处 理 得 到 采样 纹理 ， 而 且 纹理 的 大 小 也 会 影响 衰减 的 精 
度 。 

不 直观 ， 同 时 也 不 方便 ， 因 此 一 旦 把 数据 存储 到 查找 表 中 ， 我 们 
就 无 法 使 用 其 他 数学 公式 来 计算 衰减 。 


但 由 于 这 种 方法 可 以 在 一 定 程度 上 提升 性 能 ， 而 且 得 到 的 效果 在 
大 部 分 情况 下 都 是 良好 的 ， 因 此 Unity 默 认 就 是 使 用 这 种 纹理 查找 的 方 
式 来 计算 逐 像素 的 点 光源 和 聚光灯 的 衰减 的 。 


9.3.1 用 于 光照 衰减 的 纹理 


Unity 在 内 部 使 用 一 张 名 为 _LightTexture0 的 纹理 来 计算 光源 衰减 。 
需要 注意 的 是 ， 如 果 我 们 对 该 光源 使 用 了 cookie， 那 么 衰减 查找 纹理 是 
_LightTextureB0， 但 这 里 不 讨论 这 种 情况 。 我 们 通常 只 天 心 
_LightTexture0 对 角 线 上 的 纹理 闫 色 值 ， 这 些 值 表明 了 在 光源 空间 中 不 
同位 置 的 点 的 衰减 值 。 例 如 ，(0, 0) 点 表明 了 与 光源 位 置 重 合 的 点 的 衰 
减 值 ， 而 (1 1) 点 表明 了 在 光源 空间 中 所 关心 的 距离 最 远 的 点 的 衰减 。 


为 了 对 _LightTexture0 纹 理 采 样 得 到 给 定点 到 该 光源 的 衰减 值 ， 我 
们 首先 需要 得 到 该 点 在 光源 空间 中 的 位 置 ， 这 是 通过 _LightMatrix0 变 
换 和 矩阵 得 到 的 。 在 9.1.1 廊 中， 我 们 已 经 知道 _LightMatrix0 可 以 把 顶点 
从 世界 空间 变换 到 光源 空间 。 因 此 ， 我 们 只 需要 把 _ LightMatrix0 和 志 
界 空间 中 的 顶点 坐标 相 乘 即 可 得 到 光源 空间 中 的 相应 位 置 : 


float3 lightCoord = mul(_LightMatrix0, float4(i.worldPosition, 


1)).xyz; 


然后 ， 我 们 可 以 使 用 这 个 坐标 的 模 的 平方 对 衰减 纹理 进行 采样 ， 
得 到 衰减 值 : 


fixed atten = tex2D(_LightTexture0，dot(1ightCcoord， 


lightCoord).rr).UNITY_ATTEN_CHANNEL.; 


可 以 发 现 ， 在 上 面 的 代码 中 ， 我 们 使 用 了 光源 空间 中 顶点 距离 的 
平方 (通过 dot 芳 数 来 得 到 ) 来 对 纹理 采样 ， 之 所 以 没有 使 用 距离 值 来 
采样 是 因为 这 种 方法 可 以 避免 开 方 操作 。 然 后 ， 我 们 使 用 宏 
UNITY_ATITEN_CHANNEL 来 得 到 衰减 纹理 中 衰减 值 所 在 的 分 量 ， 以 
得 到 最 终 的 衰减 值 。 


9.3.2 ”使 用 数学 公式 计算 衰减 


尽管 纹理 采样 的 方法 可 以 减少 计算 衰减 时 的 复杂 度 ， 但 有 时 我 们 
希望 可 以 在 代码 中 利用 公式 来 计算 光源 的 衰减 。 例 如 ， 下 面 的 代码 可 
以 计算 光源 的 线性 袁 减 : 


float distance = length(_WorldSpaceLightPos0 .xyz - 


i,.worldPosition.xyz); 
atten = 1.0 / distance; // linear attenuation 


可 惜 的 是 ，Unity 没 有 在 文档 中 给 出 内 置 衰减 计算 的 相关 说 明 。 尺 
管 我 们 仍然 可 以 在 请 元 着 色 器 中 利用 一 些 数 学 公式 来 计算 衰减 ， 但 由 
于 我 们 无 法 在 Shader 中 通过 内 置 变 量 得 到 光源 的 范围 、 聚 光 灯 的 朝向 、 
张 开 角 度 等 信息 ， 因 此 得 到 的 效果 往往 在 有 些 时 候 不 尽 如 人 意 ， 尤 其 
在 物体 离开 光源 的 照明 范围 时 会 发 生 突变 (这 是 因为 ， 如 果 物 体 不 在 
该 光源 的 照明 范围 内 ，Unity 束 不 会 为 物体 执行 一 个 Additional Pass) 。 
当然 ， 我 们 可 以 利用 脚本 将 光源 的 相关 信息 传递 给 Shader， 但 这 样 的 灵 
活性 很 低 。 我 们 只 能 期 待 未 来 的 版 本 中 Unity 可 以 完善 文档 并 开放 更 多 
的 参数 给 开发 者 使 用 。 


9.4 Unity 的 阴影 


为 了 让 场景 看 起 来 更 加 真实 ， 具 有 深度 信息 ， 我 们 通常 希望 光源 
可 以 把 一 些 物体 的 阴影 投射 在 其 他 物体 上 。 在 本 入， 我 们 束 来 学 习 如 
何在 Unity 中 让 一 个 物体 癌 其 他 物体 投射 阴影 ， 以 及 如 何 让 一 个 物体 接 
收 来 目 其 他 物体 的 阴影 。 


9.4.1 ”阴影 是 如 何 实现 的 
我 们 可 以 先 考 虑 真实 后 活 中 阴影 是 如 何 产 生 的 。 当 一 个 光源 发 射 
的 一 条 光线 遇 到 一 个 不 透明 物体 时 ， 这 条 光线 束 不 可 以 再 继续 照 亮 其 


他 物体 〈 这 里 不 考虑 光线 反射 ) 。 因 此 ， 这 个 物体 束 会 癌 它 旁边 的 物 
体 投射 阴影 ， 那 些 阴 影 区 域 的 产生 是 因为 光线 无 法 到 达 这 些 区 域 。 


在 实时 演 染 中 ， 我 们 最 利 使 用 的 是 一 种 名 为 Shadow Map 的 技术 。 
这 种 技术 理解 起 来 非常 简单 ， 它 会 百 先 把 摄像 机 的 位 置 放 在 与 光源 重 


合 的 位 置 上 ， 那 么 场景 中 该 光源 的 阴影 区 域 承 是 那些 摄像 机 看 不 到 的 
地 方 。 而 Unity 束 是 使 用 的 这 种 技术 。 


在 前 向 演 染 路 径 中 ， 如 采 场 景 中 最 重要 的 平行 光 开启 了 阴影 ， 
Unity 束 会 为 该 光源 计算 它 的 阴影 映射 纹理 (shadowmap) 。 这 张 阴影 
映射 纹理 本 质 上 也 是 一 张 深 度 图 ， 它 记录 了 从 该 光源 的 位 置 出 发 、 能 
看 到 的 场景 中 距离 它 最 近 的 表面 位 置 (深度 信息 ) 。 


那么 ， 在 计算 阴影 映射 纹理 时 ， 我 们 如 何 判 定 距离 它 最 近 的 表面 
位 置 呢 ? 一 种 方法 是 ， 先 把 摄像 机 放置 到 光源 的 位 置 上 ， 然 后 按 正常 
的 浑 染 流程 ， 即 调用 Base Pass 和 Additional Pass 来 更 新 深度 信息 ， 得 到 
阴影 映射 纹理 。 但 这 种 方法 会 对 性 能 造成 一 定 的 浪费 ， 因 为 我 们 实际 
上 仅仅 需要 深度 信息 而 已 ， 而 Base Pass 和 Additional Pass 中 往往 涉及 很 
多 复杂 的 光照 模型 计算 。 因 此 ，Unity 选 择 使 用 一 个 额外 的 Pass 来 专门 
更 新 光源 的 阴影 映射 纹理 ， 这 个 Pass 就 是 LightMode 标 签 被 设置 为 
ShadowCaster 的 Pass。 这 个 Pass 的 洽 染 目标 不 是 帧 缓存 ， 而 是 阴影 映射 
纹理 (或 深度 纹理 ) 。Unity 首 先 把 摄像 机 放置 到 光源 的 位 置 上 ， 然 后 
调用 该 Pass， 通 过 对 顶点 变换 后 得 到 光源 空间 下 的 位 置 ， 并 据 此 来 输出 
深度 信息 到 阴影 映射 纹理 中 。 因 此 ， 当 开启 了 光源 的 阴影 效果 后 ， 底 
层 泻 染 引 敬 首 先 会 在 当前 洽 染 物体 的 Unity Shader 中 找到 LightMode 为 
ShadowCaster 的 Pass， 如 采 没 有 ， 它 吏 会 在 Fallback 指 定 的 Unity 
Shader 中 继续 寻找 ， 如 果 仍 然 没 有 找到 ， 该 物体 区 无 法 回 其 他 物体 投 奸 
阴影 〈 但 它 仍然 可 以 接收 来 自 其 他 物体 的 阴影 ) 。 当 找到 了 一 个 
LightMode 为 ShadowCaster 的 Pass 后 ，Unity 会 使 用 该 Pass 来 更 新光 源 的 
阴影 映射 纹理 。 


在 传统 的 阴影 映射 纹理 的 实现 中 ， 我 们 会 在 正常 泻 染 的 Pass 中 把 顶 
点 位 置 变 换 到 光源 空间 下 ， 以 得 到 它 在 光源 空间 中 的 三 维 位 置信 息 。 
然后 ， 我 们 使 用 xy 分 量 对 阴影 映射 纹理 进行 采样 ， 得 到 阴影 映射 纹理 
中 该 位 置 的 深度 信息 。 如 果 该 深度 值 小 于 该 顶点 的 深度 值 (通常 由 z 分 
量 得 到 ) ， 那 么 说 明 该 点 位 于 阴影 中 。 但 在 Unity 5 中 ，Unity 使 用 了 不 
同 于 这 种 传统 的 阴影 采样 技术 ， 即 屏幕 空间 的 阴影 映射 技术 
(Screenspace Shadow Map) 。 屏 幕 空间 的 阴影 映射 原本 是 延迟 泻 染 
中 产生 阴影 的 方法 。 需 要 注意 的 是 ， 并 不 是 所 有 的 平台 Unity 都 会 使 用 
这 种 技术 。 这 是 因为 ， 屏 幕 空 间 的 阴影 映射 需要 显卡 文 持 MRIT， 而 有 
些 移动 平台 不 文 持 这 种 特性 。 


当 使 用 了 屏幕 空间 的 阴影 映射 技术 时 ，Unity 首 先 会 通过 调用 
LightMode 为 ShadowCaster 时 Pass 来 得 到 可 投射 阴影 的 光源 的 阴影 映射 
纹理 以 及 摄像 机 的 深度 纹理 。 人 然后， 根据 光源 的 阴影 映射 纹理 和 摄像 
机 的 深度 纹理 来 得 到 屏幕 空间 的 阴影 图 。 如 有 果 摄 像 机 的 深度 图 中 记录 
的 表面 深度 大 于 转换 到 阴影 映射 纹理 中 的 深度 值 ， 就 说 明 该 表面 虽然 
es 但 是 却 处 于 该 光源 的 阴影 中 。 通 过 这 样 的 方式 ， 阴 影 图 就 

舍 了 屏幕 至 间 中 所 有 有 阴影 的 区 域 。 如 果 我 们 想 要 一 个 物体 接收 来 
i 只 需要 在 Shader 中 对 阴影 图 进行 采样 。 由 于 阴影 
是 屏幕 空间 下 的 ， 因 此 ， 我 们 首先 需要 把 表面 坐标 从 模型 空间 变换 到 
屏幕 空间 中 ， 然 后 使 用 这 个 坐标 对 阴影 图 进行 采样 即 可 。 


总 结 一 下 ， 一 个 物体 接收 来 目 其 他 物体 的 阴影 ， 以 及 它 同 其 他 物 
体 投 映 阴 。 


。 如 采 我 们 想 要 一 个 物体 接收 来 目 其 他 物体 的 阴影 ， 就 必须 在 Shader 
中 对 阴影 映射 纹理 〈 包 括 屏 幕 空 间 的 阴影 图 ) 进行 采样 ， 把 采样 
结果 和 最 后 的 光照 结果 相 乘 来 产生 阴影 效果 。 

如 果 我 们 想 要 一 个 物体 向 其 他 物体 投 冉 阴影 ， 束 必须 把 该 物体 加 
入 到 光源 的 阴影 映射 纹理 的 计算 中 ， 从 而 让 其 他 物体 在 对 阴影 

射 纹理 采样 时 可 以 得 到 该 物体 的 相关 信息 。 在 Unity 中 ， 这 个 过 程 
是 通过 为 该 物体 执行 LightMode 为 ShadowCasterHPass 来 实现 的 。 
如 果 使 用 了 屏幕 空间 的 投影 映射 技术 ，Unity 还 会 使 用 这 个 Pass 产 
生 一 张 摄 像 机 的 深度 纹理 。 


在 下 面 的 章节 中 ， 我 们 会 学 习 如 何在 Unity 中 实现 上 面 两 个 过 程 。 
9.4.2 不 透明 物体 的 阴影 
我 们 首先 进行 如 下 的 准备 工作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene 9 4 2。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 


个 平行 光 ， 并 且 使 用 了 内 置 的 天 空 盒子 。 在 Window ~” Lighting 一 
Skybox 中 去 掉 场 景 中 的 天 空 盒 于。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 ShadowMat。 我 
们 把 9.2 广 中 的 Chapter9-ForwardRendering 赋 给 它 。 


(3) 在 场景 中 创建 一 个 正方 体 、 两 个 平面 ， 并 把 第 2 步 中 的 材质 


赋 给 正方 体 ， 但 不 改变 两 个 平面 的 材质 (默认 情况 下 ， 它 们 会 使 用 内 
置 的 Standard 材 质 ) 。 


(4) 保存 场景 。 


为 了 让 场景 中 可 以 产生 阴影 ， 我 们 首先 需要 让 平 
影 信息 。 这 需 


耳光 可 以 收集 阴 
这 需要 在 光源 的 Light 组 件 中 开启 阴影 ， 如 图 9.15 所 示 。 
在 本 例 中 ， 我 们 选择 了 软 阴影 


(Soft Shadows) 。 
1. 让 物体 投射 阴影 

在 Unity 中 ， 我 们 可 以 选择 是 否 让 一 个 物体 投射 或 接收 阴影 。 
曾 入 


通过 设置 Mesh Renderer 组 件 中 的 Cast Shadows 和 Receive RE 
性 来 实现 的 ， 如 图 9.16 所 示 。 


> 


图 9.15 ”开启 光源 的 阴影 效果 
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图 9.16 ”Mesh Renderer 组 件 的 Cast Shadows 和 Receive Shadows 属 性 可 以 控制 该 物体 是 否 投 
射 /接收 阴影 


Cast Shadows 可 以 被 设置 为 开启 (On) 或 关闭 (Off) 。 如 果 开 启 
了 Cast Shadows 属 性 ， 那 么 Unity 就 会 把 该 物体 加 入 到 光源 的 阴影 映射 
纹理 的 计算 中 ， 从 而 让 其 他 物体 在 对 阴 景 2 
物体 的 相关 信息 。 正 如 之 前 所 说 ， 这 个 过 程 是 通过 为 该 物体 执行 
LightMode 为 ShadowCaster 的 Pass 来 实现 的 。Receive Shadows 则 可 以 
选择 是 否 让 物体 接收 来 自 其 他 物体 的 阴影 。 如 果 没 有 开启 Receive 
Shadows， 那 么 当 我 们 调用 Unity 的 内 置 宏和 变量 计算 阴影 (在 后 面 我 
们 会 看 到 如 何 实现 ) 时 ， 这 些 宏 通过 判断 该 物体 没有 开局 接收 阴影 的 
功能 ， 束 不 会 在 内 部 为 我 们 计算 阴影 。 


我 们 把 正方 体 和 两 个 平面 的 Cast Shadows 和 Receive Shadows 都 设 
为 开启 状态 ， 可 以 得 到 图 9.17 中 的 结 


A 图 9.17 开启 Cast Shadows 和 Receive Shadows， 从 而 让 正方 体 可 以 投射 和 接收 阴影 


从 图 9.17 可 以 发 现 ， 尽 管 我们 没有 对 正方 体 使 用 的 Chapter9- 
ForwardRendering 进 行 任何 更 改 ， 但 正方 体 仍 然 可 以 同 下 面 的 平面 投射 
阴影 。 一 些 读者 可 能 会 有 疑问 : “之 前 不 是 说 Unity 要 使 用 LightMode 为 


ShadowCaster 的 Pass 来 演 染 阴影 映射 纹理 和 深度 图 吗 ? 但 是 Chapter9- 
ForwardRendering 中 并 没有 这 样 一 个 Pass 啊 。” 没 错 ， 我 们 在 Chapter9- 
Forward Rendering 的 SubShader 只 定义 了 两 个 Pass 一 一 个 Base Pass， 
一 个 Additional Pass。 那 么 为 什么 它 还 可 以 投 旱 阴 影 呢 ? 实际 上 ， 秘 密 
就 在 于 Chapter9- ForwardRendering 中 的 Fallback 语 义 : 


Fallback "Specular" 


在 Chapter9-ForwardRendering 中 ， 我 们 为 它 的 Fallback 指 定 了 一 个 
用 于 回调 Unity Shader， 即 内 置 的 Specular。 虽然 Specular 本 身 也 没有 包 
含 这 样 一 个 Pass， 但 是 由 于 它 的 Fallback 调 用 了 VertexLit， 它 会 继续 回 
调 ， 并 最 终 回 调 到 内 置 的 VertexLit。 我 们 可 以 在 Unity 内 置 的 着 色 器 里 
找到 它 : builtin-shaders-xxx->DefaultResourcesExtra->Normal- 
VertexLit.shader。 打 开 它 ， 我 们 瓯 可 以 看 到 “传说 中 ”的 LightMode 为 
ShadowCaster 的 Pass 了 : 


// Pass to render object as a shadow caster 
Pass 

Name "ShadowCaster" 

Tags { "LightMode" = "ShadowCaster" } 


CGPROGRAM 

#pragma vertex vert 

#pragma fragment frag 

#pragma multi_compile_shadowcaster 
#include "UnityCG.cginc" 


struct v2f { 
V2F_SHADOW_CASTER ， 


}; 

v2f vert( appdata base v ) 

{ 
v2f 0o; 
TRANSFER_SHADOW_CASTER_NORMALOFFSET(o ) 
return o; 


float4 frag( v2f i ) : SV_Target 


SHADOW_CASTER_FRAGMENT (i) 


} 
ENDCG 


上 上 面 的 代码 非常 短 ， 尺 管 有 一 些 宏和 指令 十 我 们 之 前 没有 中 到 过 
的 ， 但 它们 的 用 处 实际 上 就 是 为 了 把 深度 信息 写 入 演 染 目标 中 。 在 
Unity 5 中 ， 这 个 Pass 的 浑 染 目标 可 以 是 光源 的 阴影 映射 纹理 ， 或 是 摄 像 
机 的 深度 纹理 。 


如 果 我 们 把 Chapter9-ForwardRendering 中 的 Fallback 注 释 挤 ， 束 可 
以 发 现 正方 体 不 会 再 问 平 面 投射 阴影 了 。 当 然 ， 我 们 可 以 不 依赖 
Fallback， 而 目 行 在 SubShader 中 定义 目 己 的 LightMode 为 ShadowCaster 
的 Pass。 这 种 目 定义 的 Pass 可 以 让 我 们 更 加 灵活 地 控制 阴影 鸣 产生 。 但 
由 于 这 个 Pass 的 功能 通常 是 可 以 在 多 个 Unity Shader 间 通用 的 ， 因 此 和 直 
接 Fallback 是 一 个 更 加 方便 的 用 法 。 在 之 前 的 章节 中 ， 我 们 有 时 也 在 
Fallback 中 使 用 内 置 的 Diffuse， 虽 然 Diffuse 本 号 也 没有 包含 这 样 一 个 
Pass， 但 是 由 于 它 的 Fallback 调 用 了 VertexLit， 因 此 Unity 最 终 还 是 会 找 
到 一 个 LightMode 为 ShadowCaster 的 Pass， 从 而 可 以 让 物体 产生 阴影 
在 下 面 的 9.4.2 节 中 ， 我 们 将 继续 看 到 LightMode 为 ShadowCaster 的 Pass 
对 产生 正确 的 阴影 的 重要 性 


图 9.17 中 还 有 一 个 有 意思 的 现象 ， 就 是 右 侧 的 平面 并 没有 向 最 下 面 
的 平面 投射 阴影 ， 尽 管 它 的 Cast Shadows 已 经 被 开启 了。 在 默认 情况 
Fs 我 们 在 计算 光源 的 阴 上 映 喘 纹理 时 会 噜 除 掉 物 体 的 背面 。 但 对 于 
内 置 的 平面 来 说 ， 它 只 有 一 个 面 ， 因 此 在 本 例 中 当 计 算 阴 影 映射 纹理 


时 ， 由 于 右 侧 的 平面 在 光源 空间 下 没有 任何 正面 (frontface) ， 因 此 就 
不 会 添加 到 阴影 映射 纹理 中 。 我 们 可 以 将 Cast Shadows 设 置 为 Two 
Sided 来 允许 对 物体 的 所 有 面 都 计算 阴影 信息 。 图 9.18 给 出 了 当 把 石 侧 
平面 的 Cast Shadows 设 置 为 Two Sided 后 的 结 
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A 图 9.18 把 Cast Shadows 设 置 为 Two Sided 可 以 让 右 侧 平面 的 背光 面 也 产生 阴影 


在 本 例 中 ， 最 下 面 的 平面 之 所 以 可 以 接收 阴影 古 因为 它 使 用 了 内 
置 的 Standard Shader， 而 这 个 内 置 的 Shader 进 行 了 接收 阴影 的 相关 操 
作 。 但 由 于 正方 体 使 用 的 Chapter9-ForwardRendering 并 没有 对 阴影 进行 
任何 处 理 ， 因 此 它 不 会 显示 出 右 侧 平面 投射 来 的 阴影 。 在 下 一 世 中 ， 
我 们 将 学 习 如 何 让 正方 体 也 可 以 接收 阴影 。 


2. 让 物体 接收 阴影 


为 了 让 正方 体 可 以 接收 阴影 ， 我 们 首先 新 建 一 个 Unity Shader， 在 
本 书 资源 中 ， 它 的 名 称 为 Chapter9-Shadow。 我 们 把 Chapter9-Shadow 赋 
给 正方 体 使 用 的 材质 ShadowMat。 删 除 Chapter9- Shadow 中 的 代码 ， 把 
Chapter9-ForwardRendering 的 代码 复制 给 它 。 当 然 ， 这 样 仍 然 不 会 有 任 
何 阴影 出 现在 正方 体 上 ， 因 此 我 们 需要 对 代码 进行 一 些 更 改 。 


(1) 首先 ， 我 们 在 Base Pass 中 包含 进 一 个 新 的 内 置 文件 : 


#include "AutoLight .cginc”。 


这 征 因 为 ， 我 们 下 面 计算 阴影 时 所 用 的 宏 都 是 在 这 个 文件 中 声明 
的 。 


(2) 我 们 在 顶点 着 色 器 的 输出 结构 体 v2f 中 添加 了 一 个 内 置 宏 
SHADOW_COORDS: 
struct v2f { 


float4 pos : SV_POSITION; 
float3 worldNormal : TEXCOORDO; 


float3 worldPos : TEXCOORD1.; 
SHADOW_COORDS (2) 


这 个 安 的 作用 很 商 单 ， 束 是 声明 一 个 用 于 对 阴影 约 理 采样 的 坐 
标 。 需 要 注意 的 是 ， 这 个 宏 的 参数 需要 是 下 一 个 可 用 的 插值 寄存 器 的 
索引 值 ， 在 上 面 的 例子 中 就 是 2。 


(3) 然后 ， 我 们 在 顶点 着 色 器 返回 之 前 添加 男 一 个 内 置 宏 
TRANSFER_SHADOW: 


v2f vert(a2v v) { 
v2f Oo; 


// Pass shadow coordinates to pixel shader 
TRANSFER_SHADOW(o ) ; 


return o; 


这 个 宏 用 于 在 顶点 着 色 锅 中 计算 上 一 步 中 声明 的 阴影 纹理 坐标 。 


(4) 接着 ， 我 们 在 片 元 着 色 器 中 计算 阴影 值 ， 这 同样 使 用 了 一 个 
内 置 安 SHADOW_ATTENUATION: 


// Use shadow coordinates to sample shadow map 
fixed shadow = SHADOW_ ATTENUATION(i); 


SHADOW_COORDS、TRANSFER_SHADOW 和 和 
SHADOW _ATTENUATION 是 计算 阴影 时 的 “三 剑客 ”。 这 些 内 置 宏 帮 


助 我 们 在 必要 时 计算 光源 的 阴影 。 我 们 可 以 在 AutoLight.cginc 中 找到 它 
们 的 声明 : 


// ---- Screen space shadows 
#if defined (SHADOWS_SCREEN ) 
UNITY_DECLARE_SHADOWMAP(_ShadowMapTexture); 
#define SHADOW_ COORDS(idx1) unityShadowCoord4 _ShadowCoord : 
TEXCOORD##1idx1; 
#if defined(UNITY_NO_SCREENSPACE_ SHADOWS) 
#define TRANSFER_SHADOW(a) a._ShadowCoord = mul( 
unity_World2Shadow[0], 
mul( _Object2world, v.vertex ) ); 
inline fixed unitySampleShadow (unityShadowCoord4 
shadowCoord) 


{ 


} 
#else // UNITY_NO_SCREENSPACE_SHADOWS 
#define TRANSFER_SHADOW(a) a._ShadowCoord = 
ComputeScreenPos(a.pos); 
inline fixed unitySampleShadow (unityShadowCoord4 
shadowCoord) 


fixed shadow = tex2Dproj( _ShadowMapTexture, 
UNITY_PROJ_COORD(shadowCoord) ).r; 
return shadow; 


#endif 
#define SHADOW_ATTENUATION(a) unitySampleShadow(a._ShadowCoord) 
#endif 


// ---- Spot light shadows 
#if defined (SHADOWS_DEPTH) && defined (SPOT) 


#endif 


// ---- Point light shadows 
#if defined (SHADOWS_CUBE) 


让 


// ---- Shadows off 
#if !defined (SHADOWS_SCREEN) && !defined (SHADOWS_ DEPTH) && 
!defined (SHADOWS_CUBE) 
#define SHADOW_COORDS(idx1) 
#define TRANSFER SHADOW(a) 
#define SHADOW_ATTENUATION(a) 1.0 
#endif 


上 面 的 代码 看 起 来 很 多 、 很 复杂 ， 实 际 上 只 是 Unity 为 了 处 理 不 同 
光源 类 型 、 不 同 平台 而 定义 了 多 个 版 本 的 宏 。 在 前 向 泻 染 中 ， 宏 
SHADOWCOORDS 实 际 上 丈 是 声明 了 一 个 名 为 _ShadowCoord 的 阴影 纹 
理 坐 标 变量 。 而 TRANSEFER_SHADOW 的 实现 会 根据 平台 不 同 而 有 所 
差异 。 如 果 当 前 平台 可 以 使 用 屏幕 空间 的 阴影 映射 技术 (通过 判断 是 
否定 义 了 UNITY_NO_SCREENSPACE SHADOWS 来 得 到 ) ， 
TRANSFER_SHADOW 会 调用 内 置 的 ComputeScreenPos 函 数 来 计算 
_ShadowCoord; 如 果 该 平台 不 文 持 屏幕 空间 的 阴影 映射 技术 ， 残 会 使 
用 传统 的 阴影 映射 技术 ，TRANSFER_SHADOW 会 把 顶点 坐标 从 模型 
空间 变换 到 光源 空间 后 存储 到 _ShadowCoord 中 。 然 后 ， 


SHADOW_ATTENUATION 负 责 使 用 _ShadowCoord 对 相关 的 纹理 进行 
采样 ， 得 到 阴影 办 和 = 已 9 


注意 到 ， 上 面 内 置 代码 的 最 后 定义 了 在 关闭 阴影 时 的 处 理 代码 。 
可 以 看 出 ， 当 关闭 了 阴影 后 ，SHADOW_COORDS 和 
TRANSEFER_SHADOW 实 际 没 有 任何 作用 ， 而 
SHADOW_ATTENUATION 会 直接 等 同 于 数值 1。 


需要 读者 注意 的 是 ， 由 于 这 些 宏 中 会 使 用 上 下 文 变量 来 进行 相关 
计算 ， 例 如 TRANSFER_SHADOW 会 使 用 v.vertex 或 a.pos 来 计算 坐标 ， 
因此 为 了 能 够 让 这 些 宏 正 确 工 作 ， 我 们 需要 保证 自 定 义 的 变量 名 和 这 
些 宏 中 使 用 的 变量 名 相 匹配 。 我 们 需要 保证 : a2v 结 构 体 的 顶点 坐标 变 
量 名 必须 是 vertex， 顶 点 着色 属 的 输入 结构 体 a2v 必 须 命 名 为 v， 且 v2f 
中 的 顶点 位 置 变量 必须 命名 为 pos。 


(5) 在 完成 了 上 面 的 所 有 操作 后 ， 我 们 只 需要 把 阴影 值 shadow 和 
漫 反射 以 及 高 光 反 射 颜色 相 乘 即 可 。 


保存 文件 ， 返 回 Unity 我 们 可 以 发 现 ， 现 在 正方 体 也 可 以 接收 来 自 
右 侧 平 面 的 阴影 了 ， 如 图 9.19 所 示 。 
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A 图 9.19 正方 体 可 以 接收 来 自 右 侧 平面 的 阴影 


需要 注意 的 是 ， 在 上 面 的 代码 里 我 们 只 更 改 了 Base Pass 中 的 代 
码 ， 使 其 可 以 得 到 阴影 效果 ， 而 没有 对 Additional Pass 进 行 任何 更 改 。 
大 体 上 ，Additional Pass 的 阴影 处 理 和 Base Pass 是 一 样 的 。 我 们 将 在 
9.4.4 广 看 到 如 何 处 理 这 些 阴影 。 本 廊 实 现 的 代码 仅 是 为 了 解释 如 何 让 
物体 接收 阴影 ， 但 不 可 以 直接 应 用 到 项 目 中 。 我 们 会 在 9.5 市 中 给 出 包 
含 了 完整 的 光照 处 理 的 Unity Shader 。 


9.4.3 ”使 用 帧 调试 器 查看 阴影 绘制 过 程 


尽管 我 们 在 上 面 摘 述 了 阴影 的 产生 过 程 ， 但 如 采 有 直观 的 方式 看 
到 阴影 一 步 步 的 绘制 过 程 那 整 太 好 了 ! 圣 运 的 是 ，Unity 5 添加 了 一 个 
新 的 工具 一 一 帧 调 斌 器。 我们 曾 在 9.2.2 市 中 利用 它 查 看 过 Pass 的 绘制 过 
程 ， 在 本 下 我 们 会 通过 它 来 得 看 阴影 的 绘制 过 程 。 


首先 ， 我 们 需要 在 Window -> Frame Debugger 中 打开 帧 调试 器。 图 
9.20 给 出 了 Scene_ 9 _4_2 在 帧 调试 器 中 的 分 析 结 果 。 


从 图 9.20 中 可 以 看 出 ， 绘 制 该 场景 共和 需要 花费 20 个 泻 染 事件 。 这 些 
演 染 事件 可 以 分 为 4 个 部 分 : UpdateDepthTexture， 即 更 新 摄像 机 的 深度 
纹理 ;RenderShadowmap， 即 泻 染 得 到 平行 光 的 阴影 映射 纹理 ; 
CollectShadows， 即 根据 深度 纹理 和 阴影 映射 纹理 得 到 屏幕 空间 的 阴影 
图 ， 最 后 绘制 泻 染 结果 。 
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图 9.20 ”使 用 帧 调试 器 查看 阴影 绘制 过 程 


也 


我 们 首先 来 看 第 一 个 部 分 : 更 新 摄像 机 的 深度 纹理 ， 这 是 前 4 个 洽 
染 事 件 的 工作 。 我 们 可 以 单 击 这 些 事件 查 看 它们 的 绘制 结 末 。 图 9.21 给 
出 了 正方 体 对 深度 纹理 的 更 新 结果 。 


Camera.Render RenderTarget Camera DepthTexture 
WUpdateDepthTexture 
Clear (color+Z+stencil) 


RTO $$ Channels | A RCI SA Levels (三 一 


Draw Mesh Plane (1) 523x417 Depth 
Draw Mesh Cube Event #3: Draw Mesh 


Draw Mesh Plane 
Drawing 
WRender.OpaqueGeometry 


Shader: Unity Shader Book/Chapter9 Shadow pass #3 SHADOWS_DEPTH 
Blend One Zero, One Zero ColorMask RCBA 
ZTest LessEqual ZWrite On Cull Back Offset 0, 0 


A 图 9.21 正方 体 对 深度 纹理 的 更 新 结果 


从 帧 调试 器 右 侧 的 面板 我 们 可 以 了 解 这 一 演 染 事件 的 详细 信息 。 
在 图 9.21 中 ， 我 们 可 以 发 现 ，Unity 调 用 了 Shader: Unity Shader 
Book/Chapter9 Shadow pass #3 来 更 新 深度 纹理 ， 即 Chapter9-Shadow 中 
的 第 三 个 Pass。 尽 管 Chapter9-Shadow 中 只 定义 了 两 个 Pass， 但 正如 我 们 
之 前 所 说 ，Unity 会 在 它 的 Fallback 中 找到 第 三 个 Pass， 即 LightMode 为 
ShadowCaster 的 Pass 来 更 新 摄像 机 的 深度 纹理 。 同 样 ， 在 第 二 个 前 
分 ， 即 洽 染 得 到 平行 光 的 阴影 映射 纹理 的 过 程 中 ，Unity 也 是 调用 了 这 
个 Pass 来 得 到 光源 的 阴影 映射 纹理 。 


在 第 三 个 部 分 中 ，Unity 会 根据 之 前 两 步 的 结果 得 到 屏幕 空间 的 阴 
影 图 ， 如 图 9.22 所 示 。 


这 张 图 已 经 包含 了 最 终 屏 幕 上 所 有 有 阴影 区 域 的 阴影 。 在 最 后 一 
个 部 分 中 ， 如 果 物 体 所 使 用 的 Shader 包 含 了 对 这 张 阴 影 图 的 采样 就 会 得 
到 阴影 效果 。 图 9.23 给 出 了 这 个 部 分 Unity 是 如 何 一 步 步 绘制 出 有 阴影 
的 画面 效果 的 。 


A 图 9.22 ”屏幕 空间 的 阴影 图 


Event #17: Clear (color+Z+stencil) Event #18 Draw Mesh 
Shader: Standard pass #0 DIRECTIONAL SHADOWS_SCREEN 
Bend One Zero, One Zero ColorMask RCEA 
过 SEq 9 


Event #19: Draw Mesh 

Shader: Unity Shader Book/Chapter9 Shadow pass #0 

Blend One Zero, One Zero ColorMask ROBA 

ZTest LessEqual ZWrite On Cull Back Offset 0, 0 ZTest LessEqual ZWrite On Cull Back Offset 0, 0 


A 图 9.23 ”Unity 绘 制 屏幕 阴影 的 过 程 


9.4.4 统一 管理 光照 衰减 和 阴影 


在 9.2 方 和 9.3 证 中 ， 我 们 已 经 讲 过 如 何在 Unity Shader 的 前 癌 洽 染 路 
径 中 计算 光照 衰减 一 一 在 Base Pass 中 ， 平 行 光 的 衰减 因子 总 是 等 于 1， 
而 在 Additional Pass 中 ， 我 们 需要 判断 该 Pass 处 理 的 光源 类 型 ， 再 使 用 
内 置 变 量 和 宏 计算 衰减 因子 。 实 际 上 ， 光 照 衰 减 和 阴影 对 物体 最 终 的 
泻 染 结果 的 影响 本 质 上 是 相同 的 一 一 我 们 都 是 把 光照 衰减 因子 和 阴影 
值 及 光照 结果 相 乘 得 到 最 终 的 泻 染 结果 。 那 么 ， 是 不 是 可 以 有 一 个 方 
法 可 以 同时 计算 两 个 信息 呢 ? 好 消息 是 ，Unity 在 Shader 里 提供 了 这 样 


的 功能 ， 这 主要 是 通过 内 置 的 UNITY_LIGHT _ATTENUATION 安 来 实 
现 的 。 


为 此 ， 我 们 做 如 下 准备 工作 。 


(1) 复制 9.4.2 节 中 同样 的 场景 ， 在 本 书 资源 中 该 场景 名 为 
Scene 9 4 4。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 


AttenuationAndShadowUseBuildInFunctionsMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter9-AttenuationAndShadowUse BuildInFunctions。 把 新 的 Shader 赋 
给 第 2 步 中 创建 的 材质 。 


(4) 把 第 2 步 中 的 材质 赋 给 一 个 正方 体 。 
(5) 保存 场景 。 


打开 Chapter9-AttenuationAndShadowUseBuildInFunctions， 把 
Chapter9-Shadow 中 的 代码 粘贴 进去 。 尽 管 Chapter9-Shadow 中 的 代码 可 
以 让 我 们 得 到 正确 的 阴影 ， 但 在 实践 中 我 们 通常 会 使 用 Unity 的 内 置 宏 
和 郴 数 来 计算 衰减 和 阴影 ， 从 而 隐藏 一 些 实现 细 和 。 关 键 代 码 如 下 。 


(1) 首先 包含 进 需要 的 头 文件 。 


// Need these files to get built-in macros 
#include "Lighting.cginc" 


#include "AutoLight.cginc" 


(2) 在 v2{ 结 构 体 中 使 用 内 置 宏 SHADOW_COORDS 声 明 阴影 毕 
标 : 


Struct v2f { 
float4 pos : SV_POSITION; 
float3 worldNormal : TEXCOORDO; 


float3 worldPos : TEXCOORD1; 
SHADOW_COORDS (2) 


}; 


(3) 在 顶点 着 色 器 中 使 用 内 置 宏 TRANSFER_SHADOW 计 算 并 
同 片 元 着 色 避 传递 阴影 符 标 : 
v2f vert(a2v v) { 
v2f Oo; 
TRANSFER_SHADOW( 0) ; 


return o; 


(4) 和 9.4.2 节 中 的 方式 不 同 ， 这 次 我 们 在 片 元 着 色 器 中 使 用 内 置 
宏 UNITYLIGHT ATTENUATION 来 计算 光照 衰减 和 阴影 : 


fixed4 frag(v2f i) : SV_Target { 


// UNITY_LIGHT_ATTENUATION not only compute attenuation, but 
also shadow infos 
UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos); 


return fixed4(ambient + (diffuse + specular) * atten, 1.0); 


UNITYLIGHT_ATTENUATION 是 Unity 内 置 的 用 于 计算 光照 衰减 
和 阴影 的 宕 ， 我 们 可 以 在 内 置 的 AutoLight.cginc 里 找到 它 的 相关 声明 。 
它 接 受 3 个 参数 ， 它 会 将 光照 衰减 和 阴影 值 相 乘 后 的 结果 存储 到 第 一 个 
参数 中 。 注 意 到 ， 我 们 并 没有 在 代码 中 声明 第 一 个 参数 atten， 这 是 因 


> 


为 UNITY_LIGHT_ATTENUATION 会 帮 有 我 们 声明 这 个 变量 。 它 的 第 二 
个 参数 是 结构 体 v2f， 这 个 参数 会 传递 给 9.4.2 世 中 使 用 的 
SHADOW_ATITENUATION， 用 来 计算 阴影 值 。 而 第 三 个 参数 是 世界 
空间 的 坐标 ， 正 如 我 们 在 9.3 节 中 看 到 的 一 样 ， 这 个 参数 会 用 于 计算 光 
源 空间 下 的 坐标 ， 再 对 光照 衰减 纹理 采样 来 得 到 光照 衰减 。 我 们 强烈 
建议 读者 查阅 AutoLight.cginc 中 UNITY_LIGHT ATTENUATION 的 声 
明 ， 读 者 可 以 发 现 ，Unity 针 对 不 同 光源 类 型 、 是 否 启 用 cookie 等 不 同 
情况 声明 了 多 个 版 本 的 UNITY_LIGHT_ATTENUATION。 这 些 不 同 版 
本 的 声明 是 保证 我 们 可 以 通过 这 样 一 个 简单 的 代码 来 得 到 正确 结果 的 
关键 。 


(5) 由 于 使 用 了 UNITY_LIGHT_ATTENUATION， 我 们 的 Base 
Pass 和 Additional Pass 的 代码 得 以 统一 一 一 我 们 不 需要 在 Base Pass 里 单 
独处 理 阴 影 ， 也 不 需要 在 Additional Pass 中 判断 光源 类 型 来 处 理光 照 衰 
减 ， 一 切 都 只 需要 通过 UNITY_LIGHT_ATTENUATION 来 完成 即 可 。 
这 正 是 Unity 内 置 文件 的 魅力 所 在 。 如 采 我 们 硕 望 可 以 在 Additional Pass 
中 添加 阴影 效果 ， 束 需要 使 用 加 ragma 
multi compile_fwdadd_fullshadows 编 译 指令 来 代替 Additional Pass 中 的 
#pragma multi compile_ fwdadd 指 令 。 这 样 一 来 ，Unity 也 会 为 这 些 额 外 
的 逐 像素 光源 计算 阴影 ， 并 传递 给 Shader 。 


9.4.5 “透明度 物体 的 阴影 


我 们 从 一 开始 就 强调 ， 想 要 在 Unity 里 让 物体 能 够 问 其 他 物体 投射 
阴影 一定 要 在 它 使 用 的 Unity Shader 中 提供 一 个 LightMode 为 
ShadowCaster 的 Pass。 在 前 面 的 例子 中 ， 我 们 使 用 内 置 的 VertexLit 中 
提供 的 ShadowCaster 来 投射 阴影 。VertexLit 中 的 ShadowCaster 实 现 很 


简单 ， 它 会 正常 泻 染 整 个 物体 ， 然 后 把 深度 结果 输出 到 一 张 深度 图 或 
阴影 映射 纹理 中 。 读 者 可 以 在 内 置 文件 中 找到 相关 的 文件 。 


对 于 大 多 数 不 透 明 物体 来 说 ， 把 Fallback 设 为 VertexLit 惑 可 以 得 到 
正确 的 阴影 。 但 对 于 透明 物体 来 说 ， 我 们 就 需要 小 心 处 理 它 的 阴影 。 
透明 物体 的 实现 通常 会 使 用 透明 度 测 试 或 透明 度 混合 ， 我 们 需要 小 心 
设置 这 些 物 体 的 Fallback 。 


透明 上 度 测 试 的 处 理 比较 简单 ， 但 如 有 果 我 们 仍然 直接 使 用 VertexLit、 
Diffuse、Specular 等 作为 回调 ， 往 往 无 法 得 到 正确 的 阴影 。 这 是 因为 透 
明度 测试 需要 在 片 元 着 色 器 中 舍弃 某 些 片 元 ， 而 VertexLit 中 的 阴影 投射 
纹理 并 没有 进行 这 样 的 操作 。 我 们 在 本 书 资 源 的 Scene_9_4_5_a 中 提供 
了 这 样 一 个 测试 场景 。 我 们 使 用 了 之 前 学 习 的 透明 度 测 试 + 阴影 的 方 
法 来 泻 染 一 个 正方 体 ， 它 使 用 的 材质 和 Unity Shader 分 别 是 
AlphaTestWithShadowMat 和 Chapter9-AlphaTestWithShadow“。 Chapter9- 
AlphaTestWithShadow 使 用 了 和 8.3 节 透明 度 测试 中 几乎 完全 相同 的 代 
码 ， 只 是 添加 了 天 于 阴影 的 计算 。 


(1) 首先 包含 进 需要 的 头 文件 : 


#include "Lighting.cginc" 


#include "AutoLight.cginc" 


(2) 在 v2f 中 使 用 内 置 安 SHADOW_COORDS 声 明 阴 影 纹 理 坐 


struct v2f { 
float4 pos : SV_POSITION; 
float3 worldNormal : TEXCOORDO; 
float3 worldPos : TEXCOORD1.; 
float2 uv : TEXCOORD2; 


SHADOW_COORDS (3 ) 
}; 
注意 到 ， 由 于 我 们 已 经 占用 了 3 个 插值 寄存 器 (使 用 
TEXCOORD0、TEXCOORD1 和 TEXCOORD2 修 饰 的 变量 ) ， 因 此 
SHADOW_COORDS 中 传 入 的 参数 是 3， 这 意味 着 ， 阴 影 纹 理 坐 标 将 占 
用 第 四 个 插值 寄存 器 TEXCOORD3。 


(3) 然后 ， 在 顶点 着 色 器 中 使 用 内 置 宏 TRANSFER_SHADOW 
计算 阴影 纹理 坐标 后 传递 给 片 元 着 色 器 


v2f vert(a2v v) { 
v2f 0o; 


// pass shadow coordinates to pixel shade 


TRANSFER_SHADOW(o0); 


return o; 


(4) 在 片 元 着 色 器 中 ， 使 用 内 置 宏 
UNITY_LIGHT_ATTENUATION 计 算 阴 影 和 光照 衰减 : 


fixed4 frag(v2f i) : SV_Target { 


// UNITY_LIGHT_ATTENUATION not only compute attenuation, but 
also shadow infos 


UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos); 


return fixed4(ambient + diffuse * atten, 1.0); 


(5) 这 次 ， 我 们 更 改 它 的 Fallback， 使 用 VertexLit 作 为 它 的 回调 
Shader: 


Fallback "VertexLit" 


我 们 仍然 使 用 transparent_texture.psd 纹 理 ， 把 它 赋 给 新 的 材质 后 ， 
残 可 以 得 到 类 似 图 9.24 中 的 效果 。 


细心 的 读者 可 以 发 现 ， 铁 衬 区域 出 现 了 不 正 背 的 阴影 ， 看 起 来 残 
像 这 个 正方 体 是 一 个 普通 的 正方 体 一 样 。 而 这 并 不 是 我 们 想 要 得 到 
的 ， 我 们 硕 望 有 些 光 应 该 是 可 以 通过 这 些 铁 衬 区 域 透 过 来 的 ， 这 些 区 
域 不 应 该 有 阴影 。 出 现 这 样 的 情况 是 因为 ， 我 们 使 用 的 是 内 置 的 
VertexLit 中 提供 的 ShadowCaster 来 投射 阴影 ， 而 这 个 Pass 中 并 没有 进 
行 任何 透明 度 测试 的 计算 ， 因 此 ， 它 会 把 整个 物体 的 深度 信息 泻 染 到 
深度 图 和 阴影 映射 纹理 中 。 因 此 ， 如 果 我 们 想 要 得 到 经 过 透明 度 测试 
后 的 阴影 效果 ， 束 需要 提供 一 个 有 透明 度 测试 功能 的 ShadowCaster 
Pass。 当 然 ， 我 们 可 以 目 行 编写 一 个 这 样 的 Pass， 但 这 里 我 们 仍然 选择 
使 用 内 置 的 Unity Shader 来 减少 代码 量 。 


为 了 让 使 用 透明 度 测试 的 物体 得 到 正确 的 阴影 效果 ， 我 们 只 需要 
在 Unity Shader 中 更 改 一 行 代 码 ， 即 把 Fallback 设 置 为 
Transparent/Cutout/VertexLit， 正 如 我 们 在 8.3 方 中 实现 的 一 样 。 读 者 
可 以 在 内 置 文件 中 找到 该 Unity Shader 的 代码 ， 它 的 ShadowCaster Pass 
也 计算 了 透 明度 测试 ， 因 此 会 把 裁剪 后 的 物体 深度 信息 写 入 深度 图 和 
阴影 映射 纹理 中 。 但 需要 注意 的 是 ， 由 于 
TransparentVCutout/VertexLit 中 计算 透明 度 测 试 时 ， 使 用 了 名 为 
_Cutoff 的 属性 来 进行 透明 度 测试 ， 因 此 ， 这 要 求 我 们 的 Shader 中 也 必须 
提供 名 为 _Cutoff 的 属性 。 否 则 ， 同 样 无 法 得 到 正确 的 阴影 结果 。 


在 更 改 了 Fallback 后 ， 我 们 可 以 得 到 图 9.25 中 的 效果 。 


A 图 9.24 可 以 投射 阴影 的 使 用 透明 度 测试 的 物体 


图 9.25 ”正确 设置 了 Fallback 的 使 用 透明 度 测 试 的 物体 


全 


但 是 ， 这 样 的 结 采 仍然 有 一 些 问 题 ， 例 如 出 现 了 一 些 不 应 该 透 过 
光 的 部 分 。 出 现 这 种 情况 的 原因 是 ， 默 认 情 况 下 把 物体 泻 染 到 深度 图 
和 阴影 映射 纹理 中 仅 考 虑 物体 的 正面 。 但 对 于 本 例 的 正方 体 来 说 ， 由 
于 一 些 面 完 全 背 对 光源 ， 因 此 这 些 面 的 深度 信息 没有 加 入 到 阴影 映射 
纹理 的 计算 中 。 为 了 得 到 正确 的 结果 ， 我 们 可 以 将 正方 体 的 Mesh 
Renderer 组 件 中 的 Cast Shadows 属 性 设置 为 Two Sided， 强 制 Unity 在 计 


阴影 映射 纹理 时 计算 所 有 面 的 深度 信息 。 图 9.26 给 出 了 正确 设置 后 的 


Maximize on Play | Mute audio | Stats | Cizmos ~ 


ry 
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和 图 9.26 正确 设置 了 Cast Shadow 属 性 的 使 用 透明 度 测 试 的 物体 


与 透明 度 测 试 的 物体 相 比 ， 想 要 为 使 用 透明 度 混合 的 物体 添加 阴 
影 是 一 件 比 较 复 杂 的 事情 。 事 实 上 ， 0 
Shader， 如 Transparent/VertexLit 等 ， 都 没有 包含 阴影 投射 上 的 Pass。 这 和 意 
味 着 ， 这 些 半 透 明 物 体 不 会 参与 深度 图 和 阴影 映射 纹理 的 计算 ， 也 就 
是 说 ， 它 们 不 会 同 其 他 物体 投射 阴影 ， 同 样 它 们 也 不 会 接收 来 目 其 他 
物体 的 阴影 。 我 们 在 本 书 资源 的 Scene_9_4_5_b 中 提供 了 这 样 一 个 测试 
场景 。 我 们 使 用 了 之 前 学 习 的 透明 度 混 合 + 阴影 的 方法 来 泻 染 一 个 正 
方 体 ， 它 使 用 的 材质 和 Unity Shader 分 别 是 AlphaBlendWithShadowMat 
和 ee 。 Chapter9-AlphaBlendWithShadow 


使 用 了 和 8.4 广 透明度 混合 中 几乎 完全 相同 的 代码 ， 只 是 添加 了 关于 阴 


影 的 计算 ， 并 且 它 的 Fallback 是 内 置 的 Transparent/VertexLit。 图 9.27 显 
示 了 泻 染 结果 。 


Unity 会 这 样 处 理 半 透明 物体 是 有 它 的 原因 的 。 由 于 透明 度 混合 需 
要 关闭 深度 写 入 ， 由 此 带 来 的 问题 也 影响 了 阴影 的 生成 。 总 体 来 说 ， 
要 想 为 这 些 半 透明 物体 产生 正确 的 阴影 ， 需 要 在 每 个 光源 空间 下 仍然 
严格 按照 从 后 往 前 的 顺序 进行 泻 染 ， 这 会 让 阴影 处 理 变 得 非常 复 洒 ， 
而 且 也 会 影响 性 能 。 因 此 ， 在 Unity 中 ， 所 有 内 置 的 半 透 明 Shader 是 不 
会 产生 任何 阴影 效果 的 。 当 然 ， 我 们 可 以 使 用 一 些 dirty trick 来 强制 为 
半 透 明 物 体 生 成 阴影 ， 这 可 以 通过 把 它们 的 Fallback 设 置 为 VertexLit、 
Diffuse 这 些 不 透明 物体 使 用 的 Unity Shader， 这 样 Unity 就 会 在 它 的 
Fallback 找 到 一 个 阴影 投射 的 Pass。 然 后 ， 我 们 可 以 通过 物体 的 Mesh 
Renderer 组 件 上 的 Cast Shadows 和 Receive Shadows 选 项 来 控制 是 否 需 
向 其 他 物体 投射 或 接收 阴影 。 图 9.28 显 示 了 把 Fallback 设 为 VertexLit 并 
开局 阴影 投射 和 接收 阴影 后 的 半 透 明 物 体 的 演 染 效 采 。 
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A 图 9.27 把 使 用 了 透明 度 混 合 的 Unity Shader 的 Fallback 设 置 为 内 置 的 Transparent/VertexLit 。 
半 透 明 物 体 不 会 向 下 方 的 平面 投射 阴影 ， 也 不 会 接收 来 自 右 侧 平 面 的 阴影 ， 它 看 起 来 就 像 是 完 


€ Came 
~ | = 


和 图 9.28 把 Fallback 设 为 VertexLit 来 强制 为 半 透 明 物 体 生 成 阴影 


可 以 看 出 ， 此 时 右 侧 平 面 的 阴影 投 味 到 了 半 透 立方 体 上 ,但 
它 不 会 再 穿 透 立方 体 把 阴影 投 冉 到 下 方 的 平面 上 ， 实 是 不 正确 
的 。 同 时 ， 立 方 体 也 可 以 把 上 自身 的 阴影 投射 到 


9.5 本 书 使 用 的 标准 Unity Shader 


到 了 实现 诸 言 的 时 候 了 ! 我 们 在 之 前 的 实现 中 一 直 强 调 ， 这 些 代 
码 仅 仅 是 为 了 前 述 Unity 中 的 各 种 光照 实现 原理 ， 由 于 缺少 一 些 光 照 计 
算 ， 因 此 不 可 以 直接 使 用 到 项 目 中 。 截 止 到 本 市 ， 我 们 已 经 学 习 了 
Unity 中 所 有 的 基础 光照 计算 ， 如 多 光源 、 阴 影 和 光照 衰减 等 。 现 在 是 
时 候 把 它们 整合 到 一 起 来 实现 一 个 标准 光照 着 色 器 了 ! 我 们 在 本 书 资 
源 的 Assets/ Shaders/Common 文 件 夹 下 提供 了 两 个 这 样 标准 的 Unity 
Shader -BumpedDiffuse 和 BumpedSpecular。 这 两 个 Unity Shader 都 包 
含 了 对 法 线 纹 理 、 多 光源 、 光 照 衰减 和 阴影 的 相关 处 理 ， 唯 一 不 同 的 


是 ，BumpedDiffuse 使 用 了 Phong 光 照 模型 ， 而 BumpedSpecular 使 用 了 
Blinn-Phong 光 照 模 型 。 读 者 可 以 打开 这 两 个 文件 ， 此 时 可 以 发 现 里 面 
的 代码 都 是 我 们 学 习 过 的 。 我 们 使 用 这 两 个 Unity Shader 创 建 了 多 个 材 
质 (在 Assets/Material/Objects 和 Assets/Material/Walls 文 件 夹 下 ) ， 这 些 
材质 将 被 用 于 后 面 革 市 的 场景 搭建 中 。 读 者 可 以 参考 这 两 个 Unity 
Shader 来 实现 透明 版 本 的 Unity Shader 。 


第 10 章 ”高 级 纹理 


我 们 在 第 7 章 学 习 了 关于 基础 纹理 的 内 容 ， 这 些 纹理 包括 法 线 纹 
理 、 渐 变 纹理 和 遮 罩 纹理 等 。 这 些 纹理 尽管 用 处 不 同 ， 但 它们 都 属于 
低 维 (一 维 或 二 维 ) 纹理 。 在 本 章 中 ， 我 们 将 学 习 一 些 更 复杂 的 纹 
理 。 在 10.1 广 中 ， 我 们 会 学 习 如 何 使 用 立方 体 纹理 (Cubemap) 实现 环 
境 映射 。 然 后 ， 我 们 会 在 10.2 方 介绍 一 类 特殊 的 纹理 一 一 演 染 纹理 
(Render Texture) ， 我 们 会 发 现 泻 染 纹 理 是 多 么 的 强大 。 最 后 ，10.3 
节 将 介绍 程序 纹理 (Procedure Texture) 。 


10.1 立方 体 纹理 


在 图 形 学 中 ， 立 方 体 纹理 (Cubemap) 是 环境 映射 (Environment 
Mapping) 的 一 种 实现 方法 。 环 境 映射 可 以 模拟 物体 周围 的 环境 ， 而 
使 用 了 环境 映射 的 物体 可 以 看 起 来 像 镀 了 层 金 属 一 样 反射 出 周围 的 环 


境 。 


和 之 前 见 到 的 纹理 不 同 ， 立 方 体 纹理 一 共 包 含 了 6 张 图 像 ， 这 些 图 
像 对 应 了 一 个 立方 体 的 6 个 面 ， 立 方 体 纹 理 的 名 称 也 由 此 而 来 。 立 方 体 
的 每 个 面 表示 沿 着 世界 空间 下 的 轴 向 (上 、 下 、 左 、 右 、 前 、 后 ) 观 
察 所 得 的 图 像 。 那 么 ， 我 们 如 何 对 这 样 一 种 纹理 进行 采样 呢 ? 和 之 前 
使 用 二 维 纹理 坐标 不 同 ， 对 立方 体 纹理 采样 我 们 需要 提供 一 个 三 维 的 
纹理 坐标 ， 这 个 三 维 纹理 坐标 表示 了 我 们 在 世界 空间 下 的 一 个 3D 方 
向 。 这 个 方向 矢量 从 立方 体 的 中 心 出 发 ， 当 它 向 外 部 延伸 时 束 会 和 这 


方 体 的 6 个 纹理 之 一 发 生 相 交 ， 而 采样 得 到 的 结 末 就是 由 该 交 后 计算 而 
来 的 。 图 10.1 给 出 了 使 用 方向 矢量 对 立方 体 纹理 采样 的 过 程 。 


A 图 10.1 对 立方 体 纹理 的 采样 


使 用 立方 体 纹理 的 好 人 处 在 于 ， 它 的 实现 简单 快速 ， 而 且 得 到 的 效 
果 也 比较 好 。 但 它 也 有 一 些 缺 点 ， 例 如 当场 景 中 引入 了 新 的 物体 、 光 
源 ， 或 者 物体 发 生 移动 时 ， 我 们 束 需 要 重新 生成 立方 体 纹理 。 除 此 之 
外 ,立方 体 纹理 也 仅 可 以 反射 环境 ， 但 不 能 反射 使 用 了 该 立方 体 纹理 
的 物体 本 身 。 这 是 因为 ， 立 方 体 纹理 不 能 模拟 多 次 反射 的 结果 ， 例 如 
两 个 金属 球 互相 反射 的 情况 (事实 上 ，Unity 5 引入 的 全 局 光照 系统 
许 实 现 这 样 的 目 反 射 效 果 ， 详 见 第 18 章 ) 。 由 于 这 样 的 原因 ， 想 要 得 
到 令 人 信服 的 演 染 绪 末 ， 我 们 应 该 尽量 对 串 面 体 而 不 要 对 四 面体 使 用 
立方 体 纹理 〈 因 为 四 面体 会 反射 自身 ) 。 


立方 体 纹理 在 实时 渲染 中 有 很 多 应 用 ， 最 常见 的 是 用 于 天 空 盒子 
(Skybox) 以 及 环境 映射 。 


10.1.1 天 空 盒子 


天 空 盒子 (Skybox) 是 游戏 中 用 于 模拟 背景 的 一 种 方法 。 天 空 盒 
子 这 个 名 字 包 含 了 两 个 信息 : 它 是 用 来 模拟 天 空 的 〈 尽 管 现 在 我 们 仍 
可 以 用 它 模 拟 室内 等 背景 ) ， 它 是 一 个 金子。 当 我 们 在 场景 中 使 用 了 
天 空 盒子 时 ， 人 整个 场景 束 被 包围 在 一 个 立方 体内 。 这 个 立方 体 的 每 个 
面 使 用 的 技术 就 是 立方 体 纹理 映射 技术 。 


在 Unity 中 ， 想 要 使 用 天 空 盒子 非常 简单 。 我 们 只 需要 创建 一 个 
Skybox 材 质 ， 再 把 它 赋 给 该 场景 的 相关 设置 即 可 。 


我 们 首先 来 看 如 何 创建 一 个 Skybox 材 质 。 
(1) 新 建 一 个 材质 ， 在 本 书 资源 中 该 材质 名 为 SkyboxMat 。 


(2) 在 SkyboxMat 的 Unity Shader 下 拉 菜 单 中 选择 Unity 自 带 的 
Skybox/6 Sided， 该 材质 需要 6 张 纹 理 。 


(3) 使 用 本 书 资源 中 的 Assets/Textures/Chapter10/Cubemaps 文 件 夹 
下 的 6 张 纹理 对 第 2 步 中 的 材质 赋值 ， 注 意 这 6 张 纹理 的 正确 位 置 (如 
posz 纹 理 对 应 了 Front [+Z] 属性 ) 。 为 了 让 天 空 盒子 正常 泻 染 ， 我 们 需 
要 把 这 6 张 纹理 的 Wrap Mode 设 置 为 Clamp， 以 防止 在 接 颖 处 出 现 不 匹 
配 的 现象 。 


上 还 步 又 得 到 的 材质 如 图 10.2 所 示 。 
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A 图 10.2 天 空 盒子 材质 


上 面 的 材质 中 ， 除 了 6 张 纹理 属性 外 还 有 3 个 属性 : Tint Color， 用 
于 控制 该 材质 的 整体 颜色 ，Exposure， 用 于 调整 天 衬 盒 子 的 亮度 ; 
Rotation， 用 于 调整 天 空 盒子 沿 +y 轴 方向 的 旋转 角度 。 


下 面 ， 我 们 来 看 一 下 如 何 为 场景 添加 Skybox 。 
(1) 新 建 一 个 场景 ， 在 本 书 资源 中 该 场景 名 为 Scene 10 1_ 1。 


(2) 在 Window ~” Lighting 荣 单 中 ， 把 SkyboxMtat 赋 给 Skybox 选 
项 ， 如 图 10.3 所 示 。 


为 了 让 摄像 机 正常 显示 天 空 盒子 ， 我 们 还 需要 保证 泻 染 场景 的 摄 
像 机 的 Camera 组 件 中 的 Clear Flags 被 设置 为 Skybox。 这 样 ， 我 们 得 到 的 
场景 如 图 10.4 所 示 。 


A 图 10.3 为 场景 使 用 自 定义 的 天 空 盒子 


A 图 10.4 ”使 用 了 天 空 盒子 的 场景 


需要 说 明 的 是 ， 在 Window 一 Lighting -~ Skybox 中 设置 的 天 空 盒 
会 应 用 于 该 场景 中 的 所 有 摄像 机 。 如 果 我 们 希望 某 些 摄像 机 可 以 使 
用 不 同 的 天 空 盒子 ， 可 以 通过 向 该 摄像 机 添加 Skybox 组 件 来 履 盖 掉 之 
前 的 设置 。 也 就 是 说 ， 我 们 可 以 在 摄像 机 上 单 击 Component 一 
Rendering 一 Skybox 来 完成 对 场景 默认 天 空 盒 子 的 窗 盖 。 


在 Unity 中 ， 天 至 盒子 是 在 所 有 不 透明 物体 之 后 浑 染 的 ， 而 其 衣 后 
使 用 的 网 格 是 一 个 立方 体 或 一 个 细 分 后 的 球体 。 


10.1.2 ”创建 用 于 环境 映射 的 立方 体 纹理 


除了 天 衬 盒 子 ， 立 方 体 纹理 最 常见 的 用 处 是 用 于 环境 映射 。 通 过 
这 种 方法 ， 我 们 可 以 模拟 出 金属 质感 的 材质 。 


在 Unity 5 中 ， 创 建 用 于 环境 映射 的 立方 体 纹理 的 方法 有 三 种 : 第 
一 种 方法 是 直接 由 一 些 特殊 布局 的 纹理 创建 ， 第 二 种 方法 是 手动 创建 
一 个 Cubemap 资 源 ， 再 把 6 张 图 赋 给 它 ， 第 三 种 方法 是 由 脚本 生成 。 


如 果 使 用 第 一 种 方法 ， 我 们 需要 提供 一 张 具 有 特殊 布局 的 纹理 ， 
例如 类 似 立 方 体 展 开 图 的 交叉 布局 、 全 景 布局 等 。 然 后 ， 我 们 只 需要 
把 该 纹理 的 Texture Type 设置 为 Cubemap 即 可 ，Unity 会 为 我 们 做 好 剩 
下 的 事情 。 在 基于 物理 的 泻 染 中 ， 我 们 通常 会 使 用 一 张 HDR 图 像 来 生 
成 高 质量 的 Cubemap ( 详 见 第 18 章 ) 。 读 者 可 在 官方 文档 

(http://docs.unity3d.com/Manual/class-Cubemap.html) 中 找到 更 多 的 资 
料 。 


第 二 种 方法 是 Unity 5 之 前 的 版 本 中 使 用 的 方法 。 我 们 首先 需要 在 

项 目 资 源 中 创建 一 个 Cubemap， 然 后 把 6 张 纹 理 拖 忠 到 它 的 面板 中 。 在 

Unity 5 中 ， 官 方 推 荐 使 用 第 一 种 方法 创建 立方 体 纹理 ， 这 是 因为 第 一 

种 方法 可 以 对 纹理 数据 进行 压缩 ， 而 且 可 以 文 持 边缘 修正 、 光 请 反射 
(glossy reflection) 和 HDR 等 功能 。 


前 面 两 种 方法 都 需要 我 们 提前 准备 好 立方 体 纹理 的 图 像 ， 它 们 得 
到 的 立方 体 纹理 往往 是 被 场景 中 的 物体 所 共用 的 。 但 在 理想 情况 下 ， 


我 们 希望 根据 物体 在 场景 中 位 置 的 不 同 ， 生 成 它们 各 自 不 同 的 立方 体 
纹理 。 这 时 ， 我 们 束 可 以 在 Unity 中 使 用 脚本 来 创建 。 这 是 通过 利用 
Unity 提 供 的 Camera.RenderIoCubemap 函 数 来 实现 的 。 
Camera.RenderToCubemap 函 数 可 以 把 从 任意 位 置 观 察 到 的 场景 图 像 存 
储 到 6 张 图 像 中 ， 从 而 创建 出 该 位 置 上 对 应 的 立方 体 纹理 。 


在 Unity 的 脚本 手册 
(http://docs.unity3d.com/ScriptReference/Camera.RenderToCubemap.html 
) 中 给 出 了 如 何 使 用 Camera.RenderToCubemap 函 数 来 创建 立方 体 纹理 
的 代码 。 读 者 也 可 以 在 本 书 资源 的 
Assets/Editor/Chapter10/RenderCubemapWizard.cs 中 找到 相关 代码 。 其 中 
天 键 代码 如 下 : 


void OnWwizardCreate () { 
// create temporary camera for rendering 
GameObject go = new Gameobject( "CubemapCamera"); 
.AddComponent<Camera>(); 
place it on the object 
.transform.position = renderFromPosition.position; 
render into cubemap 


.GetComponent<Camera>().RenderToCubemap (cubemap); 


destroy temporary camera 
DestroyImmediate( go ); 


在 上 面 的 代码 中 ， 我 们 在 renderFromPosition (由 用 户 指定 ) 位 置 
处 动态 创建 一 个 摄像 机 ， 并 调用 Camera.RenderToCubemap 芳 数 把 从 当 
前 位 置 观 察 到 的 图 像 泻 染 到 用 户 指定 的 立方 体 纹理 cubemap 中 ， 完 成 后 
再 销毁 临时 摄像 机 。 由 于 该 代码 需要 添加 沫 单 栏 条 目 ， 因 此 我 们 需要 
把 它 放 在 Editor 文 件 夹 下 才能 正确 执行 。 


当 准 备 好 上 述 代码 后 ， 要 创建 一 个 Cubemap 非 常 简单 。 


(1) 我 们 使 用 和 10.1.1 节 中 相同 的 场景 ， 并 创建 一 个 空 的 
GameObject 才 象 。 我 们 会 使 用 该 GameObject 的 位 置信 息 来 浑 染 立 方 体 
纹理 。 


(2) 新 建 一 个 用 于 存储 的 立方 体 纹理 (在 Project 视 图 下 单 击 右 
键 ， 选 择 Create ~ Legacy -~ Cubemap 来 创建 ) 。 在 本 书 资源 中 ， 该 立 
方 体 纹理 名 为 Cubemap_0。 为 了 让 脚本 可 以 顺利 将 图 像 泻 染 到 该 立方 体 
纹理 中 ， 我 们 需要 在 它 的 面板 中 义 选 Readable 选 项 。 


(3) 从 Unity 菜 单 栏 选 择 GameObject -> Render into Cubemap， 打 
开 我 们 在 脚本 中 实现 的 用 于 泻 染 立 方 体 纹理 的 窗口 ， 并 把 第 1 步 中 创建 
的 GameObject 和 第 2 步 中 创建 的 Cubemap_0 分 别 拖 忠 到 窗口 中 的 Render 
From Position 和 Cubemap 选 项 ， 如 图 10.5 所 示 。 


(4) 单 击 窗 口中 的 Render! 按 钮 ， 就 可 以 把 从 该 位 置 观察 到 的 世 
界 空间 下 的 6 张 图 像 泻 染 到 Cubemap_0 中 ， 如 图 10.6 所 示 。 


4 图 10.5 使 用 脚本 创建 立方 体 纹理 
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A 图 10.6 使 用 脚本 演 染 立方 体 纹理 


需要 注意 的 是 ， 我 们 需要 为 Cubemap 设 置 大 小 ， 即 图 10.6 中 的 Face 
size 选 项 。Face size 值 越 大 ， 泻 染 出 来 的 立方 体 纹理 分 辩 率 越 大 ， 效 果 
可 能 更 好 ， 但 需要 占用 的 内 存 也 越 大 ， 这 可 以 由 面板 最 下 方 显 示 的 内 
存 大 小 得 到 。 

准备 好 了 需要 的 立方 体 纹理 后 ， 我 们 就 可 以 对 物体 使 用 环境 映射 
技术 。 而 环境 映射 最 常见 的 应 用 就 是 反射 和 折射 。 


10.1.3 反射 


使 用 了 反射 效果 的 物体 通 前 看 起 来 就 像 饶 了 层 金属 。 想 要 模拟 反 
喘 效 有 果 很 简单， 我 们 只 需要 通过 入 射 光线 的 方向 和 表面 法 线 方向 来 计 


算 反 射 方向 ， 再 利用 反射 方向 对 立方 体 纹理 采样 即 可 。 在 学 习 完 本 市 
后 ， 我 们 可 以 得 到 类 似 儿 10.7 中 的 效果 。 


A 图 10.7 使 用 了 反射 效果 的 Teapot 模 型 


为 此 ， 我 们 需要 做 如 下 准备 工作 。 
(1) 新 建 一 个 场景 ， 在 本 书 资源 中 ， 该 场景 名 为 Scene_10_1 3。 


我 们 替换 掉 Unity 5 中 场景 默认 的 天 空 盒 子 ， 而 把 10.1.1 节 中 创建 的 天 空 
盒子 材质 拖 奥 到 Window 一 Lighting 一 Skybox 选 项 中 (当然 ， 我 们 也 


可 以 为 摄像 机 添加 Skybox 组 件 来 覆盖 默认 的 天 空 盒子 ) 。 


(2) 辐 场 景 中 拖 鼻 一 个 Teapot 模 型 ， 并 调整 它 的 位 置 和 10.1.2 节 中 
创建 Cubemap_0 时 使 用 的 空 GameObject 的 位 置 相同 。 


(3) 新 建 一 个 材质 ， 在 本 书 资源 中 ， 该 材质 名 为 ReflectionMtat， 
把 材质 赋 给 第 2 步 中 创建 的 Teapot 模 型 。 


(4) 新 建 一 个 Unity Shader， 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter10-Reflection。 把 Chapter10-Reflection 赋 给 第 3 步 中 创建 的 材质 。 


反映 的 实现 非常 简单 。 打 开 Chapter10-Reflection， 删 除 原 有 的 代 
码 ， 进 行 如 下 关键 修改 。 


(1) 首先 ， 我 们 声明 了 3 个 新 的 属性 : 


Properties { 
Color ("Color Tint", Color) = (1, 1, 1, 1) 
ReflectColor ("Reflection Color", Color) = (1, 1, 1, 1) 


_ReflectAmount ("Reflect Amount", Range(0, 1)) = 1 
_Cubemap ("Reflection Cubemap", Cube) = "_Skybox" {} 


其 中 ，_ReflectColor 用 于 控制 反射 颜色 ，_ReflectAmount 用 于 控制 
这 个 材质 的 反射 程度 ， 而 _Cubemap 束 是 用 于 模拟 反射 的 环境 映射 纹 
理 。 


(2) 我 们 在 顶点 着 色 器 中 计算 了 该 顶点 处 的 反射 方向 ， 这 是 通过 
使 用 CG 的 reflect 函 数 来 实现 的 : 


v2f vert(a2v v) { 
v2f Oo; 


oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 
o.worldNormal = UnityObjectToworldNormal(v.normal); 
oOo.worldPos = mul(_Object2world, v.vertex).xyz; 
oO.worldViewDir = UnityworldSpaceViewDir(o.worldPos); 


// Compute the reflect dir in world space 
oOo.worldRefl = reflect(-o.worldViewDir, o.worldNormal); 


TRANSFER_SHADOW(o); 


return o; 
} 


物体 反射 到 摄像 机 中 的 光线 方 喇 ， 可 以 由 光路 可 逆 的 原则 来 反问 
求 得 。 也 束 生 说 ， 我 们 可 以 计算 视角 方向 关于 顶点 法 线 的 反射 方 回来 
求 得 入 射 光 线 的 方向 。 


(3) 在 片 元 着 色 器 中 ， 利 用 反射 方向 来 对 立方 体 纹理 采样 : 


fixed4 frag(v2f i) : SV_Target { 
fixed3 worldNormal = normalize(i.worldNormal); 
fixed3 worldLightDir = 
normalize(UnityworldSpaceLightDir(i.worldPos)); 
fixed3 worldViewDir = normalize(i.worldViewDir ); 


fixed3 ambient = UNITY_LIGHTMODEL_ AMBIENT. xyz; 


fixed3 diffuse = _LightColorO.rgb * _Color.rgb * max(0, 
dot(worldNormal, worldLightDir)); 


// Use the reflect dir in world space to access the cubemap 


fixed3 reflection = texCUBE(_Cubemap, i.worldRefl).rgb * 
_ReflectColor.rgb; 


UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos); 
// Mix the diffuse color with the reflected color 
fixed3 color = ambient + lerp(diffuse, reflection, 


_ReflectAmount) * atten; 


return fixed4(color, 1.0); 


对 立方 体 纹理 的 采样 需要 使 用 CG 的 texCUBE 函 数 。 注 意 到 ， Ee 
面 的 计算 中 ， 我 们 在 采样 时 并 没有 对 i.worldRefl 进 行 归 一 化 操作 。 
因为 ， 用 于 采样 的 参数 仅仅 是 作为 方 风 变 量 传递 4 pi 
因此 我 们 没有 必要 进行 一 次 归 一 化 的 操作 。 然 后 ， 我 们 使 用 
_ReflectAmount 来 混合 漫 反射 颜色 和 反射 颜色 ， 并 和 环境 光照 相 加 后 
回 。 


在 上 面 的 计算 中 ， 我 们 选择 在 顶点 看 色 郁 中 计算 反射 方向 。 当 
然 ， 我 们 也 可 以 选择 在 片 元 着 色 器 中 计算 ， 这样 得 到 的 效果 更 加 细 
用 。 但 是 ， 对 于 绝 大 多 数 人 来 说 这 种 差别 往往 是 可 以 忽略 不 计 的 ， 
此 出 于 性 能 方面 的 考虑 ， 我 们 选择 在 顶点 着 色 器 中 计算 反射 方向 。 


保存 后 返回 场景 ， 在 材质 面板 中 把 Cubemap_0 拖 虑 到 Reflection 
Cubemap 属 性 中 ， 并 调整 其 他 参数 ， 即 可 得 到 类 似 图 10.7 中 的 效果 。 


10.1.4 折射 


在 这 一 节 中 ， 我 们 将 学 习 如 何在 Unity Shader 中 模拟 为 一 个 环境 映 
冉 的 钊 见 应 用 一 一 折 冉 。 


折 喘 的 物理 原理 比 反 射 复 洒 一 些 。 我 们 在 初中 物理 束 已 经 接触 过 
折射 的 定义 ， 当 光线 从 一 种 介质 (例如 空气 | 斜 射 入 另 一 种 介质 〈 例 
如 玻璃 ) 时 ， 传 播 方向 一 般 会 发 生 改 变 。 当 给 定 入 射 角 时 ， 我 们 可 以 
使 用 斯 涅 尔 定律 (Snell's Law) 来 计算 反射 角 。 当 光 从 介质 1 沿 着 和 表 
面 法 线 夹 角 为 91 的 方向 斜 射 入 介质 2 时 ， 我 们 可 以 使 用 如 下 公式 计算 折 
射 光 线 与 法 线 的 夹 角 6:: 


11Sin01=112Sin0， 


其 中 ，mm1 和 刀 分 别 是 两 个 介质 的 折射 率 (index of refraction) 。 
折射 率 是 一 项 重要 的 物理 利 数 ， 例 如 真空 鸭 折射 率 是 1， 而 玻璃 的 折射 
率 一 般 是 1.5。 图 10.8 给 出 了 这 些 变量 之 间 的 关系 。 


通 肖 来 说 ， 当 得 到 折 映 方 同 后 我 们 束 会 直接 使 用 它 来 对 立方 体 纹 
理 进行 采样 ， 但 这 是 不 符合 物理 规律 的 。 对 一 个 透明 物体 来 说 ， 一 种 


更 准确 的 模拟 方法 需要 计算 两 次 折 喘 一 一 一 次 是 当 光 线 进 入 它 的 内 部 
时 ， 而 男 一 次 则 是 从 它 内 部 射出 时 。 但 是 ， 想 要 在 实时 泻 染 中 模拟 出 
第 二 次 折 咽 方 同 是 比较 复 沫 的 ， 而 且 仪 仅 模 拟 一 次 得 到 的 效 灯 从 视觉 
上 看 起 来 “也 手 像 那么 回 事 的 ”。 正 如 我 们 之 前 拓 到 的 一 一 图 形 学 第 一 
准则 “如 果 它 看 起 来 是 对 的 ， 那 么 它 束 古 对 的 "。 因 此， 在 实时 泻 染 中 
我 们 通 闻 仅 模拟 第 一 次 折射 。 


在 学 习 完 本 节 后 ， 我 们 可 以 得 到 类 似 图 10.9 中 的 效果 。 


法 线 方 回 


A 图 10.8 斯 涅 尔 定 律 


A 图 10.9 使 用 了 折射 效果 的 Teapot 模 型 


为 此 ， 我 们 需要 做 如 下 准备 工作 。 


(1) 新 建 一 个 场景 ， 在 本 书 资源 中 ， 该 场景 名 为 Scene 10 1 4。 
我 们 替换 掉 Unity 5 中 场景 默认 的 天 空 合子， 而 把 10.1.1 节 中 创建 的 天 空 
盒子 材质 拖 上 忠 到 Window 一 Lighting -Skybox 选 项 中 (当然 ， 我 们 也 
可 以 为 摄像 机 添加 Skybox 组 件 来 覆盖 默认 的 天 空 盒子 ) 。 


(2) 向 场景 中 拖 忠 一 个 Teapot 模 型 ， 并 调整 它 的 位 置 。 


(3) 新 建 一 个 材质 ， 在 本 书 资 源 中 ， 该 材质 名 为 RefractionMat， 
把 材质 赋 给 第 2 步 中 创建 的 Teapot 模 型 。 


(4) 新建 一 个 Unity Shader， 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter10-Refraction。 把 Chapter10- Refraction 赋 给 第 3 步 中 创建 的 材 
质 。 


折 喘 歼 果 的 实现 略微 复杂 一 些 。 打 开 Chapter10-Refraction， 删 除 原 
有 的 代码 ， 进 行 如 下 关键 修改 。 


(1) 首先 ， 我 们 声明 了 4 个 新 属性 : 


Properties { 

Color ("Color Tint", Color) = (1, 1, 1, 1) 

RefractColor ("Refraction Color", Color) = (1, 1, 1) 
RefractAmount ("Refraction Amount", Range(©0, 1)) 


_RefractRatio ("Refraction Ratio", Range(g， 1, 1)) .5 
_Cubemap ("Refraction Cubemap", cube) = = _Skyboxa > 


其 中 ，_RefractColor、_RefractAmount 和 _Cubemap 人 与 10.1.3 广 中 挥 
制 反 射 时 使 用 的 属性 类 似 。 除 此 之 外 ， 我 们 还 使 用 了 一 个 属性 
_RefractRatio， 我 们 需要 使 用 该 属性 得 到 不 同 介质 的 透射 比 ， 以 此 来 计 
算 折 射 方向 。 


(2) 在 顶点 着 色 器 中 ， 计 算 折 射 方向 : 


v2f vert(a2v v) { 
v2f Oo; 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 
oOo.worldNormal = UnityObjectToworldNormal(v.normal); 
oOo.worldPos = mul(_Object2Wworld, v.vertex).xyz; 


oO.worldViewDir = UnityworldSpaceViewDir(o.worldPos); 


// Compute the refract dir in world space 
oOo.worldRefr = refract(-normalize(o.worldViewDir), 
normalize(o.worldNormal), _RefractRatio); 


TRANSFER_SHADOW(o); 


return o; 


我 们 使 用 了 CG 的 refract 芳 数 来 计算 折射 方向 。 它 的 第 一 个 参数 即 
为 入 射 光线 的 方向 ， 它 必须 十 归 一 化 后 的 矢量 ， 第 二 个 参数 有 古 表 面 法 
线 ， 法 线 方向 同样 需要 是 归 一 化 后 的 ， 第 三 个 参数 是 入 射 光线 所 在 介 
质 的 折射 率 和 折射 花 线 所 在 介质 的 折射 率 之 间 的 比值 ， 例 如 如 果 光 旦 
从 空气 射 到 玻璃 表面 ， 那 么 这 个 参数 应 该 是 空气 的 折 冉 率 和 玻璃 的 折 
员 率 之 间 的 比值 ， 即 1.5。 它 的 返回 值 束 是 计算 而 得 的 折 映 方 同 ， 它 
的 模 则 等 于 入 射 光 线 的 模 。 


(3) 然后 ， 我 们 在 片 元 着 色 器 中 使 用 折射 方向 对 立方 体 纹理 进行 
采样 


fixed4 frag(v2f i) : SV_Target { 
fixed3 worldNormal = normalize(i.worldNormal); 
fixed3 worldLightDir = 
normalize(UnityworldSpaceLightDir(i.worldPos)); 
fixed3 worldViewDir = normalize(i.worldViewDir ); 


fixed3 ambient = UNITY_LIGHTMODEL_ AMBIENT .xyz; 


fixed3 diffuse = _LightColorO.rgb * _Color.rgb * max(0, 
dot(worldNormal, worldLightDir)); 


// Use the refract dir in world space to access the cubemap 


fixed3 refraction = texCUBE(_Cubemap, i.worldRefr).rgb * 
_RefractColor.rgb; 


UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos); 
// Mix the diffuse color with the refract color 
fixed3 color = ambient + lerp(diffuse, refraction, 


_RefractAmount) * atten; 


return fixed4(color, 1.0); 


} 


同样 ， 我 们 也 没有 对 i.worldRefr 进 行 归 一 化 操作 ， 因 为 对 立方 体 纹 
理 的 采样 只 需要 提供 方向 即 可 。 最 后 ， 我 们 使 用 _RefractAmount 来 混合 
温 反 射 颜色 和 折射 颜色 ， 并 和 环境 光照 相 加 后 返回 。 


保存 后 返回 场景 ， 在 材质 面板 中 把 Cubemap_0 拖 虑 到 Reflection 
Cubemap 属 性 中 ， 并 调整 其 他 参数 ， 即 可 得 到 类 似 图 10.9 中 的 效果 。 


10.1.5 ” 菲 涅 耳 反 射 


在 实时 演 染 中 ， 我 们 经 常会 使 用 菲 涅 耳 反 射 (Fresnel reflection) 
来 根据 视角 方向 控制 反射 程度 。 通 俗 地 讲 ， 菲 涅 耳 反 射 描述 了 一 种 区 
学 现象 ， 即 当 苑 线 照 射 到 物体 表面 上 时 ， 一 部 分 发 生 反 射 ， 一 部 分 进 
入 物体 内 部 ， 发 生 折 射 或 散射 。 被 反射 的 光 和 入 射 光 之 间 存 在 一 定 的 
比率 天 系 ， 这 个 比率 关系 可 以 通过 菲 涅 耳 等 式 进行 计算 。 一 个 经 各 使 
用 的 例子 是 ， 当 你 站 在 调 边 ， 直 接 低 头 看 脚 边 的 水 面 时 ， 你 会 发 现 水 
几乎 是 咀 明 的 ， 你 可 以 直接 看 到 水 底 的 小 鱼 和 石子 ;但 是 ， 当 你 抬头 
看 远 处 的 水 面 时 ， 会 发 现 几乎 看 不 到 水 下 的 情景 ， 而 只 能 看 到 水 面 反 
射 上 环 境 。 这 融 是 所 谓 的 菲 涅 耳 效果 。 事 实 上 ， 不 仅仅 是 水 、 玻 璃 这 
样 的 反光 物体 具有 非 涅 耳 效 果 ， 几 平 任何 物体 都 或 多 或 少 包 售 了 非 涅 
耳 效果 ， 这 是 基于 物理 的 浑 染 中 非常 重要 的 一 项 高 光 反 射 计 算 因子 
( 详 见 第 18 章 ) 。 读 者 可 以 在 John Hable 的 一 篇 非常 有 名 的 文章 
Everything Has Fresnel (http://filmicgames.com/archives/557) 中 看 到 现 
实生 活 中 各 种 物体 的 菲 诅 耳 效 果 。 


那么 ， 我 们 如 何 计算 菲 涅 耳 反 射 呢 ? 这 就 需要 使 用 菲 涅 耳 等 式 。 
真实 世界 的 菲 涅 耳 等 式 是 非常 复杂 的 ， 但 在 实时 得 染 中 ， 我 们 通 音 会 
使 用 一 些 近 似 公 式 来 计算 。 其 中 一 个 著名 的 近似 公式 就 是 Schlick 菲 涅 
耳 近 似 等 式 : 


Fscnticx(V,n) = Fo + (1 — Fo)(l -vn) 


其 中 ，F0 是 一 个 反射 系数 ， 用 于 控制 菲 涅 耳 反 射 的 强度 ，v 是 视角 
方向 ，m 是 表面 法 线 。 另 一 个 应 用 比较 广泛 的 等 式 是 Empricial 绯 涅 耳 近 
似 等 式 : 


FEmpricial(v, n) = max(0, min(1, bias + scale x (1 一 12)Po%e) 


其 中 ，bias、scale 和 power 是 控制 项 。 


使 用 上 面 的 菲 涅 耳 近 似 等 式 ， 我 们 可 以 在 边界 处 模拟 反射 花 强 和 
折 咽 光 强 / 漫 反 喘 光 强 之 间 的 变化 。 在 许多 车 竣 、 水 面 等 材质 的 痊 染 
中 ， 我 们 会 经 单 使 用 菲 涅 耳 反 射 来 模拟 更 加 真实 的 反射 效果 。 


在 本 世 中 ， 我 们 将 使 用 Schlick 非 章 耳 近似 等 式 来 模拟 菲 诅 耳 反 
射 。 在 本 下 最 后 ， 我 们 可 以 得 到 类 似 图 10.10 中 的 效果 。 注 意图 中 在 模 
型 边界 处 的 反射 现象 


€ Came 
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A 图 10.10 ”使 用 了 菲 涅 耳 反 射 的 Teapot 模 型 


为 此 ， 我 们 需要 做 如 下 准备 工作 。 


(1) 新 建 一 个 场景 ， 在 本 书 资源 中 ， 该 场景 名 为 Scene_10 1 5。 
我 们 替换 掉 Unity 5 中 场景 默认 的 天 空 合子， 而 把 10.1.1 节 中 创建 的 天 空 
盒子 材质 拖 上 忠 到 Window 一 Lighting 一 Skybox 选 项 中 (当然 ， 我 们 也 
可 以 为 摄像 机 添加 Skybox 组 件 来 覆盖 默认 的 天 空 盒子 ) 。 


(2) 向 场景 中 拖 暇 一 个 Teapot 模 型 ， 并 调整 它 的 位 置 。 


(3) 新 建 一 个 材质 ， 在 本 书 资源 中 ， 该 材质 名 为 FresnelMat， 把 
材质 赋 给 第 2 步 中 创建 的 Teapot 模 型 。 


(4) 新 建 一 个 Unity Shader， 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter10-Fresnel。 把 Chapter10- Fresnel] 赋 给 第 3 步 中 创建 的 材质 。 


打开 Chapter10-Fresnel， 删 除 原 有 的 代码 ， 进 行 如 下 关键 修改 。 


(1) 首先 ， 我 们 在 Properties 语 义 块 中 声明 了 用 于 调整 菲 涅 耳 反 射 
的 属性 以 及 反射 使 用 的 Cubemap: 


Properties { 
_Color ("Color Tint", Color) = (1, 1, 1, 1) 
_FresnelScale ("Fresnel Scale", Range(0, 1)) = 0.5 


_Cubemap ("Reflection Cubemap", Cube) = "_Skybox" {} 


} 


(2) 在 顶点 着 色 器 中 计算 世界 空间 下 的 法 线 方向 、 视 角 方向 和 反 
员 方 问 : 


v2f vert(a2v v) { 
v2f 0)， 
0.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


oOo.worldNormal = mul(v.normal, (float3x3)_ World20bject); 


oOo.worldPos = mul(_Object2Wworld, v.vertex).xyz; 


oO.worldViewDir = UnityworldSpaceViewDir(o.worldPos); 
oOo.worldRefl = reflect(-o.worldViewDir, o.worldNormal); 


TRANSFER_SHADOW(o); 


return o; 


(3) 在 片 元 着 色 器 中 计算 菲 涅 耳 反 射 ， 并 使 用 结果 值 混合 漫 反 射 
光照 和 反射 光照 : 


fixed4 frag(v2f i) : SV_Target { 
fixed3 worldNormal = normalize(i.worldNormal); 
fixed3 worldLightDir = 
normalize(UnityworldSpaceLightDir(i.worldPos)); 
fixed3 worldViewDir = normalize(i.worldViewDir ); 


fixed3 ambient = UNITY_LIGHTMODEL_ AMBIENT .xyz; 
UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos); 
fixed3 reflection = texCUBE(_Cubemap, i.worldRefl1).rgb; 


fixed fresnel = _FresnelScale + (1 - _FresnelScale) * pow(1 - 
dot (worldViewDir, worldNormal), 5); 


fixed3 diffuse = _LightColorO.rgb * _Color.rgb * max(0, 
dot(worldNormal, worldLightDir)); 


fixed3 color = ambient + lerp(diffuse, reflection, 
saturate(fresnel)) * atten; 


return fixed4(color, 1.0); 


在 上 面 的 代码 中 ， 我 们 使 用 Schlick 菲 涅 耳 近 似 等 式 来 计算 fresnel 变 
并 使 用 它 来 混合 漫 反 射 光 照 和 反射 光照 。 一 些 实现 也 会 直接 把 
fresnel 和 反射 光照 相 乘 后 县 加 到 漫 反 射 光 照 上 ， 模 拟 边 绿 光照 的 效 采 。 


保存 后 返回 场景 ， 在 材质 面板 中 把 Cubemap_0 拖 暇 到 Cubemap 属 
性 中 ， 并 调整 其 他 参数 ， 即 可 得 到 类 似 图 10.10 中 的 效果 。 当 我 们 把 
_FresnelScale 调 广 到 1 时 ， 物 体 将 完全 反映 Cubemap 中 的 图 像 ， 当 
_FresnelScale 为 0 时 ， 则 是 一 个 具有 边缘 光照 效果 的 漫 反射 物体 。 我 们 
还 会 在 15.2 节 中 使 用 菲 涅 耳 反 射 来 混合 反射 和 折 喘 光 照 ， 以 此 来 模拟 一 
个 简单 的 水 面 效 末 。 


10.2 演 染 纹理 


在 之 前 的 学 习 中 ， 一 个 摄像 机 的 洽 染 结果 会 输出 到 颜色 缓冲 中 ， 

并 显示 到 我 们 的 屏幕 上 。 现 代 的 GPU 人 允许 我 们 把 整个 三 维 场景 演 染 到 
一 个 中 间 缓 冲 中 ， 即 泻 染 目标 纹理 (Render Target Texture，RTT) ， 
而 不 是 传统 的 帧 缓冲 或 后 备 缓冲 (back buffer) 。 与 之 相关 的 是 多 重演 
染 目标 (Multiple Render Target，MRT) ， 这 种 技术 指 的 是 GPU 人 允许 
我 们 把 场景 同时 渲染 到 多 个 泻 染 目标 纹理 中 ， 而 不 再 需要 为 每 个 泻 染 
目标 纹理 捍 独 泻 染 完整 的 场景 。 延 迟 洽 染 就 是 使 用 多 重演 染 目 标的 一 
个 应 用 。 


Unity 为 泻 染 目 标 纹理 定义 了 一 种 专门 的 纹理 类 型 一 -- 演 染 纹理 
(Render Texture) 。 在 Unity 中 使 用 泻 染 纹理 通常 有 两 种 方式 : 一 种 

方式 是 在 Project 目 录 下 创建 一 个 泻 染 纹理 ， 然 后 把 某 个 摄像 机 的 泻 染 目 
标 设 置 成 该 渲染 纹理 ， 这 样 一 来 该 摄像 机 的 泻 染 结果 就 会 实时 更 新 到 
演 染 纹理 中 ， 而 不 会 显示 在 屏幕 上 。 使 用 这 种 方法 ， 我 们 还 可 以 选择 
泻 染 纹理 的 分 辩 率 、 滤 波 模 式 等 纹理 属性 。 另 一 种 方式 是 在 屏幕 后 处 
理 时 使 用 GrabPass 命 令 或 OnRenderImage 函 数 来 获取 当前 屏幕 图 像 ， 
Unity 会 把 这 个 屏幕 图 像 放 到 一 张 和 屏 幕 分 辩 率 等 同 的 演 染 纹理 中 ， 下 


面 我 们 可 以 在 自 定 义 的 Pass 中 把 它们 当成 普通 的 纹理 来 处 理 ， 从 而 实现 
各 种 屏 幕 特 效 。 我 们 将 依次 学 习 这 两 种 方法 在 Unity 中 的 实现 
(OnRenderImage 函 数 会 在 第 12 章 中 讲 到 ) 。 


10.2.1 镜子 效果 


在 本 证 中 ， 我 们 将 学 习 如 何 使 用 渲染 纹理 来 模拟 镜子 效 末 。 学 习 
完 本 节 后 ， 我 们 可 以 得 到 类 似 图 10.11 中 的 效果 。 


A 图 10.11 镜子 效果 


为 此 ， 我 们 需要 做 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene_10 2 1。 
在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 
使 用 了 内 置 的 天 空 盒子 。 在 Window 一 Lighting ~ Skybox 中 去 掉 场 景 
中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 MirrorMat 。 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter10-Mirror。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 创建 6 个 立方 体 ， 并 调整 它们 的 位 置 和 大 小 ， 使 得 
它们 构成 围绕 着 摄像 机 的 房间 的 6 面 墙 。 给 它们 赋予 在 9.5 节 中 创建 的 标 
准 材质 ， 并 让 它们 的 颜色 互 不 相同 。 同 场景 中 添加 3 个 后 光源 ， 并 调整 
它们 的 位 置 ， 使 它们 可 以 照 腕 整个 房间 。 


(5) 创建 3 个 球体 和 两 个 正方 体 ， 调 整 它们 的 位 置 和 大 小 ， 并 给 
它们 赋予 在 9.5 市 中 创建 的 标准 材质 。 这 些 物体 将 作为 房间 内 的 饰品 。 


(6) 创建 一 个 四 边 形 (Quad) ， 调 整 它 的 位 置 和 大 小 ， 它 将 作为 
镜子 。 把 第 2 步 中 创建 的 材质 赋 给 它 。 


(7) 在 Project 视 图 下 创建 一 个 演 染 纹理 (右键 单 击 Create 一 
Render Texture) ， 在 本 书 资 源 中 ， 该 泻 染 纹理 名 为 MirrorTexture。 它 使 
用 的 纹理 设置 如 图 10.12 右 图 所 示 。 


(8) 最 后 ， 为 了 得 到 从 镜子 出 发 观察 到 的 场景 图 像 ， 我 们 还 需要 
创建 一 个 摄像 机 ， 并 调整 它 的 位 置 、 裁 前 平面 、 视 角 等 ， 使 得 它 的 显 
示 图 像 是 我 们 希望 的 镜子 图 像 。 由 于 这 个 摄像 机 不 需要 直接 显示 在 屏 
幕 上 ， 而 是 用 于 泻 染 到 纹理 。 因 此 ， 我 们 把 第 7 步 中 创建 的 
MirrorTexture 拖 忠 到 该 摄像 机 的 Target Texture 上 。 图 10.12 显 示 了 摄像 机 
面板 和 泻 染 纹理 的 相关 设置 。 
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A 图 10.12 左 图 : 把 摄像 机 的 Target Texture 设 置 成 目 定 义 的 泻 染 纹理 。 右 图 : 泻 染 纹理 使 用 的 
纹理 设置 


镜子 实现 的 原理 很 简单 ， 它 使 用 一 个 演 染 纹理 作为 输入 属性 ， 并 
把 该 泻 染 纹 理 在 水 平方 向 上 翻转 后 直接 显示 到 物体 上 即 可 。 打 开 新 建 
的 Chapter10-Mirror， 删 除 所 有 已 有 代码 ， 并 进行 如 下 关键 修改 。 


(1) 在 Properties 语 义 块 中 声明 一 个 纹理 属性 ， 它 对 应 了 由 镜子 摄 
像 机 泻 染 得 到 的 渔 染 纹理 : 


Properties { 
_MainTex ("Main Tex", 2D) = "white" {} 
} 


(2) 在 顶点 着 色 器 中 计算 纹理 坐标 : 


v2f vert(a2v v) { 
v2f 0) 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


O.UV = VvV.texcoord; 
// Mirror needs to filp x 


O.UV.X=1- 0,.UV,X; 


return o; 


在 上 面 的 代码 中 ， 我 们 翻转 了 x 分 量 的 纹理 坐标 。 这 是 因为 ， 镜 子 
里 显示 的 图 像 都 十 左 右 相 反 的 。 


(3) 在 片 元 着 色 句 中 对 泻 染 纹理 进行 采样 和 输出 : 


fixed4 frag(v2f i) : SV_Target { 
return tex2D(_MainTex, i.uv); 


保存 后 返回 场景 ， 并 把 我 们 创建 的 MirrorTexture 演 染 纹 理 拖 忠 到 材 
质 的 Main Tex 属 性 中 ， 束 可 以 得 到 图 10.11 中 的 效果 。 


在 上 面 的 实现 中 ， 我 们 把 泻 染 纹理 的 分 辨 率 大 小 设置 为 256x256 。 
有 了 时， 这 样 的 分 辨 率 会 使 图 像 模糊 不 清 ， 此 时 我 们 可 以 使 用 更 高 的 分 
辨 率 或 更 多 的 抗 锯 疮 末 样 等 。 但 需要 注意 的 是 ， 更 高 的 分 辩 率 会 影响 
带宽 和 性 能 ， 我 们 应 当 尽量 使 用 较 小 的 分 辨 率 。 


10.2.2 ”玻璃 效果 


在 Unity 中 ， 我 们 还 可 以 在 Unity Shader 中 使 用 一 种 特殊 的 Pass 来 完 
成 获取 屏幕 图 像 的 目的 ， 这 就 是 GrabPass。 当 我 们 在 Shader 中 定义 了 一 
个 GrabPass 后 ，Unity 会 把 当前 屏幕 的 图 像 绘 制 在 一 张 纹理 中 ， 以 便 我 
们 在 后 续 的 Pass 中 访问 它 。 我 们 通常 会 使 用 GrabPass 来 实现 诸如 玻璃 等 
透明 材质 的 模拟 ， 与 使 用 何 单 的 透明 混合 不 同 ， 使 用 GrabPass 可 以 让 我 
们 对 该 物体 后 面 的 图 像 进行 更 复杂 的 处 理 ， 例 如 使 用 法 线 来 模拟 折射 
效果 ， 而 不 再 是 简单 的 和 原 屏 幕 颜 色 进 行 混合 。 


需要 注意 的 是 ， 在 使 用 GrabPass 的 时 候 ， 我 们 需要 额外 小 心 物体 的 
渲染 队列 设置 。 正 如 之 前 所 说 ，GrabPass 通 常用 于 渲染 透明 物体 ， 尽 管 
代码 里 并 不 包含 混合 指令 ， 但 我 们 往往 仍然 需要 把 物体 的 泻 染 队 列 设 
置 成 透明 队列 〈 即 "Queue"='"Transparent") 。 这 样 才 可 以 保证 当 演 染 该 
物体 时 ， 所 有 的 不 透明 物体 都 已 经 被 绘制 在 屏幕 上 ， 从 而 获取 正确 的 
屏幕 图 像 。 


在 本 世 中 ， 我 们 将 会 使 用 GrabPass 来 模拟 一 个 玻璃 效 末 。 在 学 习 完 
本 节 后 ， 我 们 可 以 得 到 类 似 图 10.13 中 的 效果 。 这 种 效果 的 实现 非常 简 
单 ， 我 们 首先 使 用 一 张 法 线 纹理 来 修改 模型 的 法 线 信息 ， 然 后 使 用 了 
10.1 节 介绍 的 反射 方法 ， 通 过 一 个 Cubemap 来 模拟 玻璃 的 反射 ， 而 在 模 
拟 折 射 时 ， 则 使 用 了 GrabPass 获 取 玻 璃 后 面 的 屏幕 图 像 ， 并 使 用 切线 空 
间 下 的 法 线 对 屏幕 纹理 坐标 偏 移 后 ， 再 对 屏幕 图 像 进行 采样 来 模拟 近 
似 的 折射 效果 。 


为 此 ， 我 们 需要 做 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资 源 中 ， 该 场景 名 为 Scene_10 2 2。 
在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 
使 用 了 内 置 的 天 空 盒子 。 在 Window 一 Lighting ~” Skybox 中 去 掉 场 景 中 


的 天 空 例子。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 


GlassRefractionMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter10-GlassRefraction。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材 


质 。 


(4) 构建 一 个 测试 玻璃 效果 的 场景 。 在 本 书 资源 的 实现 中 ， 我 们 
构建 了 一 个 由 6 面 墙 围 成 的 封闭 房间 ， 并 在 房间 中 放置 了 一 个 立方 体 和 
一 个 球体 ， 其 中 球体 位 于 立方 体内 部 ， 这 是 为 了 模拟 玻璃 对 内 部 物体 
的 折射 效果 。 把 第 2 步 中 创建 的 材质 赋 给 立方 体 。 


(5) 为 了 得 到 本 场景 适用 的 环境 映射 纹理 ， 我 们 使 用 了 10.1.2 节 
中 实现 的 创建 立方 体 纹理 的 脚本 (通过 Gameobject -~ Render into 
Cubemap 打 开 编 辑 窗 口 ) 来 创建 它 ， 如 图 10.14 所 示 。 在 本 书 资源 中 ， 
该 Cubemap 名 为 Glass_Cubemap。 


A 图 10.13 玻璃 效果 


图 10.14 ”本 例 使 用 的 立方 体 纹理 


Pp 


完成 准备 工作 后 ， 打 开 Chapter10-GlassRefraction， 对 它 进行 如 下 
关键 修改 。 


(1) 首先 ， 我 们 需要 声明 该 Shader 使 用 的 各 个 属性 : 


Properties { 

MainTex ("Main Tex", 2D) = "white" {} 

BumpMap ("Normal Map", 2D) = "bump" 人 

Cubemap ("Environment Cubemap", Cube) = "_Skybox" 人 
Distortion ("Distortion", Range(©0, 100)) = 10 
RefractAmount ("Refract Amount", Range(0.0, 1.0)) = 1.0 


其 中 ，_MainTex 是 该 玻璃 的 材质 纹理 ， 默 认为 白色 纹理 ; 
_BumpMap 是 玻璃 的 法 线 纹理 ，_Cubemap 是 用 于 模拟 反射 的 环境 纹 
理 ;_Distortion 则 用 于 控制 模拟 折射 时 图 像 的 扭曲 程度 ; 
_RefractAmount 用 于 控制 折射 程度 ， 当 _RefractAmount 值 为 0 时 ， 该 玻 


璃 只 包含 反射 效果 ， 当 _RefractAmount 值 为 1 时 ， 该 玻璃 只 包括 折射 效 


(2) 定义 相应 的 泻 染 队列 ， 并 使 用 GrabPass 来 获取 屏幕 图 像 : 


SubShader { 

// We must be transparent, so other objects are drawn before 
this one. 

Tags { "Queue"="Transparent" "RenderType"="Opaque" } 


// This pass grabs the screen behind the object into a texture. 
// We can access the result in the next pass as _RefractionTex 
GrabPass { "_RefractionTex" } 


我 们 首先 在 SubShader 的 标签 中 将 泻 染 队列 设置 成 Transparent， 尽 
管 在 后 面 的 RenderType 被 设置 为 了 Opaque。 这 两 者 看 似 矛 盾 ， 但 实际 
上 服务 于 不 同 的 需求 。 我 们 在 之 前 说 过 ， 把 Queue 设 置 成 Transparent 可 
以 确保 该 物体 泻 染 时 ， 其 他 所 有 不 透明 物体 都 已 经 被 泻 染 到 屏幕 上 
了 ， 人 否则 就 可 能 无 法 正确 得 到 * 透 过 玻璃 看 到 的 图 像 ”。 而 设置 
RenderType 则 是 为 了 在 使 用 着 色 器 替换 (Shader Replacement) 时 ， 该 
物体 可 以 在 需要 时 被 正确 泻 染 。 这 通常 发 生 在 我 们 需要 得 到 摄像 机 的 
深度 和 法 线 纹理 时 ， 这 将 会 在 第 13 章 中 学 到 。 


随后 ， 我 们 通过 关键 词 GrabPass 定 义 了 一 个 抓 取 屏幕 图 像 的 Pass。 
在 这 个 Pass 中 我 们 定义 了 一 个 字符 串 ， 该 字符 串 内 部 的 名 称 决定 了 抓 取 
得 到 的 屏幕 图 像 将 会 被 存 入 哪个 纹理 中 。 实 际 上 ， 我 们 可 以 省 略 声明 
该 字符 串 ， 但 直接 声明 纹理 名 称 的 方法 往往 可 以 得 到 更 高 的 性 能 ， 具 
体 原 因 可 以 参见 本 节 最 后 的 部 分 。 


(3) 定义 演 染 玻璃 所 需 的 Pass。 为 了 在 Shader 中 访问 各 个 属性 ， 
我 们 首先 需要 定义 它们 对 应 的 变量 : 


sampler2D _MainTex; 
float4 _MainTex_ST; 
sampler2D _BumpMap; 
float4 _BumpMap_ST; 


samplerCUBE _Cubemap; 

float _Distortion; 

fixed _RefractAmount; 

sampler2D _RefractionTex; 

float4 _RefractionTex_TexelSize; 


需要 注意 的 是 ， 我 们 还 定义 了 _RefractionTex 和 
_RefractionTex_TexelSize 变 量 ， 这 对 应 了 在 使 用 GrabPass 时 指定 的 纹理 
名 称 。_RefractionTex_TexelSize 可 以 让 我 们 得 到 该 纹理 的 纹 素 大 小 ， 例 
如 一 个 大 小 为 256x512 的 纹理 ， 它 的 纹 素 大 小 为 (1/256, 1/512)。 我 们 需 
要 在 对 屏幕 图 像 的 采样 坐标 进行 偏 移 时 使 用 该 变量 。 


(4) 我 们 首先 需要 定义 顶点 着 色 器 : 


v2f vert (a2v v) { 
v2f Oo; 
,pos = mul(UNITY_MATRIX_MVP, Vv.vertex); 


.SCrPos = ComputeGrabScreenPos(o.pos); 


.UV.Xy = TRANSFORM_TEX(Vv.texcoord, _MainTex); 
‘UV.ZW = TRANSFORM_TEX(Vv.texcoord, _BumpMap); 


float3 worldPos = mul(_Object2Wworld, v.vertex).xyz; 
fixed3 worldNormal = UnityObjectTowWorldNormal(v.normal); 
fixed3 worldTangent = UnityObjectToworldDir(v.tangent.xyz); 


fixed3 worldBinormal = cross(worldNormal, worldTangent) * 
Vv.tangent.w; 


Oo.TtowoO = float4(worldTangent.x, worldBinormal .x, 
worldNormal.x, worldPos.x); 

oOo.Ttow1 = float4(worldTangent.y, worldBinormal.y, 
worldNormal.y, worldPos.y); 

oOo.Ttow2 = float4(worldTangent.z, worldBinormal.z, 
worldNormal.z, worldPos.z); 


return o; 


在 进行 了 必要 的 顶点 坐标 变换 后 ， 我 们 通过 调用 内 置 的 
ComputeGrabScreenPos 函 数 来 得 到 对 应 被 抓 取 的 屏幕 图 像 的 采样 坐标 。 
读者 可 以 在 UnityCG.cginc 文 件 中 找到 它 的 声明 ， 它 的 主要 代码 和 
ComputeScreenPos 基 本 类 似 ， 最 大 的 不 同 是 针对 平台 差异 造成 的 采样 坐 
标 问题 ( 详 见 5.6.1 节 ) 进行 了 处 理 。 接 着 ， 我 们 计算 了 _MainTex 和 
_BumpMap 的 采样 坐标 ， 并 把 它们 分 别 存 储 在 一 个 float4 类 型 变量 的 xy 
和 zw 分 量 中 。 由 于 我 们 需要 在 片 元 着 色 器 中 把 法 线 方向 从 切线 空间 
(由 法 线 纹理 采样 得 到 ) 变换 到 世界 空间 下 ， 以 便 对 Cubemap 进 行 采 
样 ， 因 此 ， 我 们 需要 在 这 里 计算 该 顶点 对 应 的 从 切线 空间 到 世界 空间 
的 变换 窍 陡 ， 并 把 该 矩阵 的 每 一 行 分 别 存 储 在 TtoW0、TtoW1 和 TtoW2 
的 xyz 分 量 中 。 这 里 面 使 用 的 数学 方法 殉 是 ， 得 到 切线 空间 下 的 3 个 坐 
标 轴 〈xyz 轴 分 别 对 应 了 切线 、 副 切线 和 法 线 的 方向 ) 在 世界 空间 下 的 
表示 ， 再 把 它们 依次 按 列 组 成 一 个 变换 矩阵 即 可 。TtoW0 等 值 的 w 轴 同 
样 被 利用 起 来 ， 用 于 存储 世 弄 空间 下 的 顶点 坐标 。 


(5) 然后 ， 定 义 片 元 着 色 器 : 


fixed4 frag (v2f i) : SV_Target { 
float3 worldPos = float3(i.TtowO.w, i.Ttowi.w, i.Ttow2.w); 
fixed3 worldViewDir = 

normalize(UnityworldSpaceViewDir (worldPos)); 


// Get the normal in tangent space 
fixed3 bump = UnpackNormal(tex2D(_BumpMap, i.,uv.zw)); 


// Compute the offset in tangent space 

float2 offset = bump.xy * _Distortion * 
_RefractionTex_TexelSize.xy; 

i,.scrPos.xy = offset + i.scrPos.xy; 

fixed3 refrCol = tex2D(_RefractionTex, 
i,scrPos.xy/i.scrPos.w).rgb; 


// Convert the normal to world space 
bump = normalize(half3(dot(i.TtowoO.xyz, bump), dot(i.Ttowi.xyz, 
bump), dot(i.Ttow2.xyz, bump))); 


fixed3 reflDir = reflect(-worldViewDir, bump); 
fixed4 texColor = tex2D(_MainTex, i.uv.xy); 
fixed3 reflCol = texCUBE(_Cubemap, reflDir).rgb * texColor.rgb; 


fixed3 finalColor = reflCol * (1 - _RefractAmount) + refrCol * 
_RefractAmount ， 


return fixed4(finalColor, 1); 


我 们 前 先 通过 TtoW0 等 变量 的 w 分 量 得 到 世界 坐标 ， 并 用 该 值得 到 
该 片 元 对 应 的 视角 方 同 。 随 后 ， 我 们 对 法 线 纹 理 进行 采样 ， 得 到 切线 
空间 下 的 法 线 方 同 。 我 们 使 用 该 值 和 _Distortion 属 性 以 及 
_RefractionTex_TexelSize 来 对 屏幕 图 像 的 采样 坐标 进行 偏 移 ， 模 拟 折 射 
效果 。_Distortion 值 越 大 ， 偏 移 量 越 大 ， 玻 璃 背后 的 物体 看 起 来 变形 程 
度 越 大 。 在 这 里 ， 我 们 选择 使 用 切线 空间 下 的 法 线 方向 来 进行 偏 移 ， 
是 因为 该 空间 下 的 法 线 可 以 反映 顶点 局 部 空间 下 的 法 线 方向 。 随 后 ， 
我 们 对 scrPos 透 视 除 法 得 到 真正 的 屏幕 坐标 (原理 可 参见 4.9.3 节 ) ， 再 
使 用 该 坐标 对 抓 取 的 屏幕 图 像 RefractionTex 进 行 采样 ， 得 到 模拟 的 折 
出 颜色 。 


之 后 ， 我 们 把 法 线 方 向 从 切线 空间 变换 到 了 世界 空间 下 (使 用 变 
换 和 矩阵 的 每 一 行 ， 即 TtoW0、TtowW1 和 TtowW2， 分 别 和 法 线 方向 点 乘 ， 
构成 新 的 法 线 方 向 ) ， 并 据 此 得 到 视角 方向 相对 于 法 线 方向 的 反射 方 
向 。 随 后 ， 使 用 反射 方向 对 Cubemap 进 行 采 样 ， 并 把 结果 和 主 纹理 颜色 
相 乘 后 得 到 反射 颜色 。 


最 后 ， 我 们 使 用 _RefractAmount 属 性 对 反射 和 折射 颜色 进行 混合 ， 
作为 最 终 的 输出 颜色 。 


完成 后 ， 我 们 把 本 书 资 源 中 的 Glass_Diffuse.jpg 和 Glass _Normal.jpg 
文件 赋 给 材质 的 Main Tex 和 Normal Map 必 性， 把 之 前 创建 的 
Glass_Cubemap 赋 给 Environment Cubemap 属 性 ， 再 调整 _RefractAmount 
属性 即 可 得 到 类 似 图 10.13 中 的 玻璃 效果 。 


在 前 面 的 实现 中 ， 我 们 在 GrabPass 中 使 用 一 个 字符 串 指明 了 被 抓 取 
的 屏幕 图 像 将 会 存储 在 哪个 名 称 的 纹理 中 。 实 际 上 ，GrabPass 文 持 两 种 
a 


。 ”直接 使 用 GrabPass { }， 然 后 在 后 续 的 Pass 中 直接 使 用 
_GrabTexture 来 访问 屏幕 图 像 。 但 是 ， 当 场景 中 有 多 个 物体 都 使 用 
了 这 样 的 形式 来 抓 取 屏 幕 时 ， 这 种 方法 的 性 能 消耗 比较 大 ， 因 为 
对 于 每 一 个 使 用 它 的 物体 ，Unity 都 会 为 它 单 独 进 行 一 次 昂 贯 的 屏 
幕 抓 取 操 作 。 但 这 种 方法 可 以 让 每 个 物体 得 到 不 同 的 屏幕 网 像 ， 
这 取决 于 它们 的 泻 染 队列 及 泻 染 它们 时 当前 的 屏幕 缓冲 中 的 颜 

色 。 

使 用 GrabPass { "TextureName" }， 正 如 本 万 中 的 实现 ， 我 们 可 以 
在 后 续 的 Pass 中 使 用 TextureName 来 访问 屏幕 图 像 。 使 用 这 种 方法 
同样 可 以 抓 取 屏幕 ， 但 Unity 只 会 在 每 一 帧 时 为 第 一 个 使 用 名 为 
TextureName 的 纹理 的 物体 执行 一 次 抓 取 屏幕 的 操作 ， 而 这 个 纹理 
同样 可 以 在 其 他 Pass 中 被 访问 。 这 种 方法 更 高 效 ， 因 为 不 管 场 景 中 
有 多 少 物体 使 用 了 该 命令 ， 每 一 帧 中 Unity 都 只 会 执行 一 次 抓 取 工 
作 ， 但 这 也 意味 着 所 有 物体 都 会 使 用 同一 张 屏 幕 图 像 。 不 过 ， 在 
大 多 数 情况 下 这 已 经 足够 了 。 


10.2.3” 演 染 纹 理 vs. GrabPass 


尽管 GrabPass 和 10.2.1 廊 中 使 用 的 泻 染 纹理 + 额外 摄像 机 的 方式 都 
可 以 抓 取 屏 幕 岁 像 ， 但 它们 之 间 还 是 有 一 些 不 同 的 。GrabPass 的 好 处 在 
于 实现 简单 ， 我 们 只 需要 在 Shader 中 写 儿 行 代码 就 可 以 实现 抓 取 屏 幕 的 
目的 。 而 要 使 用 泻 染 纹理 的 话 ， 我 们 首先 需要 创建 一 个 泻 染 纹理 和 一 
个 额外 的 摄像 机 ， 再 把 该 摄像 机 的 Render Target 设 置 为 新 建 的 泻 染 纹理 
对 象 ， 最 后 把 该 泻 染 纹理 传递 给 相应 的 Shader 。 


但 从 效率 上 来 讲 ， 使 用 泻 染 纹 理 的 效率 往往 要 好 于 GrabPass， 尤 其 
在 移动 设备 上 。 使 用 泻 染 纹 理 我 们 可 以 自 定义 演 染 纹理 的 大 小 ， 尽 管 
这 种 方法 需要 把 部 分 场景 再 次 泻 染 一 遍 ， 但 我 们 可 以 通过 调整 摄像 机 
的 泻 染 层 来 减少 二 次 泻 染 时 的 场景 大 小 ， 或 使 用 其 他 方法 来 控制 摄像 
机 是 否 需要 开启 。 而 使 用 GrabPass 获 取 到 的 图 像 分 辨 率 和 显示 屏幕 是 一 
致 的 ， 这 意味 着 在 一 些 高 分 辩 率 的 设备 上 可 能 会 造成 严重 的 带宽 影 
响 。 而 且 在 移动 设备 上 ，GrabPass 虽 然 不 会 重新 泻 染 场景 ， 但 它 往往 需 
要 CPU 直接 读 取 后 备 缓冲 (back buffer) 中 的 数据 ， 破 坏 了 CPU 和 GPU 
之 间 的 并 行 性 ， 这 是 比较 耗 时 的 ， 甚 至 在 一 些 移 动 设备 上 这 是 不 支持 
的 。 


在 Unity 5 中 ，Unity 引 入 了 命令 缓冲 (Command Buffers) 来 允许 
我 们 扩展 Unity 的 泻 染 流 水 线 。 使 用 命令 缓冲 我 们 也 可 以 得 到 类 似 抓 屏 
的 效 采 ， 它 可 以 在 不 透明 物体 浴 染 后 把 当前 的 图 像 复制 到 一 个 临时 的 
泻 染 目标 纹理 中 ， 然 后 在 那里 进行 一 些 额 外 的 操作 ， 例 如 模糊 等 ， 最 
后 把 图 像 传 递 给 需要 使 用 它 的 物体 进行 处 理 和 显示 。 除 此 之 外 ， 命 令 
缓冲 还 允许 我 们 实现 很 多 特殊 的 效果 ， 读 者 可 以 在 Unity 官 方 手册 的 图 
像 命令 缓冲 一 文 (http://docs.unity3d.com/Manual/Graphics 


CommandBuffers.html) 中 找到 更 多 内 容 ，Unity 还 提供 了 一 个 示例 工程 
供 我 们 学 习 。 


10.3 程序 纹理 


程序 纹理 (Procedural Texture) 指 的 是 那些 由 计算 机 生成 的 图 
像 ， 我 们 通常 使 用 一 些 特定 的 算法 来 创建 个 性 化 图 案 或 非常 真实 的 自 
然 元 素 ， 例 如 木头 、 石 子 等 。 使 用 程序 纹理 的 好 处 在 于 我 们 可 以 使 用 
各 种 参数 来 控制 纹理 的 外 观 ， 而 这 些 属 性 不 仅仅 是 那些 颜色 属性 ， 甚 
至 可 以 是 完全 不 同类 型 的 图 和 案 属 性 ， 这 使 得 我 们 可 以 得 到 更 加 丰富 的 
动画 和 视觉 效果 。 在 本 市 中 ， 我 们 首先 会 党 试用 算法 来 实现 一 个 非常 
简单 的 程序 材质 。 然 后 ， 我 们 会 介绍 Unity 里 一 类 专门 使 用 程序 纹理 的 
材质 一 一 程序 材质 。 


10.3.1 在 Unity 中 实现 简单 的 程序 纹理 


在 这 一 下 里 ， 我 们 会 使 用 一 个 算法 来 生成 一 个 波 点 纹理 ， 如 图 
10.15 所 示 。 我 们 可 以 在 脚本 中 调整 一 些 参数 ， 如 背景 闫 色 、 波 点 颜色 
等 ， 以 控制 最 终生 成 的 纹理 外 观 。 
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图 10.15 ”脚本 生成 的 程序 纹理 


全 


为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资 源 中 ， 该 场景 名 为 Scene 10 3 1。 
在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 
使 用 了 内 置 的 天 空 盒子 。 在 Window 一 Lighting -~ Skybox 中 去 掉 场 景 
中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 


ProceduralTextureMat ° 


(3) 我 们 使 用 第 7 章 的 一 个 Unity Shader 
SingleTexture， 把 它 赋 给 第 2 步 中 创建 的 材质 。 


Chapter7- 


(4) 新 建 一 个 立方 体 ， 并 把 第 2 步 中 的 材质 赋 给 它 


(5) 我 们 并 没有 为 ProceduralTextureMat 材 质 赋 予 任 何 纹理 ， 这 是 
因为 ， 我 们 想 要 用 脚本 来 创建 程序 纹理 。 为 此 ， 我 们 再 创建 一 个 脚本 
ProceduralTextureGeneration.cs， 并 把 它 拖 忠 到 第 4 步 创建 的 立方 体 。 


在 本 节 中 ， 我 们 将 会 使 用 代码 来 生成 一 个 波 点 纹理 。 为 此 ， 我 们 
打开 ProceduralTextureGeneration.cs， 进 行 如 下 修改 。 


(1) 为 了 让 该 脚本 能 够 在 编辑 器 模式 下 运行 ， 我 们 首先 在 类 的 开 
头 添 加 如 下 代码 : 


[ExecuteInEditMode] 
public class ProceduralTextureGeneration : MonoBehaviour { 


(2) 声明 一 个 材质 ， 这 个 材质 将 使 用 该 脚本 中 生成 的 程序 纹理 : 


public Material material = null; 


(3) 然后 ， 声 明 该 程序 纹理 使 用 的 各 种 参数 : 


#region Material properties 
[SerializeField, SetProperty("texturewidth")] 
private int m texturewidth = 512; 
public int texturewidth { 
get { 
return m_ texturewidth; 


} 
set { 
m_texturewidth = value; 
_UpdateMaterial(); 
} 
} 


[SerializeField, SetProperty("backgroundColor")] 
private Color m backgroundColor = Color .white; 
public Color backgroundColor { 
get { 
return m_backgroundColor; 


} 
set { 


m_backgroundcolor = value; 
_UpdateMaterial(); 
} 
} 


[SerializeField, SetProperty("circleColor")] 
private Color m circleColor = Color.yellow; 
public Color circleColor { 
get { 
return m circleColor; 


} 
set { 
m_circleColor = value; 
_UpdateMaterial(); 
} 
} 


[SerializeField, SetProperty("blurFactor")] 
private float m blurFactor = 2.0f; 
public float blurFactor { 
get { 
return m_blurFactor; 


} 

set { 
m_blurFactor = value; 
_UpdateMaterial(); 


} 


#endregion 


#region 和 #endregion 仅 仅 是 为 了 组 织 代 码 ， 并 没有 其 他 作用 。 由 

于 我 们 生成 的 纹理 是 由 寿 干 圆 点 构成 的 ， 因 此 在 上 面 的 代码 中 ， 我 们 
声明 了 4 个 纹理 属性 : 纹理 的 大 小 ， 数 值 通 闻 是 2 的 整数 需 ; 纹理 的 育 
景 颜色 ; 圆 点 的 颜色 ;模糊 因 了 于 ， 这 个 参数 是 用 来 模糊 圆 形 边界 的 。 
注意 到 ， 对 于 每 个 属性 我 们 使 用 了 getset 的 方法 ， 为 了 在 面板 上 修改 属 
性 时 仍 可 以 执行 set 男 数 ， 我 们 使 用 了 一 个 开源 插件 SetProperty 

(https://github.con/LMNRY/SetProperty/blob/master/Scripts/SetPropertyE 
xample.cs) 。 这 使 得 当 我 们 修改 了 材质 属性 时 ， 可 以 执行 
_UpdateMtaterial 函 数 来 使 用 新 的 属性 重新 生成 程序 纹理 。 


(4) 为 了 保存 生成 的 程序 纹理 ， 我 们 声明 一 个 Texture2D 类 型 的 纹 


private Texture2D m_generatedTexture = null; 


(5) 下 面 开始 编写 各 个 函数 。 首 先 ， 我 们 需要 在 Start 函 数 中 进行 
相应 的 检查 ， 以 得 到 需要 使 用 该 程序 纹理 的 材质 : 


void Start () { 
If (material == null) 
Renderer renderer = gameObject.GetComponent<Renderer>(); 
if (renderer == null) { 
Debug.Logwarning("Cannot find a renderer."); 
return; 


material = renderer.sharedMaterial; 


_UpdateMaterial(); 


在 上 面 的 代码 里 ， 我 们 首先 检查 了 material 变 量 是 否 为 空 ， 如 条 为 
空 ， 束 尝试 从 使 用 该 脚本 所 在 的 物体 上 得 到 相应 的 材质 。 完成 后 调 
用 _UpdateMaterial 函 数 来 为 其 生成 程序 纹理 。 


(6) _UpdateMaterial 函 数 的 代码 如 下 : 


private void _UpdateMaterial() { 
if (material != null) { 
m_generatedTexture = _GenerateProceduralTexture(); 


material.SetTexture("_MainTex", m_generatedTexture); 


} 
} 


它 确 保 material 不 为 空 ， 然 后 调用 _GenerateProceduralTexture 函 数 来 
生成 一 张 程 序 纹理 ， 并 赋 给 m_generatedTexture 变 量 。 完 成 后 ， 利 用 


Mtaterial.SetTexture 函 数 把 生成 的 纹理 赋 给 材质 。 材 质 material 中 需要 有 
一 个 名 为 MainTex 的 纹理 属性 。 


(7) _GenerateProceduralTexture 范 数 的 代码 如 下 : 


private Texture2D _GenerateProceduralTexture() { 
Texture2D proceduralTexture = new Texture2D(texturewidth, 
texturewidth); 


// 定义 圆 与 圆 之 间 的 间距 
float circleInterval = texturewidth / 4.0f; 


// 定义 圆 的 半径 
float radius = 
// 定义 模糊 系数 
float edgeBlur 


texturewidth / 10.0f， 


= 1.0f / blurFactor; 


for (int w = 0; w <textureWidth; w++) { 
for (int h = 0; h <textureWidth; h++) { 


UL 


// 使 用 


9 景 频 色 进 行 初始 化 


Color pixel = backgroundColor; 


// 依次 画 9 个 


for (in 
for 


h), circleCenter) - 


Color (pixel.r, pixe 


* edgeBlur)); 


} 


贺 


ti = 0; 
(int j 


// 计算 当前 所 绘制 的 圆 的 圆心 位 置 


i< 3; I++) { 
= 0; jj < 3; j++) { 


Vector2 circleCenter = new 
Vector2(circleInterval * (i + 1), circleInterval 


” (j + 1)); 


// 计算 


当前 像素 与 圆心 的 距离 


float dist = Vector2.Distance(new Vector2(w， 


// 模糊 


radlius， 


圆 的 边界 


Color color = _MixColor(circleColor, new 


1.9g, 


pixel.b, 0.0f), Mathf.SmoothStep(0Of, 1.0f, dist 


// 与 之 前 得 到 的 颜色 进行 混合 
pixel = _MixColor(pixel, color, color.a); 


proceduralTexture.SetPixel(w, h, pixel); 


proceduralTexture.Apply(); 


return proceduralTexture,; 


代码 首先 初始 化 一 张 二 维 纹理 ， 并 且 提 前 计算 了 一 些 生 成 纹理 时 
需要 的 变量 。 然 后 ， 使 用 了 一 个 两 层 的 租 套 循环 裔 历 纹理 中 的 每 个 像 
素 ， 并 在 纹理 上 依次 绘制 9 个 圆 形 。 最 后 ， 调 用 Texture2D.Apply 芳 数 来 
强制 把 像素 值 写 入 纹理 中 ， 并 返回 该 程序 纹理 。 


保存 脚本 后 返回 场景 ， 调 整 相应 的 参数 后 可 以 得 到 类 似 图 10.15 中 
的 效果 。 我 们 可 以 调整 脚本 面板 中 的 材质 参数 来 得 到 不 同 的 程序 纹 
理 ， 如 图 10.16 所 示 。 


A 图 10.16 调整 程序 纹理 的 参数 来 得 到 不 同 的 程序 纹理 


至 此 ， 我 们 已 经 学 会 如 何 通过 脚本 来 创建 一 个 程序 纹理 ， 再 赋 给 
相应 的 材质 了 。 


10.3.2 ”Unity 的 程序 材质 


在 Unity 中 ， 有 一 类 专门 使 用 程序 纹理 的 材质 ， 叫 做 程序 材质 
(Procedural Materials) 。 这 类 材质 和 我 们 之 前 使 用 的 那些 材质 在 本 
质 上 是 一 样 的 ， 不 同 的 是 ， 它 们 使 用 的 纹理 不 是 普通 的 纹理 ， 而 是 程 
序 纹理 。 需 要 注意 的 是 ， 程 序 材质 和 它 使 用 的 程序 纹理 并 不 是 在 Unity 
中 创建 的 ， 而 是 使 用 了 一 个 名 为 Substance Designer 的 软件 在 Unity 处 部 
生成 的 。 


Substance Designer 是 一 个 非常 出 色 的 纹理 生成 工具 ， 很 多 3A 的 游 
戏 项 目 都 使 用 了 由 它 生成 的 材质 。 我 们 可 以 从 Unity 的 资源 商店 或 网 络 
中 获取 到 很 多 免费 或 付费 的 Substance 材 质 。 这 些 材质 都 是 以 .sbsar 为 后 
级 的 ， 如 图 10.17 所 示 (资源 来 源 于 
https://www.assetstore.unity3d.com/en/#!/ content/1352 ) 。 我 们 可 以 直接 
把 这 些 材质 像 其 他 资源 一 样 拖 入 Unity 项 目 中 。 


I Substance_...tion_sbsar 


A 图 10.17 后缀 为 .sbsar 的 Substance 材 质 


当 把 这 些 文件 导入 Unity 后 ，Unity 就 会 生成 一 个 程序 纹理 资源 
(Procedural Material Asset) 。 程 序 纹理 资源 可 以 包含 一 个 或 多 个 程 
序 材 质 ， 例 如 图 10.18 中 就 包含 了 两 个 程序 纹理 Cereals 和 


Cereals _ 1， 每 个 程序 纹理 使 用 了 不 同 的 纹理 参数 ， 因 此 Unity 为 它们 生 
成 了 不 同 的 程序 纹理 ， 例 如 Cereals_Diffuse 和 Cereals 1 _Diffuse 等 。 


A 图 10.18 程序 纹理 资源 


通过 单 击 程序 材质 ， 我 们 可 以 在 程序 纹理 的 面板 上 看 到 该 材质 使 


用 的 Unity Shader 及 其 属性 、 生 成 程序 纹理 使 用 的 纹理 属性 、 材 质 预 览 


ara = 
等 信息 。 


程序 材质 的 使 用 和 普通 材质 是 一 样 的 ， 我 们 把 它们 拖 忠 到 相应 的 
模型 上 即 可 。 读 者 可 以 在 本 书 资源 的 Scene_10_3_2 中 找到 这 样 的 示例 
场景 。 程 序 纹 理 的 强大 之 处 很 大 原因 在 于 它 的 多 变性 ， 我 们 可 以 通过 
调整 程序 纹理 的 属性 来 控制 纹理 的 外 观 ， 甚 至 可 以 生成 看 似 完全 不 同 
的 纹理 。 图 10.19 给 出 了 调整 Cereals 程 序 材 质 的 不 同 纹理 属性 得 到 的 不 


同 材质 效果 。 


4 图 10.19 ”调整 程序 纹理 属性 可 以 得 到 看 似 完 全 不 同 的 程序 材质 效果 


可 以 看 出 ， 程 序 材质 的 自由 度 很 高 ， 而 且 可 以 和 Shader 配 合 得 到 非 
常 出 色 的 视觉 效果 ， 它 是 一 种 非常 强大 的 材质 类 型 。 


第 11 章 ”让 画面 动 起 来 


没有 动画 的 画面 往往 让 人 觉得 很 无 趣 。 在 本 章 中 ， 我 们 将 会 学 习 
如 何况 Unity Shader 中 引入 时 间 变 量 ， 以 实现 各 种 动画 效果 。 在 11.17 
中 ， 我 们 首先 会 介绍 Unity Shader 内 置 的 时 间 变 量 ， 在 随后 的 章 市 中 我 
们 会 使 用 这 些 时 间 变 量 来 实现 动画 。11.2 市 会 介绍 两 种 第 见 的 纹理 动 
画 ， 即 序列 帧 动画 和 表 景 循环 滚动 动画 。 在 11.3 帮 ， 我 们 会 学 习 使 用 顶 
点 动画 来 实现 流动 的 河流 、 广 告 牌 等 动画 效 末 ， 并 在 最 后 给 出 一 些 在 
实现 顶点 动画 时 的 注意 事项 。 


11.1 Unity Shader 中 的 内 置 变量 (时 间 篇 ) 


动画 效果 往往 都 是 把 时 间 诺 加 到 一 些 变量 的 计算 中 ， 以 便 在 时 间 
变化 时 画面 也 可 以 随 之 变化 。Unity Shader 提 供 了 一 系列 关于 时 间 的 内 
置 变量 来 允许 我 们 方便 地 在 Shader 中 访问 运行 时 间 ， 实 现 各 种 动画 歼 
果 。 表 11.1 给 出 了 这 些 内 置 的 时 间 变 量 。 


表 11.1 ”Unity 内 置 的 时 间 变 量 


t 是 自 该 场景 加 载 开 始 所 经 过 的 时 间 ，4 个 分 量 的 值 分 别 是 
(t/20, t, 2t, 3t) ° 


0 
earag eraoaataono 4 个 分 量 的 值 分 另 earag eraoaataono t/4, t/2, {) 


t 是 时 间 的 余弦 值 ，4 个 分 量 的 值 分 别 是 (t/8, t/4, t/2, 


dt 是 时 间 增 量 ，4 个 分 量 的 值 分 别 是 (dt, 1/dt, smoothDt, 
1/smoothDt) 


unity_DeltaTime | float4 


在 后 面 的 章节 中 ， 我 们 会 使 用 上 述 时 间 变 量 来 实现 纹理 动画 和 项 


O 


反动 


11.2 纹理 动画 


纹理 动画 在 游戏 中 的 应 用 非常 广 沁 。 尤 其 在 各 种 资源 部 比 较 局 限 
的 移动 平台 上 ， 我 们 往往 会 使 用 纹理 动画 来 代 奉 复杂 的 粒子 系统 等 模 
拟 各 种 动画 效果 。 


11.2.1 序列 帧 动画 


最 常见 的 纹理 动画 之 一 就 古 序 列 帧 动画 。 序 列 帧 动画 的 原理 非常 
简单 ， 它 像 放 电影 一 样 ， 依 次 播放 一 系列 关键 帧 图 像 ， 当 播放 速度 达 
到 一 定数 值 时 ， 看 起 来 束 是 一 个 连续 的 动画 。 它 的 优点 在 于 灵活 性 很 
强 ， 我 们 不 需要 进行 任何 物理 计算 就 可 以 得 到 非常 细腻 的 动画 效果 。 


臣 | 


而 它 的 缺点 也 很 明显 ， 由 于 序列 帧 中 每 张 关 键 帧 图 像 都 不 一 样 ， 因 
此 ， 要 制作 一 张 出 色 的 序列 帧 纹理 所 需要 的 美术 工程 量 也 比较 大 。 


要 想 实现 序列 帧 动画 ， 我 们 先 要 提供 一 张 包 含 了 关键 帧 图 像 的 图 
像 。 在 本 书 资 源 中 ， 我 们 提供 了 这 样 一 张 图 像 
(Assets/Textures/Chapter11/Boom.png) ， 如 图 11.1 所 示 。 


上 壕 图 像 包 售 了 8 x 8 张 关键 帆 图 像 ， 它 们 的 大 小 相同 ， 而 且 播 放 


顺序 为 从 左 到 右 、 从 上 到 下 。 图 11.2 给 出 了 不 同时 刻 播放 的 不 同 动画 效 
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本 


到 猴 尖 


A 图 11.1 本 节 使 用 的 序列 帧 图 像 


A 图 11.2 使 用 序列 帧 动画 来 实现 爆炸 效果 


为 了 在 Unity 中 实现 序列 帧 动画 ， 我 们 需要 做 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene_11 2 1。 
在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 
使 用 了 内 置 的 天 空 盒子 。 在 Window 一 Lighting ~ Skybox 中 去 掉 场 景 


中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 


ImageSequenceAnimationMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter11-ImageSequenceAnimation。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 
材质 。 


(4) 在 场景 中 创建 一 个 四 边 形 (Quad) ， 调 整 它 的 位 置 使 其 正面 
朝向 摄像 机 ， 并 把 第 2 步 中 的 材质 拖 给 暇 它 。 


上 述 序 列 帧 动画 的 精 艇 在 于 ， 我 们 需要 在 每 个 时 刻 计算 该 时 刻下 
应 该 播放 的 关键 帧 的 位 置 ， 并 对 该 关键 帧 进行 纹理 采样 。 打 开 新 建 的 
Chapter11-ImageSequenceAnimation， 删 除 原 有 的 代码 ， 并 添加 如 下 关 
键 代 码 。 


(1) 我 们 首先 声明 了 多 个 属性 ， 以 设置 该 序列 帧 动画 的 相关 参 
数 : 


Properties { 
_Color ("Color Tint", Color) = (1, 1, 1, 1) 
_MainTex ("Image Sequence", 2D) = "white" {} 
_HorizontalAmount ("Horizontal Amount", Float) = 4 


_VerticalAmount ("Vertical Amount", Float) = 4 
_Speed ("Speed", Range(1, 100)) = 30 


_MainTex 就 是 包含 了 所 有 关键 帧 图 像 的 纹理 。_HorizontalAmount 
和 _VerticalAmount 分 别 代 表 了 该 图 像 在 水 平方 向 和 坚 直 方 同 包 含 的 关 
键 帆 图 像 的 个 数 。 而 _Speed 属 性 用 于 控制 序列 帧 动画 的 播放 速度 。 


(2) 由 于 序列 帧 图 像 通常 是 透明 纹理 ， 我 们 需要 设置 Pass 的 相关 
状态 ， 以 泻 染 透明 效果 : 


SubShader { 
Tags {"Queue"="Transparent" "IgnoreProjector"="True" 
"RenderType"="Transparent"} 


Pass { 


Tags { "LightMode"="ForwardBase" } 


ZWrite Off 
Blend SrcAlpha OneMinusSrcAlpha 


由 于 序列 帧 图 像 通常 包含 了 透明 通道 ， 因 此 可 以 被 当成 是 一 个 半 
透明 对 象 。 在 这 里 我 们 使 用 半 透 明 的 “ 标 配 ?来 设置 它 的 SubShader 标 
签 ， 即 把 Queue 和 RenderType 设 置 成 Transparent， 把 IgnoreProjector 设 置 
为 True。 在 Pass 中 ， 我 们 使 用 Blend 命 令 来 开启 并 设置 混合 模式 ， 同 时 
关闭 了 深度 写 入 。 


(3) 顶点 着 色 器 的 代码 非常 简单 ， 我 们 进行 了 基本 的 顶点 变换 ， 
并 把 顶点 纹理 坐标 存储 到 了 v2f 结 构 体 里 : 
v2f vert (a2v v) { 


v2f Oo; 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


O.UV = TRANSFORM_TEX(Vv.texcoord, _MainTex); 
return o; 


(4) 片 元 着 色 器 是 我 们 的 重头 戏 : 


fixed4 frag (v2f i) : SV_Target { 
float time = floor(_Time.y * _Speed); 
float row = floor(time / _HorizontalAmount); 
float column = time - row * _HorizontalAmount; 


// half2 uv = float2(i.uv.x /_HorizontalAmount, i.uv.y / 
_VerticalAmount); 

UV.X += column / _HorizontalAmount,; 

UV.y -= row / _VerticalAmount; 

half2 uv = i.uv + half2(column, -row); 

UV.X /= _HorizontalAmount; 

UvV.y /= _VerticalAmount; 


fixed4 c = tex2D(_MainTex, uv); 
c.rgb *= _Color; 


return c; 


要 播放 帧 动画 ， 从 本 质 来 说 ， 我 们 需要 计算 出 每 个 时 刻 需要 播放 
的 关键 帧 在 纹理 中 的 位 置 。 而 由 于 序列 帧 纹理 都 是 按 行 按 列 排列 的 ， 
因此 这 个 位 置 可 以 认为 是 该 天 键 帧 所 在 的 行列 索引 数 。 因 此 ， 在 上 面 
的 代码 的 前 3 行 中 我 们 计算 了 行列 数 ， 其 中 使 用 了 Unity 的 内 置 时 间 变 量 
_Time。 由 11.1 节 可 以 知道 ，_Time.y 就 是 自 该 场景 加 载 后 所 经 过 的 时 
间 。 我 们 首先 把 _Time.y 和 速度 属性 _Speed 相 乘 来 得 到 模拟 的 时 间 ， 并 
使 用 CG 的 floor 函 数 对 结果 信 取 整 来 得 到 整数 时 间 time。 然 后 ， 我 们 使 
用 time 除 以 _HorizontalAmount 的 结果 值 的 商 来 作为 当前 对 应 的 行 索引 ， 
除法 结果 的 余数 则 是 列 索 引 。 接 下 来 ， 我 们 需要 使 用 行列 索引 值 来 构 
建 真正 的 采样 坐标 。 由 于 序列 帧 图 像 包 含 了 许多 关键 帧 图 像 ， 这 意味 
着 采样 坐标 需要 映射 到 每 个 关键 帧 图 像 的 坐标 范围 内 。 我 们 可 以 首先 
把 原 纹 理 坐 标 i.uv 按 行 数 和 列 数 进行 等 分 ， 得 到 每 个 子 图 像 的 纹理 坐标 
范围 。 然 后 ， 我 们 需要 使 用 当前 的 行列 数 对 上 面 的 结果 进行 偏 移 ， 得 
到 当前 子 图 像 的 纹理 坐标 。 需 要 注意 的 是 ， 对 坚 直 方向 的 坐标 偏 移 需 


要 使 用 减法 ， 这 是 因为 在 Unity 中 纹理 坐标 坚 直 方向 的 顺序 (从 下 到 上 
逐渐 增 大 ) 和 序列 帧 纹理 中 的 顺序 (播放 顺序 是 从 上 到 下 ) 是 相反 
的 。 这 对 应 了 上 面 代码 中 注释 掉 的 代码 部 分 。 我 们 可 以 把 上 述 过 程 中 
的 除法 整合 到 一 起 ， 束 得 到 了 注释 下 方 的 代码 。 这 样 ， 我 们 束 得 到 了 
真正 的 纹理 采样 坐标 。 


(5) 最 后 ， 我 们 把 Fallback 设 置 为 内 置 的 TransparentVertexLit (也 
可 以 选择 关闭 Fallback) : 


Fallback "Transparent/VertexLit" 


保存 后 返回 场景 ， 我 们 将 Assets/Textures/Chapter11/Boom.png ( 注 
意 ， 由 于 是 透明 纹理 ， 因 此 需要 勾 选 该 纹理 的 Alpha Is Transparency 属 
性 ) 赋 给 ImageSequenceAnimationMat 中 的 Image Sequence 属 性 ， 并 将 
Horizontal Amount 和 Vertical Amount 设 置 为 8 (因为 Boom.png 包 含 了 8 行 
8 列 的 关键 帧 图 像 ，， 完 成 后 单 击 播放 ， 并 调整 Speed 属 性 ， 束 可 以 得 
到 一 段 连 续 的 爆炸 动画 。 


11.2.2 ”滚动 的 背景 


很 多 2D 游 戏 都 使 用 了 不 断 滚 动 的 背景 来 模拟 游戏 角色 在 场景 中 的 
罕 梭 ， 这 些 背 景 往往 包含 了 多 个 层 (layers) 来 模拟 一 种 视差 效果 。 而 
这 些 背 景 的 实现 往往 就 是 利用 了 纹理 动画 。 在 本 方 中 ， 我 们 将 实现 一 

包含 了 两 层 的 无 限 深 动 的 2D 游 戏 背 景 。 本 廊 使 用 的 纹理 资源 均 来 目 
OpenGameArt (http://opengameart.org) 网 站 。 在 学 习 完 本 节 后 ， 我 们 
可 以 得 到 类 似 图 11.3 中 的 效果 。 单 击 运行 后 ， 就 可 以 得 到 一 个 无 限 深 动 
的 背景 效果 。 
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A 图 11.3 ”无限 深 动 的 背景 (纹理 来 源 : forest-background © 2012-2013 Julien Jorge 


julien.jorge@stuff-o-matic.comy) 
为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 ， 在 本 书 资源 中 ， 该 场景 名 为 Scene_11 2 2。 
在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 
使 用 了 内 置 的 天 空 盒 子 。 在 Window ~” Lighting -~ Skybox 中 去 掉 场 景 
中 的 天 空 盒子 。 由 于 本 例 模拟 的 是 2D 游 戏 中 的 滚动 背景 ， 因 此 我 们 需 
要 把 摄像 机 的 投影 模式 设置 为 正 交 投影 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
ScrollingBackgroundMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter11-ScrollingBackground。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材 
质 。 


(4) 在 场景 中 创建 一 个 四 边 形 (Quad) ， 调 整 它 的 位 置 和 大 小 ， 
使 它 充 满 摄像 机 的 视野 范围 ， 然 后 把 第 2 步 中 的 材质 抑 忠 给 它 。 该 四 边 
形 将 用 于 显示 游戏 至 景 。 


打开 新 建 的 Chapter11-ScrollingBackground， 删 除 原 有 的 代码 ， 并 
添加 如 下 关键 代码 。 


(1) 我 们 首先 声明 了 新 的 属性 : 


Properties { 

MainTex ("Base Layer (RGB)", 2D) = "white" {} 
DetailTex ("2nd Layer (RGB)", 2D) = "white" {} 
ScrollX ("Base layer Scroll Speed", Float) 


1.0 
Scroll2Xx ("2nd layer Scroll Speed", Float) 1.0 
Multiplier ("Layer Multiplier", Float) = 1 


其 中 ，_MainTex 和 _DetailTex 分 别 是 第 一 层 ( 较 远 ) 和 第 二 层 ( 较 
近 ) 的 背景 纹理 ， 而 _ScrollX 和 _Scroll2X 对 应 了 各 自 的 水 平 滚动 速度 。 
_Multiplier 参 数 则 用 于 控制 纹理 的 整体 亮度 。 


(2) 我 们 的 顶点 着 色 器 代码 非常 简单 : 


v2f vert (a2v v) { 
v2f oO; 
0.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


O.UV.Xy = TRANSFORM_TEX(Vv.texcoord, _MainTex) + 
frac(float2(_Scrollx, 0.0) * _Time.y); 


O.UV.ZW = TRANSFORM_TEX(Vv.texcoord, _DetailTex) + 
frac(float2(_Scroll2x, 0.0) * _Time.y); 


return o; 


我 们 首先 进行 了 最 基本 的 顶点 变换 ， 把 顶点 从 模型 空间 变换 到 裁 

空间 中 。 然 后 ， 我 们 计算 了 两 层 背景 纹理 的 纹理 坐标 。 为 此 ， 我 们 
_TEX 来 得 到 初始 的 纹理 坐标 。 然 后 ， 我 们 利用 
内 置 的 _Time.y 变 量 在 水 平方 向 上 对 纹理 坐标 进行 依 移 ， 以 此 达到 滚动 
的 效果 。 我 们 把 两 张 纹 理 的 纹理 坐标 存储 在 同一 个 变量 o.0v 中 ， 以 减少 
占用 的 插值 寄存 器 空间 。 


(3) 乒 元 着 色 器 的 工作 就 相对 比较 简单 : 


fixed4 frag (v2f i) : SV_Target { 
fixed4 firstLayer = tex2D(_MainTex, i.uv.xy); 
fixed4 secondLayer = tex2D(_DetailTex, i.uv.Zzw); 


fixed4 c = lerp(firstLayer, secondLayer, secondLayer .a); 


c.rgb *= _Multiplier; 


return c; 


我 们 首先 分 别 利 用 i.uv. a uv.zW 对 两 张 背 景 纹 理 进行 采样 。 然 
后 ， 使 用 第 二 层 纹 理 的 透明 通道 来 混合 两 张 纹理 ， 这 使 用 了 CG 的 lerp 
函数 。 最 后 ， 我 们 使 用 _Multiplier 参 数 和 输出 颜色 进行 相 乘 ， 以 调整 育 
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(4) 最 后 ， 我 们 把 Fallback 设 置 为 内 置 的 VertexLit (也 可 以 选择 关 
闭 Fallback) : 


Fallback "VertexLit" 


傈 存 后 返回 场景 ， 把 本 书 资源 中 的 
Assets/Textures/Chapter11/Far_Background.png 和 
Assets/Textures/Chapter1LNear_Background.png 分 别 赋 给 材质 的 Base 


Layer 和 2nd Layer 属 性 ， 并 调整 它们 的 滚动 速度 〈 由 于 我 们 想 要 在 视觉 
上 模拟 Base Layer 比 2nd Layer 更 远 的 效果 ， 因 此 Base Layer 的 滚动 速度 
要 比 2nd Layer 的 速度 慢 一 些 ) 。 单 击 运 行 后 ， 就 可 以 得 到 类 似 图 11.3 中 
的 效果 。 


11.3 顶点 动画 


如 有 果 一 个 游戏 中 所 有 的 物体 都 是 静止 鸣 ， 这 样 枯燥 的 世界 臣 介 很 
难 引 起 玩家 的 兴趣 。 顶 点 动画 可 以 让 我 们 的 场景 变 得 更 加 生动 有 趣 。 
在 游戏 中 ， 我 们 常常 使 用 顶点 动画 来 模拟 对 动 的 旗帜 、 滴 流 的 小 溪 等 
效果 。 在 本 节 中 ， 我 们 将 学 习 两 种 常见 的 顶点 动画 的 应 用 一 一 流动 的 
河流 以 及 广告 牌 技术 。 在 本 市 最 后 ， 我 们 还 将 给 出 一 些 顶 点 动画 中 的 
注意 事项 及 解决 方法 。 
11.3.1 ”流动 的 河流 

河流 的 模拟 是 顶点 动画 最 常见 的 应 用 之 一 。 它 的 原理 通常 束 是 使 
用 正弦 函数 等 来 模拟 水 流 的 波动 效 采 。 在 本 小 方 中 ， 我 们 将 学 习 如 何 
模拟 一 个 2D 的 河流 效果 。 在 学 习 完 本 太后 ， 我 们 可 以 得 到 类 似 图 11.4 
中 的 效果 。 当 单 击 运行 后 ， 可 以 观察 到 河流 不 断 流动 的 效果 。 


A 图 11.4 使 用 顶点 动画 来 模拟 2D 的 河流 


为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene_11 3 _1。 
在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 
使 用 了 内 置 的 天 空 盒子 。 在 Window ~” Lighting ~ Skybox 中 去 掉 场 景 
中 的 天 空 盒子 。 由 于 本 节 模 拟 的 是 2D 效 果 ， 因 此 我 们 需要 把 摄像 机 的 
投影 类 型 设置 为 正 交 投影 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 WaterMat。 由 于 
本 例 需 要 模拟 多 层 水 流 效 果 ， 我 们 还 创建 了 WaterMat1 和 WaterMat2 材 
质 o 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapterl1-Water。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 创建 多 个 Water 模型 ， 调 整 它们 的 位 置 、 大 小 和 方 
向 ， 然 后 把 第 2 步 中 的 材质 拖 忠 给 它们 。 


打开 新 建 的 Chapter11-Water， 删 除 原来 的 代码 ， 并 添加 如 下 关键 代 
码 。 


(1) 首先 ， 我 们 声明 了 一 些 新 的 属性 : 


Properties 
_MainTex ("Main Tex", 2D) = "white" {} 
_Color ("Color Tint", Color) = (1, 1, 1, 1) 
_Magnitude ("Distortion Magnitude", Float) = 1 


_Frequency ("Distortion Frequency", Float) = 1 
_InvwaveLength ("Distortion Inverse Wave Length", Float) = 10 
_Speed ("Speed", Float) = 0.5 


其 中 ，_MainTex 是 河流 纹理 ，_Color 用 于 控制 整体 颜色 ， 
_Magnitude 用 于 控制 水 流 波 动 的 幅度 ，_Frequency 用 于 控制 波动 频率 ， 
_InvWaveLength 用 于 控制 波长 的 倒数 (_InvWaveLength 越 大 ， 波 长 越 
小 ) ，_Speed 用 于 控制 河流 纹理 的 移动 速度 。 


(2) 在 本 例 中 ， 我 们 需要 为 透明 效果 设置 合适 的 SubShader 标 签 : 


SubShader { 
// Need to disable batching because of the vertex animation 


Tags {"Queue"="Transparent" "IgnoreProjector"="True" 
"RenderType"="Transparent" "DisableBatching"="True"} 


在 上 面 的 设置 中 ， 我 们 除了 为 透明 效果 设置 Queue、IgnoreProjector 

和 RenderType 外 ， 还 设置 了 一 个 新 的 标签 一 -DisableBatching。 我 们 在 
3.3.3 节 中 介绍 过 该 标签 的 含义 : 一 些 SubShader 在 使 用 Unity 的 批 处 理 功 
能 时 会 出 现 问题 ， 这 时 可 以 通过 该 标签 来 直接 指明 是 否 对 该 SubShader 

使 用 批 处 理 。 而 这 些 需 要 特殊 处 理 的 Shader 通 常 束 是 指 包 含 了 模型 空间 

的 顶点 动画 的 Shader。 这 是 因为 ， 批 处 理会 合并 所 有 相关 的 模型 ， 而 这 
些 模 型 各 自 的 模型 空间 就 会 丢失 。 而 在 本 例 中 ， 我 们 需要 在 物体 的 模 


型 空间 下 对 顶点 位 置 进行 偏 移 。 因 此 ， 在 这 里 需要 取消 对 该 Shader 的 批 
处 理 操 作 。 


(3) 接着 ， 我 们 设置 了 Pass 的 泻 染 状态 : 


{ 
Tags { "LightMode"="ForwardBase" } 


ZWrite Off 
Blend SrcAlpha OneMinusSrcAlpha 
Cull Off 


这 里 关闭 了 深度 写 入 ， 开 启 并 设置 了 混合 模式 ， 并 关闭 了 吻 除 功 
这 是 为 了 让 水 流 的 每 个 面部 能 显示 。 
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(4) 然后 ， 我 们 在 顶点 着 色 器 中 进行 了 相关 的 顶点 动画 : 


vert(a2v v) { 
v2f 0o; 


float4 offset ， 

offset.yzw = float3(0.0, 0.0, 0.0); 

offset.x = sin(_Frequency * _Time.y + Vv.vertex.x * 
_InvWwWaveLength + v.vertex.y * _InvWaveLength + v.vertex.z * 
_InvWaveLength) * _Magnitude; 

0.pos = mul(UNITY_MATRIX_MVP, v.vertex + offset); 


O.UV = TRANSFORM_TEX(Vv.texcoord, _MainTex); 
oO.UV += float2(0.0, _Time.y * _Speed); 


return o; 


我 们 首先 计算 顶点 位 移 量 。 我 们 只 项 望 对 顶点 的 x 方 同 进行 位 移 ， 
因此 yzw 的 位 移 量 被 设置 为 0° 然后 ， 我 们 利用 _Frequency 属 性 和 内 置 
的 _Time.y 变 量 来 控制 正 弱 函数 的 频率 。 为 了 让 不 同位 置 具有 不 同 的 位 
移 ， 我 们 对 上 述 结果 加 上 了 模型 空间 下 的 位 置 分 量 ， 并 乘 以 
_InvWaveLength 来 控制 波长 。 最 后 ， 我 们 对 结果 值 乘 以 Magnitude 属 性 


来 控制 波动 幅度 ， 得 到 最 终 的 位 移 。 剩 下 的 工作 ， 我 们 只 需要 把 位 移 
量 添加 到 顶点 位 置 上 ， 再 进行 正常 的 顶点 变换 即 可 。 


在 上 面 的 代码 中 ， 我 们 还 进行 了 纹理 动画 ， 即 使 用 _Time.y 和 
_Speed 来 控制 在 水 平方 向 上 的 纹理 动画 。 


(5) 万 元 着 色 需 的 代码 非常 简单 ， 我 们 只 需要 对 纹理 采样 再 添加 
颜色 控制 即 可 : 


fixed4 frag(v2f i) : SV_Target { 
fixed4 c = tex2D(_MainTex, i.uv); 
c.rgb *= _Color.rgb; 


return c; 


(6) 最 后 ， 我 们 把 Fallback 设 置 为 内 置 的 Transparent/VertexLit (也 
可 以 选择 关闭 Fallback) : 


Fallback "Transparent/VertexLit" 


保存 后 返回 场景 ， 把 Assets/Textures/Chapter11/Water.psd 拖 忠 到 材 
质 的 Main Tex 属 性 上 ， 并 调整 相关 参数 。 为 了 让 河流 更 加 美观 ， 我 们 可 
以 复制 多 个 材质 并 使 用 不 同 的 参数 ， 再 赋 给 不 同 的 Water 模型 ， 就 可 以 
得 到 类 似 图 11.4 中 的 效果 。 


11.3.2 广告 牌 


另 一 种 常见 的 顶点 动画 就 是 广告 牌 技术 (Billboarding) 。 广 告 
牌 技术 会 根据 视角 方向 来 旋转 一 个 被 纹理 着 色 的 多 边 形 (通常 就 是 简 
单 的 四 边 形 ， 这 个 多 边 形 就 是 广告 牌 ) ， 使 得 多 边 形 看 起 来 好 像 总 是 


面 对 着 摄像 机 。 广 告 牌 技术 被 用 于 很 多 应 用 ， 比 如 演 染 烟雾 、 云 打 、 
闪光 效果 等 。 


广告 牌 技术 的 本 质 就 是 构建 旋转 矩阵 ， 而 我 们 知道 一 个 变换 矩阵 
需要 3 个 基 向 量 。 广 告 牌 技术 使 用 的 基 疝 量 通 常 就 是 表面 法 线 
(normal) 、 指 向 上 的 方向 (up) 以 及 指向 右 的 方向 (right) 9 
除 此 之 外 ， 我 们 还 需要 指定 一 个 锚 点 。 (anchor location) ， 这 个 锚 点 
在 旋转 过 程 中 是 固定 不 变 的 ， 以 此 来 确定 多 边 形 在 空间 中 的 位 置 。 


广告 牌 技术 的 难点 在 于 ， 如 何 根据 需求 来 构建 3 个 相互 正 交 的 基 回 
量 。 计 算 过 程 通 闻 是 ， 我 们 首先 会 通过 初始 计算 得 到 目标 的 表面 法 线 
(例如 就 是 视角 方向 ) 和 指向 上 的 方向 ， 而 两 者 往往 是 不 牌 直 的 。 但 
征 ， 两 者 其 中 之 一 是 固定 的 ， 例 如 当 模 拟 草 从 时， 我们 希望 广告 牌 的 
指向 上 的 方向 永远 是 (0, 1, 0)， 而 法 线 方向 应 该 随 视角 变化 ;而 当 模 拟 
粒子 效果 时 ， 我 们 希望 广告 牌 的 法 线 方向 是 固定 的 ， 即 总 是 指向 视角 
方向 ， 指 癌 上 的 方 癌 则 可 以 发 生变 化 。 我 们 假设 法 线 方 癌 是 固定 的 ， 
首先 ， 我 们 根据 初始 的 表面 法 线 和 指 同 上 的 方 癌 来 计算 出 目标 方 同 的 
指向 右 的 方向 〈 通 过 又 积 操作 ) : 


right=upxnormal 


对 其 归 一 化 后 ， 再 由 法 线 方 向 和 指向 右 的 方向 计算 出 正 交 的 指向 
上 上 的 方 同 即 可 : 


up'=normalxright 


至 此 ， 我 们 束 可 以 得 到 用 于 旋转 的 3 个 正 交 基 了。 图 11.5 给 出 了 上 
述 计算 过 程 的 图 示 。 如 果 指 同上 的 方 同 是 固定 的 ， 计 算 过 程 也 是 类 似 


的 。 


up up 
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normal normal norma 


right right 


图 11.5 ”法 线 固定 (总 是 指向 视角 方向 ) 时 ， 计 算 广 告 牌 技 术 中 的 3 个 正 交 基 的 过 程 


> 


下 面 ， 我 们 将 在 Unity 中 实现 上 面 提 人 到 的 广告 牌 技术 。 在 学 习 完 本 
节 后 ,我们 可 以 得 到 类 似 图 11.6 中 的 戏 末 。 


Vertical Restraints = 1 Vertical Restraints = 0 


和 图 11.6 广告 牌 效 果 。 左 图 显示 了 摄像 机 和 5 个 广告 牌 之 间 的 位 置 关 系 ， 摄 像 机 是 从 斜 上 方 
向 下 观察 它们 的 。 中 间 的 图 显示 了 当 Vertical Restraints 属 性 为 1， 即 固定 法 线 方向 为 观察 视角 
时 所 得 到 的 效果 ， 可 以 看 出 ， 所 有 的 广告 牌 都 完全 面 朝 摄像 机 。 右 图 显示 了 当 Vertical 
Restraints 属 性 为 0， 即 固定 指向 上 的 方向 为 (0, 1, 0) 时 所 得 到 的 效果 ， 可 以 看 出 ， 广 告 牌 虽 然 最 
大 限度 地 面 朝 摄像 机 ， 但 其 指向 上 的 方向 并 未 发 生 改 变 


为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene_11 3 2。 
在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 
使 用 了 内 置 的 天 空 盒子 。 在 Window ~” Lighting ~ Skybox 中 去 掉 场 景 
中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资 源 中 ， 该 材质 名 为 BillboardMat 。 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapterl1-Billboard。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 创建 多 个 四 边 形 (Quad) ， 调 整 它们 的 位 置 和 大 
小 ， 然 后 把 第 2 步 中 的 材质 拖 外 给 它们 。 这 些 四 边 形 就 是 用 于 广告 牌 技 
术 的 广告 牌 。 


打开 新 建 的 Chapter11-Billboard， 删 除 原 有 的 代码 ， 添 加 如 下 关键 
代码 。 


(1) 我 们 首先 声明 了 几 个 新 的 变量 : 


Properties { 
_MainTex ("Main Tex", 2D) = "white" {} 
_Color ("Color Tint", Color) = (1, 1, 1, 1) 


_VerticalBillboarding ("Vertical Restraints", Range(0, 1)) = 1 


} 


其 中 ，_MainTex 是 广告 牌 显示 的 透明 纹理 ，_Color 用 于 控制 显示 整 
体 颜 色 ，_VerticalBillboarding 则 用 于 调整 是 固定 法 线 还 是 固定 指 癌 上 的 
方向 ， 即 约束 垂直 方向 的 程度 。 


(2) 在 本 例 中 ， 我 们 需要 为 透明 效果 设置 合适 的 SubShader 标 签 : 


SubShader { 
// Need to disable batching because of the vertex animation 


Tags {"Queue"="Transparent" "IgnoreProjector"="True" 
"RenderType"="Transparent" "DisableBatching"="True"} 


在 上 面 的 设置 中 ， 我 们 除了 为 透明 效果 设置 Queue、IgnoreProjector 
和 RenderType 外 ， 还 设置 了 一 个 新 的 标签 一 -DisableBatching。 我 们 在 
3.3.3 太 中 介绍 过 该 标签 的 含义 :一些 SubShader 在 使 用 Unity 的 批 处 理 功 
能 时 会 出 现 问题 ， 这 时 可 以 通过 该 标签 来 直接 指明 是 否 对 该 SubShader 
使 用 批 处 理 。 而 这 些 需 要 特殊 处 理 的 Shader 通 常 就 是 指 包 含 了 模型 空间 
的 顶点 动画 的 Shader。 这 是 因为 ， 批 处 理会 合并 所 有 相关 的 模型 ， 而 这 
些 模 型 各 自 的 模型 空间 就 会 被 丢失 。 而 在 广告 牌 技 术 中 ， 我 们 需要 使 
用 物体 的 模型 空间 下 的 位 置 来 作为 销 点 进行 计算 。 因 此 。 在 这 里 需要 
取消 对 该 Shader 的 批 处 理 操 作 。 


(3) 接着 ， 我 们 设置 了 Pass 的 渲染 状态 : 


Pass { 
Tags { "LightMode"="ForwardBase" } 


ZWrite Off 
Blend SrcAlpha OneMinusSrcAlpha 
Cull Off 


里 关闭 了 深度 写 入 ， 开 局 并 设置 了 混合 模式 ， 并 关闭 了 剔除 功 
为 了 让 广告 牌 的 每 个 面 都 能 显示 。 


这 
能 。 这 有 是 
(4) 顶点 着 色 器 是 我 们 的 核心 ， 所 有 的 计算 都 是 在 模型 空间 下 进 
行 的 。 我 们 首先 选择 模型 空间 的 原点 作为 广告 牌 的 锁 点 ， 并 利用 内 置 
变量 获取 模型 空间 下 的 视角 位 置 : 


// Suppose the center in object space is fixed 
float3 center = float3(0, 0, 0); 


float3 viewer = mul(_World20bject,float4(_WorldSpaceCameraPos, 1)); 


然后 ， 我 们 开始 计算 3 个 正 交 矢量 。 首 先 ， 我 们 根据 观察 位 置 和 鳃 
点 计算 目标 法 线 方 喇 ， 并 根据 _VerticalBillboarding 属 性 来 控制 王 直 方 癌 
上 的 约束 度 。 


float3 normalDir = viewer - center; 

// If _VerticalBillboarding equals 1, we use the desired view dir 
as the normal dir 

// Which means the normal dir is fixed 


// Or if _VerticalBillboarding equals 0, the y of normal is 0 
// Which means the up dir is fixed 

normalDir.y =normalDir.y * _VerticalBillboarding; 

normalDir = normalize(normalDir); 


当 _VerticalBillboarding 为 1 时 ， 意 味 着 法 线 方向 固定 为 视角 方 问 ; 
当 _VerticalBillboarding 为 0 时 ， 意 味 着 同上 方 回 固定 为 (0, 1, 0)。 最 后 ， 
我 们 需要 对 计算 得 到 的 法 线 方 向 进行 归 一 化 操作 来 得 到 单位 矢量 。 


接 看 ， 我 们 得 到 了 狂 略 的 网 上 方 同 。 为 了 防止 法 线 方向 和 同上 方 
向 平行 《如果 平行 ， 那 么 又 积 得 到 的 结果 将 是 错误 的 ) ， 我 们 对 法 线 
方 问 的 y 分 量 进 行 判 断 ， 以 得 到 合适 的 网 上 方 同 。 然 后 ， 根 据 法 线 方 问 
和 粗略 的 同上 方 同 得 到 辣 右 方向 ， 并 对 绪 采 进行 归 一 化 。 但 由 于 此 时 
回 上 的 方 癌 还 是 不 准确 的 ， 我 们 又 根据 准确 的 法 线 方向 和 辐 右 方 问 得 
到 最 后 的 同上 方 同 ; 


// Get the approximate up dir 

// If normal dir is already towards up, then the up dir is towards 
front 

float3 upDir = abs(normalDir.y) > 0.999 ? float3(0，0，1) : 


float3(0, 1, 0); 
float3 rightDir = normalize(cross(upDir, normalDir)); 
upDir = normalize(cross(normalDir, rightDir)); 


这 样 ， 我 们 得 到 了 所 需 的 3 个 正 交 基 天 量 。 我 们 根据 原始 的 位 置 相 
对 于 销 点 的 偶 移 量 以 及 3 个 正 交 基 天 量 ， 以 计算 得 到 新 的 顶点 位 置 : 


float3 centerOoffs = V.Vertex.XyZ - center; 
float3 localPos = center + rightDir * centerOoffs.x + upDir * 


centeroffs.y + normalDir * centeroffs.2z; 


最 后 ， 把 模型 空间 的 顶 扣 位 置 变换 到 裁剪 空间 中 : 


oO.pos = mul(UNITY_ MATRIX_MVP, float4(localPos, 1)); 


(5) 片 元 着 色 器 的 代码 非常 简单 ， 我 们 只 需要 对 纹理 进行 采样 ， 
再 与 颜色 值 相 乘 即 可 : 
fixed4 frag (v2f i) : SV_Target { 
fixed4 c = tex2D (_MainTex, i.uv); 
c.rgb *= _Color.rgb; 


return c; 


} 


(6) 最 后 ， 我 们 把 Fallback 设 置 为 内 置 的 Transparent/VertexLit (也 
可 以 选择 关闭 Fallback) : 


Fallback "Transparent/VertexLit" 


需要 说 明 的 是 ， 在 上 面 的 例子 中 ， 我 们 使 用 的 是 Unity 目 市 的 四 边 
形 (Quad) 来 作为 广告 牌 ， 而 不 能 使 用 自 带 的 平面 (Plane) 。 这 是 因 
为 ， 我 们 的 代码 是 建立 在 一 个 竖 直 摆 放 的 多 边 形 的 基础 上 的 ， 也 惑 是 
说 ， 这 个 多 边 形 的 顶点 结构 需要 满足 在 模型 空间 下 十 坚 直 排列 的 。 只 
有 这 样 ， 我 们 才能 使 用 v.vertex 来 计算 得 到 正确 的 相对 于 中 心 的 位 置 偏 


三 = 


移 量 。 


傈 存 后 返回 场景 ， 把 本 书 资源 中 的 
Assets/Textures/Chapter11/starpng 拖 暇 到 材质 的 Main Tex 中 ， 即 可 得 到 
类 似 图 11.6 中 的 效果 。 


11.3.3 ”注意 事项 


顶点 动画 虽然 非常 灵活 有 效 ， 但 有 一 些 注意 事项 需要 在 此 提醒 读 
者 。 


自 先 ， 如 11.3.2 广 看 到 的 那样 ， 如 果 我 们 在 模型 空间 下 进行 了 一 些 
顶点 动画 ， 那 么 批 处 理 往往 就 会 破坏 这 种 动画 效果 。 这 时 ， 我 们 可 以 
通过 SubShader 的 DisableBatching 标 签 来 强制 取消 对 该 Unity Shader 的 批 
处 理 。 然 而 ， 取 消 批 处 理会 市 来 一 定 的 性 能 下 降 ， 增 加 了 Draw Call， 
因此 我 们 应 该 尽量 避免 使 用 模型 空间 下 的 一 些 绝对 位 置 和 方 回 来 进行 
计算 。 在 广告 牌 的 例子 中 ， 为 了 避免 显 式 使 用 模型 空间 的 中 心 来 作为 
锁 点 ， 我 们 可 以 利用 顶点 颜色 来 存储 每 个 顶点 到 销 点 的 距离 值 ， 这 种 
做 法 在 商业 游戏 中 很 常见 。 


其 次 ， 如 采 我 们 想 要 对 包 售 了 顶点 动画 的 物体 添加 阴影 ， 那 么 如 
果 仍 然 像 9.4 节 中 那样 使 用 内 置 的 Diffuse 等 包含 的 阴影 Pass 来 泻 染 ， 就 
得 不 到 正确 的 阴影 效果 (这 里 指 的 是 无 法 向 其 他 物体 正确 地 投射 阴 
影 ) 。 这 是 因为 ， 我 们 讲 过 Unity 的 阴影 绘制 需要 调用 一 个 
ShadowCaster Pass， 而 如 果 直 接 使 用 这 些 内 置 的 ShadowCaster Pass， 这 
个 Pass 中 并 没有 进行 相关 的 顶点 动画 ， 因 此 Unity 会 仍然 按照 原来 的 顶 
点 位 置 来 计算 阴影 ， 这 并 不 是 我 们 希望 看 到 的 。 这 时 ， 我 们 就 需要 提 
供 一 个 目 定 义 的 ShadowCaster Pass， 在 这 个 Pass 中 ， 我 们 将 进行 同样 的 
顶点 变换 过 程 。 和 需要 注意 的 是 ， 在 前 面 的 实现 中 ， 如 果 涉 及 半 透 明 物 


体 我 们 都 把 Fallback 设 置 成 了 TransparentVertexLit， 而 
Transparent/VertexLit 没 有 定义 ShadowCaster Pass， 因 此 也 就 不 会 产生 阴 
影 ( 详 见 9.4.5 节 ) 。 


在 本 书 资源 的 Scene_11_3_3 场 景 中 ， 我 们 给 出 了 计算 顶点 动 画 的 阴 
影 的 一 个 例子 。 在 这 个 例子 中 ， 我 们 使 用 了 11.3.1 节 中 的 大 部 分 代码 ， 
模拟 一 个 波动 的 水 流 。 同 时 ， 我 们 开局 了 场景 中 平行 光 的 阴影 效果 ， 
并 添加 了 一 个 平面 来 接收 来 自 “ 水 流 * 的 阴影 。 我 们 还 把 这 个 Unity 
Shader 的 Fallback 设 置 为 了 内 置 的 VertexLit， 这 样 Unity 将 根据 Fallback 
最 终 找 到 VertexLit 中 的 ShadowCaster Pass 来 渲染 阴影 。 图 11.7 给 出 了 这 
样 的 结 


A 图 11.7 当 进 行 顶 点 动画 时 ， 如 果 仍 然 使 用 内 置 的 ShadowCaster Pass 来 渲染 阴影 ， 可 能 会 得 


到 错误 的 阴影 效果 


可 以 看 出 ， 此 时 虽然 water 模 型 发 生 了 形变 ， 但 它 的 阴影 并 没有 产 
生 相 应 的 动画 效果 。 为 了 正确 绘制 变形 对 象 的 阴影 ， 我 们 就 需要 提供 
目 定义 的 ShadowCaster Pass。 读 者 可 以 在 本 书 资源 的 Chapter11- 


VertexAnimationWithShadow 中 找到 对 应 的 Unity Shader。 使 用 该 Shader 
得 到 的 阴影 效果 如 图 11.8 所 示 。 


A 图 11.8 使 用 自 定 义 的 ShadowCaster Pass 为 变形 物体 绘制 正确 的 阴影 


在 这 个 Shader 中 ， 我 们 提供 了 一 个 ShadowCaster Pass， 相 关 代 码 如 
下 : 


// Pass to render object as a shadow caster 


Pass { 
Tags { "LightMode" = "ShadowCaster" } 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


#pragma multi_compile_shadowcaster 
#include "UnityCG.cginc" 

float _Magnitude; 

float _Frequency; 

float _InvwaveLength; 

float _Speed; 


struct a2v { 
float4 vertex : POSITION; 


float4 texcoord : TEXCOORDO; 
}; 


struct v2f { 
V2F_SHADOW_CASTER ， 
}; 
v2f vert(a2v v) { 
v2f 0o; 
float4 offset; 
offset.yzw = float3(0.0, 0.0, 0.0); 
offset.x = sin(_Frequency * _Time.y + Vv.vertex.x * 
_InVvWaveLength + v.vertex.y 
* _InvWaveLength + v.vertex.z * _InvWaveLength) * 
_Magnitude; 
V.vertex = v.vertex + offset; 
TRANSFER_SHADOW_CASTER_NORMALOFFSET(o ) 
return o; 
fixed4 frag(v2f i) : SV_Target { 
SHADOW_CASTER_FRAGMENT(i) 


} 
ENDCG 


阴影 投射 的 重点 在 于 我 们 需要 按 正常 Pass 的 处 理 来 剔除 片 元 或 进行 
顶点 动画 ， 以 便 阴 影 可 以 和 物体 正常 渲染 的 结果 相 匹 配 。 在 自 定义 的 
明 影 投射 的 Pass 中 ， 我 们 通常 会 使 用 Unity 提 供 的 内 置 宏 
V2F_SHADOW_CASTER 、 
TRANSFER_SHADOW_CASTER_NORMALOFFSET (旧版 本 中 会 使 用 
TRANSFER_SHADOW_CASTER) 和 
SHADOW_CASTER_FRAGMENT 来 计算 阴影 投射 时 需要 的 各 种 变量 ， 


而 我 们 可 以 只 关注 自 定 义 计算 的 部 分 。 在 上 面 的 代码 中 ， 我 们 首先 在 
v2f 结 构 体 中 利用 V2F_SHADOW_CASTER 来 定义 阴影 投射 需要 定义 的 


变量 。 随 后 ， 在 顶点 着 色 器 中 ， 我 们 首先 按 之 前 对 顶点 的 处 理 方法 计 
算 顶 点 的 偏 移 量 ， 不 同 的 是 ， 我 们 直接 把 偏 移 值 加 到 顶点 位 置 变量 
中 ， 再 使 用 TRANSFER_SHADOW_CASTER_NORMALOFFSET 来 让 
Unity 为 我 们 完成 剩 下 的 事情 。 在 上 请 元 着 色 器 中 ， 我 们 直接 使 用 
SHADOW_CASTER_FRAGMENT 来 让 Unity 自 动 完 成 阴影 投射 的 部 
分 ， 把 结果 输出 到 深度 图 和 阴影 映射 纹理 中 。 


通过 Unity 提 供 的 这 3 个 内 置 宏 (在 UnityCG.cginc 文 件 中 被 定义 ) ， 
我 们 可 以 方便 地 自 定 义 需 要 的 阴影 投射 的 Pass， 但 由 于 这 些 宏 里 需要 使 
用 一 些 特定 的 输入 变量 ， 因 此 我 们 需要 保证 为 它们 提供 了 这 些 变量 。 
例如 ，TRANSFER_SHADOW_CASTER_NORMALOFFSET 会 使 用 名 称 
v 作 为 输入 结构 体 ，v 中 需要 包含 顶点 位 置 v.vertex 和 顶点 法 线 v.normal 的 
言 轧 ， 我 们 可 以 直接 使 用 内 置 的 appdata_base 结 构 体 ， 它 包含 了 这 些 必 
需 的 顶点 变量 。 如 有 果 我 们 需要 进行 顶点 动画 ， 可 以 在 顶点 着 色 器 中 和 直 
接 修 改 vvertex， 再 传递 给 
TRANSFER_SHADOW_CASTER_NORMALOEFFSET 即 可 。 在 15.17 
中 ， 我 们 还 会 看 到 如 何在 阴影 投射 的 Pass 中 吻 除 片 元 ， 以 实现 自 定义 的 
透明 度 测 试 效果 。 


第 4 篇 ”高 级 篇 


高 级 骗 泗 盖 了 一 些 Shader 的 高 级 有 用法， 例如， 如何 实现 屏幕 特 
效 、 利 用 法 线 和 深度 绥 促 ， 以 及 非 真实 感 泻 染 等 ， 同 时 ， 我 们 还 会 介 
绍 一 些 针 对 移动 平台 的 优化 技巧 。 


第 12 章 屏幕 后 处 理 效 果 


这 一 章 将 介绍 如 何在 Unity 中 实现 一 个 基本 的 屏 医 后 处 理 脚本 系 
统 ， 并 给 出 一 些 基 本 的 屏 医 特效 的 实现 原理 ， 如 高 期 模糊、 边缘 检测 


第 13 革 使 用 深度 和 法 线 纹理 


本 章 将 介绍 如 何在 Unity 中 获取 这 些 特殊 的 纹理 来 实现 屏幕 特效 。 


这 一 草 将 会 给 出 肖 见 的 非 真实 感 渔 染 的 算法 ， 如 卡通 泻 染 、 素 搬 
风格 的 演 染 等 。 
第 15 章 使 用 噪声 


很 多 时 候 噪 声 是 我 们 实现 特效 的 “救星 ”。 本章 给 出 了 噪声 在 游戏 
党 染 中 的 一 些 应 用 。 


第 16 章 Unity 中 的 泻 染 优化 技术 


优化 往往 是 游戏 演 染 中 的 重点 。 这 一 和 章 介 绍 了 Unity 中 针对 移动 平 
台 般 见 的 优化 技巧 。 


第 12 章 ”屏幕 后 处 理 效 果 


屏幕 后 处 理 效 果 (screen post-processing effects) 是 游戏 中 实现 屏 
幕 特效 的 常见 方法 。 在 本 间 中 ， 我 们 将 学 习 如 何在 Unity 中 利用 泻 染 纹 
理 来 实现 各 种 常见 的 屏 人 幕后 处 理 效 有 果 。 在 12.1 节 中 ， 我 们 首先 会 解释 在 
Unity 中 实现 屏幕 后 处 理 效 果 的 原理 ， 并 建立 一 个 基本 的 屏幕 后 处 理 脚 
本 系统 。 随 后 在 12.2 方 中， 我 们 会 使 用 这 个 系统 实现 一 个 人 简单 的 调整 画 
面 亮度 、 饱 和 度 和 对 比 度 的 屏幕 特效 。 在 12.3 下 中 ， 我 们 会 接触 到 图 像 
滤波 的 概念 ， 并 利用 Sobel 算 子 在 屏幕 空间 中 对 图 像 进 行 边缘 检测 ， 实 
现 描 边 效 果 。 在 此 基础 上 ，12.4 市 将 会 介绍 如 何 实现 一 个 高 斯 模糊 的 屏 
幕 特效 。 在 12.5 和 12.6 市 中 ， 我 们 会 分 别 介绍 如 何 实现 Bloom 和 运动 模 
糊 效 果 。 


12.1 建立 一 个 基本 的 屏幕 后 处 理 脚 本 系统 


屏幕 后 处 理 ， 顾 名 思 义 ， 通 营 指 的 是 在 演 染 完整 个 场景 得 到 屏幕 
图 像 后 ， 再 对 这 个 图 像 进行 一 系列 操作 ， 实 现 各 种 屏幕 特效 。 使 用 这 
种 技术 ， 可 以 为 游戏 画面 添加 更 多 的 艺术 效果 ， 例 如 景深 (Depth of 
Field) 、 运 动 模糊 (Motion Blur) 等 。 


因此 ， 想 要 实现 屏幕 后 处 理 的 基础 在 于 得 到 泻 染 后 的 屏幕 几 像 ， 
即 抓 取 屏幕 ， 而 Unity 为 我 们 提供 了 这 样 一 个 方便 的 接口 一 一 
OnRenderImage 汞 数 。 它 的 函数 声明 如 下 : 


MonoBehaviour .OnRenderImage (RenderTexture src, RenderTexture dest ) 


当 我 们 在 脚本 中 声明 此 函数 后 ，Unity 会 把 当前 泻 染 得 到 的 图 像 存 
储 在 第 一 个 参数 对 应 的 源 渲染 纹理 中 ， 通 过 函数 中 的 一 系列 操作 后 ， 
再 把 目标 演 染 纹理 ， 即 第 二 个 参数 对 应 的 泻 染 纹理 显示 到 屏幕 上 。 在 
OnRenderImage 函 数 中 ， 我 们 通常 是 利用 Graphics.Blit 函 数 来 完成 对 泻 
染 纹理 的 处 理 。 它 有 3 种 函数 声明 : 


public static void Blit(Texture src, RenderTexture dest); 
public static void Blit(Texture src, RenderTexture dest, Material 


mat, int pass -1); 
public static void Blit(Texture src, Material mat, int pass = -1); 


其 中 ， 参 数 src 对 应 了 源 纹理 ， 在 屏幕 后 处 理 技 术 中 ， 这 个 参数 通 
常 就 是 当前 屏幕 的 泻 染 纹理 或 是 上 一 步 处 理 后 得 到 的 泻 染 纹理 。 参 数 
ee See 会 直接 将 结果 显示 在 
° 参数 mat 是 我 们 使 用 的 材质 ， 这 个 材质 使 用 的 Unity Shader 将 会 
2 处 理 操作 ， 人 被 传递 给 Shader 中 名 7 
的 纹理 属性 。 参 数 pass 的 默认 值 为 -1， 表 示 将 会 依次 调用 Shader 内 的 所 
有 Pass。 人 否则 ， 只 会 调用 给 定 索 引 的 Pass。 


在 默认 情况 下 ，OnRenderImage 函 数 会 在 所 有 的 不 透明 和 透明 的 
Pass 执 行 完毕 后 被 调用 ， 以 便 对 场景 中 所 有 游戏 对 象 都 产生 影响 。 但 有 
上 时， 我 们 希望 在 不 透明 的 Pass ( 即 泻 染 队 列 小 于 等 于 2500 的 Pass， 内 置 
的 Background、Geometry 和 AlphaTest 洽 染 队 列 均 在 此 范围 内 ) 执行 完 

毕 后 立即 调用 OnRenderImage 函 数 ， 从 而 不 对 透明 物体 产生 任何 影响 。 
此 时 ， 我 们 可 以 在 OnRenderImage 碎 数 前 添加 ImageEffectOpaque 属 性 来 
实现 这 样 的 目的 。13.4 广 展示 了 这 样 一 个 例子 ， 在 13.4 太 中， 我 们 会 利 
用 深度 和 法 线 纹理 进行 边缘 检测 从 而 实现 描 边 的 效果 ， 但 我 们 不 布 望 
透明 物体 也 被 描 边 


因此 ， 要 在 Unity 中 实现 屏幕 后 处 理 效 果 ， 过 程 通 常 如 下 : 我 们 首 
移 需 要 在 摄像 中 添加 一 个 用 于 屏幕 后 处 理 的 脚本 。 在 这 个 脚本 中 ， 我 
们 会 实现 OnRenderImage 函 数 来 获取 当前 屏幕 的 泻 染 纹理 。 然 后 ， 再 调 
用 Graphics.Blit 函 数 使 用 特定 的 Unity Shader 来 对 当前 图 像 进行 处 理 ， 再 
把 返回 的 泻 染 纹理 显示 到 屏幕 上 。 对 于 一 些 复杂 的 屏幕 特效 ， 我 们 可 
能 需要 多 次 调用 Graphics.Blit 范 数 来 对 上 一 步 的 输出 结果 进行 下 一 步 处 
惠 ” 


但 是 ， 在 进行 屏幕 后 处 理 之 前 ， 我 们 需要 检查 一 系列 条 件 是 否 满 
足 ， 例 如 当前 平台 是 否 文 持 演 染 纹 理 和 屏幕 特效 ， 是 否 支 持 当 前 使 用 
的 Unity Shader 等 。 为 此 ， 我 们 创建 了 一 个 用 于 屏幕 后 处 理 效 果 的 基 
类 ， 在 实现 各 种 屏幕 特效 时 ， 我 们 只 需要 继承 自 该 基 类 ， 再 实现 派生 
类 中 不 同 的 操作 即 可 。 读 者 可 在 本 书 资源 的 
Assets/Scripts/Chapter12/PostEffectsBase.cs 中 找到 该 脚本 。 


PostEffectsBase.cs 的 主要 代码 如 下 。 


(1) 首先 ， 所 有 屏幕 后 处 理 效 果 都 需要 绑 定 在 某 个 摄像 机 上 ， 并 
且 我 们 布 望 在 编辑 器 状态 下 也 可 以 执行 该 脚本 来 查看 效 来 : 
[ExecuteInEditMode] 


[RequireComponent (typeof(Camera) )] 
public class PostEffectsBase : MonoBehaviour { 


(2) 为 了 提前 检查 各 种 资源 和 条 件 是 否 满足 ， 我 们 在 Start 函 数 中 
调用 CheckResources 函 数 : 
// Called when start 


protected void CheckResources() { 
bool isSupported = CheckSupport(); 


if (isSupported == false) { 
NotSupported( ); 
} 


} 


// Called in CheckResources to check support on this platform 
protected bool CheckSupport() { 
if (SystemInfo.supportsImageEffects == false || 
SystemInfo.supportsRenderTextures == false) { 
Debug.Logwarning("This platform does not support image 
effects or render textures."); 
return false,; 
} 


return true; 


} 


// Called when the platform doesn't support this effect 
protected void NotSupported() { 

enabled = false; 
} 


protected void Start() { 
CheckResources(); 


} 


一 些 屏幕 特效 可 能 需要 更 多 的 设置 ， 例 如 设置 一 些 默认 值 等 ， 可 
以 重 载 Start、CheckResources 或 CheckSupport 函 数 。 


(3) 由 于 每 个 屏幕 后 处 理 效果 通常 都 需要 指定 一 个 Shader 来 创建 
一 个 用 于 处 理 渔 染 纹理 的 材质 ， 因 此 基 类 中 也 提供 了 这 样 的 方法 : 


// Called when need to create the material used by this effect 
protected Material CheckShaderAndCreateMaterial(Shader shader, 
Material material) { 

if (shader == null) { 


return null; 


} 


if (shader.isSupported && material && material.shader == 
shader) 
return material; 


if (!shader.isSupported) { 
return null; 
} 


else { 
material = new Material(shader ) ， 
material.hideFlags = HideFlags.DontSave; 
if (material) 
return material; 
else 


return null; 


CheckShaderAndCreateMaterial 函 数 接受 两 个 参数 ， 第 一 个 参数 指 
定 了 该 特效 需要 使 用 的 Shader， 第 二 个 参数 则 是 用 于 后 期 处 理 的 材质 。 
该 函数 首先 检查 Shader 的 可 用 性 ， 检 查 通 过 后 加 返回 一 个 使 用 了 该 
Shader 的 材质 ， 否 则 返回 null 。 


在 12.2 节 中 ， 我 们 就 会 看 到 如 何 继承 PostEffectsBase.cs 来 创建 一 个 
简单 的 用 于 调整 屏幕 的 亮度 、 饱 和 度 和 对 比 度 的 特效 脚本 。 


12.2 调整 屏幕 的 亮度 、 饱 和 度 和 对 比 度 


在 12.1 节 中 ， 我 们 了 解 了 实现 屏幕 后 处 理 特效 的 技术 原理 。 在 本 世 
中 ， 我 们 残 屏幕 的 
亮度 、 饱 和 度 和 对 比 度 。 在 本 节 结 束 后 ， 我 们 将 得 到 类 似 图 12.1 中 的 效 
i 


A 


A 图 12.1 左 图 : 原 效果 。 石 图 : 调整 ae on 2) 、 饱 和 度 〈 值 为 1.6) 和 对 比 度 ( 值 
1.2) 后 


1.2 


为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene_12 2。 在 
Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 使 
用 了 内 置 的 天 空 盒子 。 在 Window ~” Lighting ~ Skybox 中 去 掉 场 景 中 
的 天 空 盒子 。 


(2) 把 本 书 资源 中 的 Assets/Textures/Chapter12/Sakura0.jpg 拖 忠 到 
场景 中 ， 并 调整 其 的 位 置 使 它 可 以 填充 整个 场景 。 注 意 ，Sakura0.jpg 的 
纹理 类 型 已 被 设置 为 Sprite， 因 此 可 以 直接 拖 上 到 场景 中 。 


(3) 新 建 一 个 脚本 。 在 本 书 资源 中 ， 该 脚本 名 为 
BrightnessSaturationAndContrast.cs。 把 该 脚本 拖 电 到 摄像 机 上 。 


(4) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter12-BrightnessSaturationAndContrast ° 


我 们 首先 来 编写 BrightnessSaturationAndContrast.cs 脚 本 。 打 开 该 脚 
本 ， 并 进行 如 下 修改 。 


(1) 首先 ， 继 承 12.1 节 中 创建 的 基 类 : 


public class BrightnessSaturationAndContrast : PostEffectsBase { 


(2) 声明 该 效果 需要 的 Shader， 并 据 此 创建 相应 的 材质 : 


public Shader briSatConShader; 
private Material briSatConMaterial; 
public Material material { 

get { 


briSatConMaterial = 
CheckShaderAndCreateMaterial(briSatCconShader, briSatConMaterial); 
return briSsatConMaterial; 
} 


在 上 述 代码 中 ，briSatConShader 是 我 们 指定 的 Shader， 对 应 了 后 面 
将 会 实现 的 Chapter12- BrightnessSaturationAndContrast 。 
briSatConMaterial 是 创建 的 材质 ， 我 们 提供 了 名 为 material 的 材质 来 访问 
它 ，material 的 get 芳 数 调 用 了 基 类 的 CheckShaderAndCreateMaterial 芳 数 


来 得 到 对 应 的 材质 。 


(3) 我 们 还 在 脚本 中 提供 了 调整 亮度 、 饱 和 度 和 对 比 度 的 参数 : 


[Range(0.0f, 3.0f)] 
public float brightness 


[Range(0.0f, 3.0f)] 


public float saturation 


[Range(0.0f, 3.0f)] 
public float contrast = 


我 们 利用 Unity 提 供 的 Range 属 性 为 每 个 参数 提供 了 合适 的 变化 区 
间 。 


(4) 最 后 ， 我 们 定义 OnRenderImage 函 数 来 进行 真正 的 特效 处 
理 : 


void OnRenderImage(RenderTexture src, RenderTexture dest) { 
if (material != null) { 
material.SetFloat("_Brightness", brightness); 
material.SetFloat("_Saturation", saturation); 
material.SetFloat("_Contrast", contrast); 


Graphics.Blit(src, dest, material); 
} else { 

Graphics.Blit(src, dest); 
} 


} 


每 当 OnRenderImage 凡 数 被 调用 时 ， 它 会 检查 材质 是 否 可 用 。 如 采 
可 用 ， 就 把 参数 传递 给 材质 ， 再 调用 Graphics.Blit 进 行 处 理 ， 否 则 ， 直 
接 把 原 图 像 显 示 到 屏幕 上 ， 不 做 任何 处 理 。 


下 面 ， 我 们 来 实现 Shader 的 部 分 。 打 开 Chapter12- 
BrightnessSaturationAndContrast， 进 行 如 下 修改 。 


(1) 我 们 首先 需要 声明 本 例 使 用 的 各 个 属性 : 


Properties { 
_MainTex ("Base (RGB)", 2D) = "white" {} 
_Brightness ("Brightness", Float) = 1 


_Saturation("Saturation", Float) = 1 
_Contrast("Contrast", Float) = 1 


在 12.1 太 中， 我 们 提 到 Graphics.Blit(src, dest, material) 将 把 第 一 个 参 
数 传递 给 Shader 中 名 为 _MainTex 的 属性 。 因 此 ， 我 们 必须 声明 一 个 名 为 


_MainTex 的 纹理 属性 。 除 此 之 外 ， 我 们 还 声明 了 用 于 调整 亮度 、 饱 和 
度 和 对 比 度 的 属性 。 这 些 值 将 会 由 脚本 传递 而 得 。 事 实 上 ， 我 们 可 以 
省 略 Properties 中 的 属性 声明 ，Properties 中 声明 的 属性 仅仅 是 为 了 显示 
在 材质 面板 中 ， 但 对 于 屏幕 特效 来 说 ， 它 们 使 用 的 材质 都 是 临时 创建 
的 ， 我 们 也 不 需要 在 材质 面板 上 调整 参数 ， 而 是 直接 从 脚本 传递 给 
Unity Shader ° 


(2) 定义 用 于 屏幕 后 处 理 的 Pass: 


SubShader { 
Pass 
ZTest Always Cull Off Zwrite Off 


屏幕 后 处 理 实际 上 古 在 场景 中 绘制 了 一 个 与 屏幕 同 宽 同 高 的 四 边 
形 面 片 ， 为 了 防止 它 对 其 他 物体 产生 影响 ， 我 们 需要 设置 相关 的 演 染 
状态 。 在 这 里 ， 我 们 关闭 了 深度 写 入 ， 征 为 了 防止 它 "挡住 "在 其 后 面 
被 泻 染 的 物体 。 例 如 ， 如 果 当 前 的 OnRenderImage 芳 数 在 所 有 不 透明 的 
Pass 执 行 完 毕 后 立即 被 调用 ， 不 关闭 深度 写 入 就 会 影响 后 面 透 明 的 Pass 
的 泻 染 。 这 些 状态 设置 可 以 认为 是 用 于 屏幕 后 处 理 的 Shader 的 “ 标 配 ”。 


(3) 为 了 在 代码 中 访问 各 个 属性 ， 我 们 需要 在 CG 代 码 块 中 声明 
对 应 的 变量 : 


sampler2D _MainTex; 
half _Brightness; 


half _Saturation; 
half _Contrast; 


(4) 定义 顶点 着 色 器 。 屏 幕 特效 使 用 的 顶点 着 色 器 代码 通常 都 比 
较 简 单 ， 我 们 只 需要 进行 必需 的 顶点 变换 ， 更 重要 的 是 ， 我 们 需要 把 


正确 的 纹理 坐标 传递 给 斤 元 着 色 器 ， 以 便 对 屏幕 图 像 进行 正确 的 采 
样 : 
Struct v2f { 


float4 pos : SV_POSITION; 
half2 uv: TEXCOORDO; 


}; 


v2f vert(appdata img v) { 
v2f Oo; 


0.pos = mul(UNITY_MATRIX_MVP, v.vertex); 
VvV.texcoord; 


return o; 


在 上 面 的 顶点 着 色 絮 中 ， 我 们 使 用 了 Unity 内 置 的 appdata_img 结 构 
体 作 为 顶点 着 色 怖 的 输入 ， 读 者 可 以 在 UnityCG.cginc 中 找到 该 结构 体 
的 声明 ， 它 只 包含 了 图 像 处 理 时 必需 的 顶点 坐标 和 纹理 坐标 等 变量 。 


(5) 接着 ， 我 们 实现 了 用 于 调整 亮度 、 饱 和 度 和 对 比 度 的 片 元 着 
色 亏 : 


fixed4 frag(v2f i) : SV_Target { 
fixed4 renderTex = tex2D(_MainTex, i.uv); 


// Apply brightness 
fixed3 finalColor = renderTex.rgb * _Brightness,; 


// Apply saturation 

fixed luminance = 0.2125 * renderTex.r + 0.7154 * renderTex.g + 
0.0721 * renderTex.b; 

fixed3 luminanceColor = fixed3(Jluminance, luminance, 
luminance); 

finalCcolor = lerp(luminanceColor, finalColor, _Saturation); 


// Apply contrast 
fixed3 avgColor = fixed3(0.5, 0.5, 0.5); 
finalColor = lerp(avgColor, finalColor, _Contrast); 


return fixed4(finalColor, renderTex.a); 
} 


首先 ， 我 们 得 到 对 原 屏 幕 图 像 (存储 在 _MainTex 中 ) 的 采样 结果 
renderTex。 然 后， 利用 _Brightness 属 性 来 调整 亮度 。 亮 度 的 调整 非常 和 价 
单 ， 我 们 只 需要 把 原 颜 色 乘 以 亮度 系数 _Brightness 即 可 。 然 后， 我们 计 
算 该 像素 对 应 的 亮度 值 (luminance) ， 这 是 通过 对 每 个 颜色 分 量 乘 以 
一 个 特定 的 系数 再 相 加 得 到 的 。 我 们 使 用 该 亮度 值 创建 了 一 个 饱和 度 
为 0 的 颜色 值 ， 并 使 用 _Saturation 属 性 在 其 和 上 一 步 得 到 的 闫 色 之 间 进 
行 插值 ， 从 而 得 到 希望 的 饱和 度 颜色 。 对 比 度 的 处 理 类 似 ， 我 们 首先 
创建 一 个 对 比 度 为 0 的 颜色 值 (各 分 量 均 为 0.5) ， 表 使 用 _Contrast 属 性 
在 其 和 上 一 步 得 到 的 颜色 之 间 进 行 插值 ， 从 而 得 到 最 终 的 处 理 结 


(6) 最 后 ， 我 们 关闭 该 Unity Shader 的 Fallback: 


Fallback Off 


完成 后 返回 编辑 器 ， 并 把 Chapter12- 
BrightnessSaturationAndContrast 拖 虑 到 摄像 机 的 Brightness 
SaturationAndContrast.cs 脚 本 中 的 briSatConShader 参 数 中 。 调 整 各 个 参 
数 后 ， 我 们 吏 可 以 得 到 类 似 图 12.1 中 的 效果 。 


在 上 面 的 实现 中 ， 我 们 需要 手动 把 Shader 拖 暇 到 脚本 的 参数 上 “。 为 
了 在 以 后 的 使 用 中 ， 当 把 脚本 拖 鼻 到 摄像 机 上 时 直接 使 用 对 应 的 
Shader， 我 们 可 以 在 脚本 的 面板 中 设置 Shader 参 数 的 默认 值 ， 如 图 12.2 
所 示 。 


A 图 12.2 为 脚本 设置 Shader 的 默认 值 


12.3 边缘 检测 


在 12.2 节 中 ， 我 们 已 经 学 习 了 如 何 实现 一 个 简单 的 屏幕 后 处 理 效 
果 。 在 本 万 中 ， 我 们 会 学 习 一 个 彰 见 的 屏幕 后 处 理 效 果 一 边缘 检 
测 。 边 绿 检测 是 措 边 效 末 的 一 种 实现 方法 ， 在 本 区 结束 后 ， 我 们 可 以 
得 到 类 似 图 12.3 中 的 效果 。 


全 图 12.3 左 图 : 12.2 节 得 到 的 结果 ， 右 图 : 进行 边缘 检测 后 的 效果 


边缘 检测 的 原理 是 利用 一 些 边缘 检测 算 子 对 图 像 进行 卷 积 
(convolution) 操作 ， 我 们 首先 来 了 解 什么 是 卷 积 。 


12.3.1 什么 是 卷 积 


在 图 像 处 理 中 ， 卷 积 操作 指 的 就 是 使 用 一 个 卷 积 核 (kernel) 对 一 
张 岁 像 中 的 每 个 像 系 进行 一 系列 操作 。 卷 积 核 通 肖 是 一 个 四 方形 网 格 
结构 (例如 2x2、3x3 的 方形 区 域 ，， 该 区 域内 每 个 方 格 都 有 一 个 权重 


值 。 当 对 图 像 中 的 某 个 像素 进行 着 积 时 ， 我 们 会 把 卷 积 核 的 中 心 放置 
于 该 像素 上 ， 如 图 12.4 所 示 ， 翻 较 核 之 后 再 依次 计算 核 中 每 个 元 系 和 其 
履 次 的 图 像 像素 值 的 乘积 并 求 和 ， 得 到 的 结果 就 是 该 位 置 的 新 像素 


值 。 


个 3x3 的 卷 积 核 


一 个 5x5 的 图 像 进行 卷 积 计算 


A 图 12.4 ” 卷 积 核 与 卷 积 。 使 用 一 个 3x3 大 小 的 卷 积 核对 一 张 5x5 大 小 的 图 像 进行 卷 积 操 作 ， 当 
计算 图 中 红色 方块 对 应 的 像素 的 卷 积 结果 时 ， 我 们 首先 把 卷 积 核 的 中 心 放 置 在 该 像素 位 置 ， 翻 
转 核 之 后 再 依次 计算 核 中 每 个 元 素 和 其 覆盖 的 图 像 像 素 值 的 乘积 并 求 和 ， 得 到 新 的 像素 值 


这 样 的 计算 过 程 虽 然 滑 单 ， 但 可 以 实现 很 多 单 见 的 图 像 处 理 效 
革 ， 例 如 岁 像 模糊 、 边 缘 检 测 等 。 例 如 ， 如 采 我 们 想 要 对 图 像 进 行 均 
值 模糊 ， 可 以 使 用 一 个 3x3 的 卷 积 核 ， 核 内 每 个 元 素 的 值 均 为 /9。 


12.3.2 ”常见 的 边缘 检测 算 子 


卷 积 操作 的 神奇 之 处 在 于 选择 的 郑 积 核 。 那么 ， 用 于 边 经 检测 的 
卷 积 核 (也 被 称 为 边缘 检测 算 子 ) 应 该 长 什么 样 呢 ?在 回答 这 个 问题 
前 ， 我 们 可 以 首先 回想 一 下 边 到 瓜 是 如 何 形成 的 。 如 琳 相 邻 像素 之 间 
存在 差别 明显 的 颜色 、 亮 度 、 纹 理 等 属性 ， 我 们 就 会 认为 它们 之 间 应 
该 有 一 条 边界 。 这 种 相 邻 像素 之 间 的 差 值 可 以 用 梯度 (gradient) 来 表 
示 ， 可 以 想象 得 到 ， 边 缘 处 的 梯度 绝对 值 会 比较 大 。 基 于 这 样 的 理 
解 ， 有 几 种 不 同 的 边 比 检 测算 子 被 先后 提出 来 。 


Roberts Prewitt Sobel 


1 Lo 
Gx 


Gy 


图 12.5 ”3 种 常见 的 边缘 检测 算 子 


3 种 常见 的 边缘 检测 算 子 如 图 12.5 所 示 ， 它 们 都 包含 了 两 个 方向 的 
卷 积 核 ， 分 别 用 于 检测 水 平方 向 和 坚 直 方向 上 的 边缘 信 息 。 在 进行 边 
经 检测 时 ， 我 们 需要 对 每 个 像素 分 别 进行 一 次 卷 积 计算 ， 得 到 两 个 方 
问 上 的 樟 度 值 G. 和 Gy， 而 整体 的 梯度 可 按 下 面 的 公式 计算 而 得 : 


| 
| C2 "2 
/Gz 十 Gs 


G=, 


由 于 上 述 计算 包含 了 开 根 号 操作 ， 出 于 性 能 的 考虑 ， 我 们 有 时 会 
使 用 绝对 值 操 作 来 代 奉 开 根 号 操作 : 


G=|Gz|+|Gy| 


当 得 到 梯度 G 后 ， 我 们 就 可 以 据 此 来 判断 哪些 像素 对 应 了 边缘 ( 梯 
度 值 越 大 ， 越 有 可 能 是 边缘 点 ) 。 
12.3.3 ”实现 


本 将 会 使 用 Sobel 算 子 进行 边 绿 检测 ， 实 现 摘 边 效 末 。 为 此 ， 我 
们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene_ 12 3 。 在 
Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 使 
用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 中 去 掉 场 景 中 的 
天 空 盒子 。 


(2) 把 本 书 资源 中 的 Assets/Textures/Chapter12/Sakura0.jpg 拖 忠 到 
场景 中 ， 并 调整 它 的 位 置 使 其 可 以 填充 整个 场景 。 注 意 ，Sakura0.jpg 的 
纹理 类 型 已 被 设置 为 Sprite， 因 此 可 以 直接 拖 电 到 场景 中 。 


(3) 新 建 一 个 脚本 。 在 本 书 资源 中 ， 该 脚本 名 为 
EdgeDetection.cs。 把 该 脚本 拖 电 到 摄像 机 上 。 


(4) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter12-EdgeDetection ° 


我 们 首先 来 编写 EdgeDetection.cs 脚 本。 打开 该 脚本 ， 并 进行 如 下 
修改 。 


(1) 首先 ， 继 承 12.1 节 中 创建 的 基 类 : 


(2) 声明 该 效果 需要 的 Shader， 并 据 此 创建 相应 的 材质 : 


public Shader edgeDetectShader; 
private Material edgeDetectMaterial = null; 
public Material material { 
get { 
edgeDetectMaterial = 


CheckShaderAndCreateMaterial(edgeDetectShader, edgeDetectMaterial); 
return edgeDetectMaterial; 


在 上 述 代码 中 ，edgeDetectShader 是 我 们 指定 的 Shader， 对 应 了 后 
面 将 会 实现 的 Chapter12-EdgeDetection 。 


(3) 在 脚本 中 提供 用 于 调整 边缘 线 强度 、 描 边 颜色 以 及 背景 颜色 


[Range(0.0f，1.0f)] 
public float edgesOonly 0 .Of; 


public Color edgeColor = Color.black; 


public Color backgroundColor = Color.white; 


当 edgesOnly 值 为 0 时 ， 边 经 将 会 咎 加 在 原 泻 染 图 像 上 ; 当 
edgesOnly 值 为 1 时 ， 则 会 只 显示 边缘 ， 不 显示 原 演 染 图 像 。 其 中 ， 背 景 
颜色 由 backgroundColor 指 定 ， 边 绿 颜色 由 edgeColor 指 定 。 


(4) 最 后 ， 我 们 定义 OnRenderImage 函 数 来 进行 真正 的 特效 处 
理 : 


void OnRenderImage (RenderTexture src, RenderTexture dest) { 
if (material != null) { 
material.SetFloat("_EdgeOnly", edgesOonly); 
material.SetColor("_EdgeColor", edgeColor); 
material.SetColor("_BackgroundColor", backgroundColor ); 


Graphics.Blit(src, dest, material); 
} else { 


Graphics.Blit(src, dest); 
} 


每 当 OnRenderImage 芳 数 补 调用 时 ， 它 会 检查 材质 是 否 可 用 。 如 来 
可 用 ， 束 把 参数 传递 给 材质 ， 再 调用 Graphics.Blit 进 行 处 理 ， 否 则 ， 直 
接 把 原 图 像 显 示 到 屏幕 上 ， 不 做 任何 处 理 。 


下 面 ， 我 们 来 实现 Shader 的 部 分 。 打 开 Chapter12-EdgeDetection ， 
进行 如 下 修改 。 


(1) 我 们 首先 需要 声明 本 例 使 用 的 各 个 属性 : 


Properties 
_MainTex ("Base (RGB)", 2D) = "white" {} 
_Edgeonly ("Edge Only", Float) = 1.0 
_EdgeColor ("Edge Color", Color) = (0, 0, 0, 1 


) 
_BackgroundColor ("Background Color", Color) = (1, 1, 1, 1) 


_MainTex 对 应 了 输入 的 演 染 纹理 。 


(2) 定义 用 于 屏幕 后 处 理 的 Pass， 设 置 相 关 的 泻 染 状态 : 


SubShader { 
Pass { 
ZTest Always Cull Off Zwrite Off 


(3) 为 了 在 代码 中 访问 各 个 属性 ， 我 们 需要 在 CG 代 码 块 中 声明 
对 应 的 变量 : 


sampler2D _MainTex; 
half4 MainTex_TexelSize; 
fixed _EdgeOnly; 


fixed4 _EdgeColor; 
fixed4 _BackgroundColor; 


在 上 面 的 代码 中 ， 我 们 还 声明 了 一 个 新 的 变量 
_MainTex_TexelSize 。xxx_TexelSize 是 Unity 为 我 们 提供 的 访问 xxx 纹 理 
对 应 的 每 个 纹 素 的 大 小 。 例 如 ， 一 张 512x512 大 小 的 纹理 ， 该 值 大 约 为 
0.001953 ( 即 1/512) 。 由 于 卷 积 需要 对 相 邻 区 域内 的 纹理 进行 采样 ， 
此 我 们 需要 利用 _MainTex_TexelSize 来 计算 各 个 相 邻 区 域 的 纹理 坐 
标 。 


(4) 在 顶点 着 色 器 的 代码 中 ， 我 们 计算 了 边 
坐标 : 


力 缘 检 测 时 需要 的 纹理 


struct v2f { 
float4 pos : 
half2 uv[9] 


SV_POSITION, 
: TEXCOORDO, 


}; 


v2f vert(appdata img v) { 
v2f Oo; 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


half2 uv = V 


.UvV[0] 
.UV[1] 
.UV[2] 
.UvV[3] 
,UV[4] 
,UV[5] 
,UV[6] 
.UV[7] 
,UV[8] 


Oooooooeooo 


return o; 


UV 
UV 
UV 
UV 
UV 
UV 
UV 
UV 
UV 


十 十 十 十 十 十 十 十 + 


.texcoord; 


_MainTex_TexelSize. 
_MainTex_TexelSize. 
_MainTex_TexelSize. 
_MainTex_TexelSize. 
_MainTex_TexelSize. 
_MainTex_TexelSize. 
_MainTex_TexelSize. 
_MainTex_TexelSize. 
_MainTex_TexelSize. 


half2(-1, 
half2(©0, -1); 
half2(1, -1); 
half2(-1, 0); 
half2(©0, 0); 
half2(1, 0); 
half2(-1, 1); 
half2(0, 1); 
half2(1, 1); 


-1); 


我 们 在 v2f 结 构 体 中 定义 了 一 个 维 数 为 9 的 纹理 数组 ， 对 应 了 使 用 


Sobel 算 子 采样 时 需要 的 9 个 邻 域 纹理 坐标 。 通 过 把 计算 采 
代码 从 厂 元 着 色 器 中 转移 到 顶点 着 色 器 中 ， 可 以 减少 运算 ， 


样 纹理 坐标 的 
提高 性 


E。 由 于 从 顶点 着 色 器 到 片 元 着 色 器 的 插值 是 线性 的 ， 因 此 这 样 的 转 
移 并 不 会 影响 纹理 坐标 的 计算 结 


(5) 片 元 着 色 器 是 我 们 的 重点 ， 


它 的 代码 如 下 : 


fixed4 fragSobel(v2f i) 
half edge = Sobel(i); 


: SV_Target { 


fixed4 withEdgeColor = lerp(_EdgeColor, 
i.uv[4]), edge); 
fixed4 onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, 


tex2D(_MainTex, 


edge); 
return lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly); 
} 


我 们 首先 调用 Sobel 函 数 计算 当前 像素 的 梯度 值 edge， 并 利用 该 值 
分 别 计算 了 至 景 为 原 图 和 纯色 下 的 颜色 值 ， 然 后 利用 _EdgeOnly 在 两 考 
之 间 播 值得 到 最 终 的 像素 值 。Sobel 函 数 将 利用 Sobel 算 子 对 原 图 进行 边 
经 检测 ， 它 的 定义 如 下 : 


fixed luminance(fixed4 color) { 
return 0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b; 


half Sobel(v2f i) { 
const half Gx[9] 


const half Gy[9] 


half texColor; 

half edgeXx = 0; 

half edgeY = 0; 

for (int it = 0; it < 9; it++) { 
texColor = luminance(tex2D(_MainTex, i.uv[it])); 
edgeX += texColor * Gx[it]; 
edgeY += texColor * Gy[it]; 


half edge = 1 - abs(edgeX) - abs(edgeY); 


return edge; 


我 们 首先 定义 了 水 平方 向 和 县 直方 同 使 用 的 卷 积 核 C. 和 CGy。 接 
着 ， 我 们 依次 对 9 个 像素 进行 采样 ， 计 算 它 们 的 亮度 值 ， 再 与 卷 积 核 G， 
和 Gy 中 对 应 的 权重 相 乘 后 ， 县 加 到 各 目的 梯度 值 上 。 最 后 ， 我 们 从 1 中 
减 去 水 平方 向 和 苍 直 方向 的 梯度 值 的 绝对 值 ， 得 到 edge。edge 值 越 小 ， 
表明 该 位 置 越 可 能 是 一 个 边缘 点。 至 此 ， 边 缘 检测 过 程 结束 。 


(6) 当然 ,我 们 也 关闭 了 该 Shader 的 Fallback: 


Fallback Off 


完成 后 返回 编辑 器 ， 并 把 Chapter12-EdgeDetection 扼 忠 到 摄像 机 的 
EdgeDetection.cs 脚 本 中 的 edgeDetectShader 参 数 中 。 当 然 ， 我 们 可 以 在 
EdgeDetection.cs 的 脚本 面板 中 将 edgeDetectShader 参 数 的 默认 值 设置 为 
Chapter12-EdgeDetection， 这 样 束 不 需要 以 后 使 用 时 每 次 都 手动 拖 忠 
了 。 图 12.6 显 示 了 edgeOnly 参 数 为 1 时 对 应 的 屏幕 效果 。 


A 图 12.6 只 显示 边缘 的 屏幕 效果 


需要 注意 的 是 ， 本 市 实现 的 边缘 检测 仅仅 利用 了 屏幕 颜色 信息 ， 
而 在 实际 应 用 中 ， 物 体 的 纹理 、 阴 影 等 信息 均 会 影响 边缘 检测 的 结 
条， 使 得 结 朱 包含 许多 非 预期 的 朱 边 。 为 了 得 到 更 加 准确 的 边缘 信 
轧 ， 我 们 往往 会 在 屏幕 的 深度 纹理 和 法 线 纹理 上 进行 边 绿 检测 。 我 们 
将 会 在 13.4 市 中 实现 这 种 方法 。 


12.4 高 斯 模糊 


在 12.3 节 中 ， 我 们 学 习 了 卷 积 的 概念 ， 并 利用 卷 积 实现 了 一 个 简单 
的 边 绿 检测 效果 。 在 本 节 中 ， 我 们 将 学 习 卷 积 的 另 一 个 划 见 应 用 一 一 
高 斯 模糊 。 模 糊 的 实现 有 很 多 方法 ， 例 如 均值 模糊 和 中 值 模糊 。 均 值 
模糊 同样 使 用 了 卷 积 操作 ， 它 使 用 的 卷 积 核 中 的 各 个 元 聚 值 都 相等 ， 
且 相 加 等 于 1， 也 就 是 说 ， 卷 积 后 得 到 的 像素 值 是 其 邻 域内 各 个 像素 值 
的 平均 值 。 而 中 值 模糊 则 是 选择 邻 域内 对 所 有 像素 排序 后 的 中 值 奉 换 
掉 原 颜色 。 一 个 更 高 级 的 模糊 方法 是 高 斯 模糊 。 在 学 习 完 本 世 后 ， 我 
们 可 以 得 到 类 似 图 12.7 中 的 效果 。 


ig or Ne 多 
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A 图 12.7 左边 为 原 效 果 ， 右 边 为 高 斯 模糊 后 的 效果 
12.4.1 ”高 斯 滤波 


高 斯 模糊 同样 利用 了 卷 积 计 算 ， 它 使 用 的 卷 积 核 名 为 高 斯 核 。 高 
斯 核 是 一 个 正方 形 大 小 的 滤波 核 ， 其 中 每 个 元 素 的 计算 都 是 基于 下 面 
的 高 斯 方程 : 


_ T+y 
3 


£ 


G(7,Yy) = 元 
其 中 ，o 是 标准 方差 〈 一 般 取 值 为 1) ，x 和 y 分 别 对 应 了 当前 位 置 到 
卷 积 核 中 心 的 整数 距离 。 要 构建 一 个 高 斯 核 ， 我 们 只 需要 计算 高 斯 核 
中 各 个 位 置 对 应 的 高 斯 值 。 为 了 保证 滤波 后 的 图 像 不 会 变 暗 ， 我 们 需 
要 对 高 斯 核 中 的 权重 进行 归 一 化 ， 即 让 每 个 权重 除 以 所 有 权重 的 和 ， 
这 样 可 以 保证 所 有 权重 的 和 为 1。 因 此 ， 高 斯 函数 中 e 前 面 的 系数 实际 
` 会 对 结果 有 任何 影响 。 图 12.8 显 示 了 一 个 标准 方差 为 1 的 5x5 大 小 的 高 
斯 核 。 


高 斯 方程 很 好 地 模拟 了 领域 每 个 像素 对 当前 处 理 像 素 的 影响 程度 
一 一 距离 越 近 ， 影 响 越 大 。 高 斯 核 的 维 数 越 高， 模糊 程度 越 大 。 使 用 
一 个 NxN 的 高 斯 核对 图 像 进行 卷 积 滤 波 ， 束 需要 NxNxWxH (W 和 H 分 
别 是 图 像 的 宽 和 高 ) 次 纹理 采样 。 当 N 的 大 小 不 断 增 加 时 ， 和 采样 次 数 会 
变 得 非常 巨大 。 笠 运 的 是 ， 我 们 可 以 把 这 个 二 维 高 斯 函数 拆 分 成 两 个 
一 维 画 数 。 也 束 是 说 ， 我 们 可 以 使 用 两 个 一 维 的 高 斯 核 〈 图 12.8 中 的 石 
图 ) 先后 对 图 像 进 行 滤波 ， 它 们 得 到 的 结果 和 直接 使 用 二 维 高 斯 核 是 
一 样 的 ， 但 采样 次 数 只 需要 2xNxWxH。 我 们 可 以 进一步 观察 到 ， 两 个 
一 维 高 斯 核 中 包含 了 很 多 重复 的 权重 。 对 于 一 个 大 小 为 5 的 一 维 高 斯 
核 ， 我 们 实际 只 需要 记录 3 个 权重 值 即 可 。 


A 图 12.8 一 个 5x5 大 小 的 高 斯 核 。 左 图 显示 了 标准 方差 为 1 的 高 斯 核 的 权重 分 布 ， 我 们 可 以 把 
这 个 二 维 高 斯 核 拆 分 成 两 个 一 维 的 高 斯 核 〈 右 图 ) 


在 本 记 ， 我 们 将 会 使 用 上 述 5x5 的 高 斯 核对 原 图 像 进行 高 斯 模糊 。 
我 们 将 先后 调用 两 个 Pass， 第 一 个 Pass 将 会 使 用 竖 直 方向 的 一 维 高 斯 核 
对 图 像 进行 滤波 ， 第 二 个 Pass 再 使 用 水 平方 向 的 一 维 高 斯 核对 图 像 进 行 
滤波 ， 得 到 最 终 的 目标 图 像 。 在 实现 中 ， 我 们 还 将 利用 图 像 缩放 来 进 
一 步 提高 性 能 ， 并 通过 调整 高 斯 滤波 的 应 用 次 数 来 控制 模糊 程度 (次 
数 越 多 ， 图 像 越 模糊 ) 


12.4.2 ”实现 


为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene_12 4°。 在 
Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 使 
用 了 内 置 的 天 空 盒子 。 在 Window ~” Lighting ~” Skybox 中 去 掉 场 景 中 的 


天 空 盒子 。 


(2) 把 本 书 资源 中 的 Assets/Textures/Chapter12/Sakural.jpg 拖 上 忠 到 
场景 中 ， 并 调整 的 位 置 使 其 可 以 填充 整个 场景 。 注 意 ，Sakural.jpg 的 纹 
理 类 型 已 极 设 置 为 Sprite， 因 此 可 以 直接 拖 上 息 到 场景 中 。 


(3) 新 建 一 个 脚本 。 在 本 书 资 源 中 ， 该 脚本 名 为 
GaussianBlurcs。 把 该 脚本 拖 暇 到 摄像 机 上 。 


(4) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter12-GaussianBlur ° 


我 们 首先 来 编写 GaussianBlurcs 脚 本 。 打 开 该 脚本 ， 并 进行 如 下 修 
改 。 


(1) 首先 ， 继 承 12.1 节 中 创建 的 基 类 : 


(2) 声明 该 效果 需要 的 Shader， 并 据 此 创建 相应 的 材质 : 


public Shader gaussianBlurShader; 
private Material gaussianBlurMaterial = null; 


public Material material { 
get { 
gaussianBlurMaterial = 
CheckShaderAndCreateMaterial(gaussianBlurShader, 
gaussianBlurMaterial); 
return gaussianBlurMaterial; 
} 


在 上 述 代 码 中 ，gaussianBlurShader 是 我 们 指定 的 shader， 对 应 了 后 
面 将 会 实现 的 Chapter12-GaussianBlur。 


(3) 在 脚本 中 ， 我 们 还 提供 了 调整 高 斯 模糊 迭代 次 数 、 模 糊 范 转 
和 缩放 系数 的 参数 : 


// Blur iterations - larger number means more blur. 
[Range (0, 4)] 
public int iterations = 3; 


// Blur spread for each iteration - larger value means more blur 
[Range(0.2f, 3.0f)] 
public float blurSpread = 0.6f; 


[Range(1, 8)] 
public int downSample = 2; 


blurSpread 和 downSample 都 是 出 于 性 能 的 考虑 。 在 高 斯 核 维 数 不 变 
的 情况 下 ，_BlurSize 越 大 ， 模 糊 程 度 越 高 ， 但 采样 数 却 不 会 受到 影 
啊 。 但 过 大 的 _BlurSize 值 会 造成 虚 影 ， 这 可 能 并 不 是 我 们 希望 的 。 而 
downSample 越 大 ， 需 要 处 理 的 像素 数 越 少 ， 同 时 也 能 进一步 提高 模糊 
程度 ， 但 过 大 的 downSample 可 能 会 使 图 像 像素 化 。 


(4) 最 后 ， 我 们 需要 定义 关键 的 OnRenderImage 函 数 。 我 们 首先 
来 看 第 一 个 版 本 ， 也 就 是 最 简单 的 OnRenderImage 的 实现 : 


/// 1st edition: just apply blur 
void OnRenderImage(RenderTexture src, RenderTexture dest) { 
if (material != null) { 
int rtw = src.width; 
int rtH = src.height; 
RenderTexture buffer = RenderTexture.GetTemporary(rtw, rtH， 


// Render the vertical pass 
Graphics.Blit(src, buffer, material, 0); 
// Render the horizontal pass 
Graphics.Blit(buffer, dest, material, 1); 


RenderTexture.ReleaseTemporary(buffer ); 
} else { 
Graphics.Blit(src, dest); 


与 上 两 市 的 实现 人 不同， 我 们 这 里 利用 RenderTexture.GetTemporary 
函数 分 配 了 一 块 与 屏幕 图 像 大 小 相同 的 缓冲 区 。 这 是 因为 ， 高 斯 模糊 
需要 调用 两 个 pass， 我 们 需要 使 用 一 块 中 间 缓 存 来 存储 第 一 个 Pass 执 行 
完毕 后 得 到 的 模糊 结果 。 如 代码 所 示 ， 我 们 下 和 完 调 用 Graphics.Blit(src, 
buffer, material, 0)， 使 用 Shader 中 的 第 一 个 Pass 〈 即 使 用 竖 直 方向 的 一 
维 高 斯 核 进行 滤波 ) 对 src 进 行 处 理 ， 并 将 结果 存储 在 了 buffer 中 。 然 
后 ， 再 调用 Graphics.Blit(buffer, dest, material, 1)， 使 用 Shader 中 的 第 二 


个 Pass 《即使 用 水 平方 向 的 一 维 高 斯 核 进行 滤波 ) 对 buffer 进 行 处 理 ， 
返回 最 终 的 屏幕 图 像 。 最 后 ， 我 们 还 需要 调用 
RenderTexture.ReleaseTemporary 来 释放 之 前 分 配 的 绥 存 。 


(5) 在 理解 了 上 述 代 码 后 ， 我 们 可 以 实现 第 二 个 版 本 的 
OnRenderImage 了 芳 数 。 在 这 个 版 本 中 ， 我 们 将 利用 缩放 对 图 像 进 行 降 采 
样 ， 从 而 减少 需要 处 理 的 像素 个 数 ， 提 高 性 能 。 

/// 2nd edition: Scale the render texture 
void OnRenderImage (RenderTexture src, RenderTexture dest) { 
If (material != null) { 
int rtw = src.width/downSample; 
int rtH = src.height/downSample; 
RenderTexture buffer = RenderTexture.GetTemporary(rtw, rtH， 


buffer.filterMode = FilterMode.Bilinear; 


// Render the vertical pass 


Graphics.Blit(src, buffer, material, 0); 
// Render the horizontal pass 
Graphics.Blit(buffer, dest, material, 1); 


RenderTexture.ReleaseTemporary(buffer ); 
} else { 
Graphics.Blit(src, dest); 


与 第 一 个 版 本 代码 不 同 的 是 ， 我 们 在 声明 缓冲 区 的 大 小 时 ， 使 用 
了 小 于 原 屏 幕 分 辩 率 的 尺寸 ， 并 将 该 临时 泻 染 纹理 的 滤波 模式 设置 为 
双 线 性 。 这 样 ， 在 调用 第 一 个 Pass 时 ， 我 们 需要 处 理 的 像素 个 数 就 是 原 
来 的 几 分 之 一 。 对 图 像 进行 降 采样 不 仅 可 以 减少 需要 处 理 的 像素 个 
数 ， 提 高 性 能 ， 而 且 适 当 的 降 采 样 往往 还 可 以 得 到 更 好 的 模糊 效果 。 
尽管 downSample 值 越 大 ， 性 能 越 好 ， 但 过 大 的 downSample 可 能 会 造成 
图 像 像 系 化 。 


(6) 最 后 一 个 版 本 的 代码 还 考虑 了 高 斯 模糊 的 适 代 次 数 : 


/// 3rd edition: use iterations for larger blur 
void OnRenderImage (RenderTexture src, RenderTexture dest) { 
If (material != null) { 
int rtw = src.width/downSample; 
int rtH src.height/downSample; 


RenderTexture buffer0 = RenderTexture.GetTemporary(rtw, 
rtH, 0); 
bufferg0.filterMode = FilterMode.Bilinear; 


Graphics.Blit(src, buffer0); 


for (int i = 0; i < iterations; i++) { 
material.SetFloat("_BlurSize", 1.0f + i * blurSspread); 


RenderTexture buffer1 = RenderTexture.GetTemporary(rtw, 


// Render the vertical pass 
Graphics.Blit(buffer0, buffer1, material, 0); 


RenderTexture.ReleaseTemporary(buffero0); 
bufferg0 = buffer1， 
buffer1 = RenderTexture.GetTemporary(rtw, rtH, 0); 


// Render the horizontal pass 
Graphics.Blit(buffer0, buffer1, material, 1); 


RenderTexture.ReleaseTemporary(buffero0); 
bufferg0 = buffer1， 


} 


Graphics.B1Lit(buffer0，dest ) ; 
RenderTexture.ReleaseTemporary(buffero0); 
} else { 
Graphics.Blit(src, dest); 
} 


上 面 的 代码 最 示 了 如 何 利用 两 个 临时 缓存 在 迭代 之 间 进 行 交 替 的 
过 程 。 在 友 代 开始 前 ， 我 们 百 移 定义 了 第 一 个 缓存 buffer0， 并 把 src 中 
的 图 像 缩 放 后 存储 到 buffer0 中 。 在 送 代 过 程 中 ， 我 们 义 定 义 了 第 二 个 
缓存 buffer1。 在 执行 第 一 个 Pass 时 ， 输 入 是 buffer0， 和 输出 是 buffer1， 完 


毕 后 首先 把 buffer0 释 放 ， 再 把 结果 值 buffer1 存 储 到 buffer0 中 ， 重 新 分 配 
buffer1 ， 然 后 再 调用 第 二 个 Pass， 重 复 上 述 过 程 。 迭 代 完 成 后 ，buffer0 
将 存储 最 终 的 图 像 ， 我 们 再 利用 Graphics.Blit(buffer0, desbD 把 结果 显示 
到 屏幕 上 ， 并 释放 缓存 。 


下 面 ， 我 们 来 实现 Shader 的 部 分 。 打 开 Chapter12-GaussianBlur， 进 
行 如 下 修改 。 


(1) 我 们 首先 需要 声明 本 例 使 用 的 各 个 属性 : 


Properties { 
_MainTex ("Base (RGB)", 2D) = "white" {} 


_BlurSize ("Blur Size", Float) = 1.0 
} 


_MainTex 对 应 了 输入 的 演 染 纹理 。 


(2) 在 本 节 中 ， 我 们 将 第 一 次 使 用 CGINCLUDE 来 组 织 代 码 。 我 
们 在 SubShader 块 中 利用 CGINCLUDE 和 ENDCG 语 义 来 定义 一 系列 代 
但: 


SubShader { 
CGINCLUDE 


ENDCG 


这 些 代 码 不 需要 包含 在 任何 Pass 语 义 块 中 ， 在 使 用 时 ， 我 们 只 需要 
在 Pass 中 直接 指定 需要 使 用 的 顶点 着 色 器 和 片 元 着 色 器 函数 名 即 可 。 
CGINCLUDE 类 似 于 C++ 中 头 文件 的 功能 。 由 于 高 斯 模糊 需要 定义 两 个 
Pass， 但 它们 使 用 的 片 元 着 色 器 代码 是 完全 相同 的 ， 使 用 CGINCLUDE 
可 以 避免 我 们 编写 两 个 完全 一 样 的 frag 函 数 。 


(3) 在 CG 代码 块 中 ， 定 义 与 属性 对 应 的 变量 : 


sampler2D _MainTex; 
half4 _MainTex_TexelSize; 
float _BlurSize; 


由 于 要 得 到 相 令 像素 的 纹理 坐标 ， 我 们 这 里 再 一 次 使 用 了 Unity 提 
供 的 _MainTex_TexelSize 变 量 ， 以 计算 相 邻 像素 的 纹理 坐标 偏 移 量 。 


(4) 分 别 定义 两 个 Pass 使 用 的 顶点 着 色 器 。 下 面 是 坚 直 方向 的 顶 
扩 着 色 器 代码 : 


struct v2f { 
float4 pos : SV_POSITION; 
half2 uv[5]: TEXCOORDO; 
}; 


v2f vertBlurVertical(appdata img v) { 
v2f Oo; 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


half2 uv = v.texcoord; 


o.uv[90] 

o.uv[1] 
_BlurSize; 

o.uv[2] - float2(0.0, _MainTex_TexelSize. 
_BlurSize; 

o.uv[3] + float2(0.0, _MainTex_TexelSize. 
_BlurSize; 

oO,UV[4] - float2(0.0, _MainTex_TexelSize. 
_BlurSize; 


Vj 
+ float2(0.0, _MainTex_TexelSize. 


return o; 


在 本 方 中 我 们 会 利用 5x5 大 小 的 高 斯 核对 原 图 像 进行 高 斯 模糊 ， 而 
由 12.4.1 市 可 知 ， 一 个 5x5 的 二 维 高 斯 核 可 以 拆 分 成 两 个 大 小 为 5 的 一 维 
高 斯 核 ， 因 此 我 们 只 需要 计算 5 个 纹理 坐标 即 可 。 为 此 ， 我 们 在 v2f 结 构 
体 中 定义 了 一 个 5 维 的 纹理 坐标 数组 。 数 组 的 第 一 个 坐标 存储 了 当前 的 


采样 纹理 ， 而 剩余 的 四 个 坐标 则 是 高 斯 模糊 中 对 邻 域 采 样 时 使 用 的 纹 
理 坐 标 。 我 们 还 和 属性 _BlurSize 相 乘 来 控制 采样 距离 。 在 高 斯 核 维 数 
不 变 的 情况 下 ，_BlurSize 越 大 ， 模 糊 程度 越 高 ， 但 采样 数 却 不 会 受到 
影响 。 但 过 大 的 _BlurSize 值 会 造成 虚 影 ， 这 可 能 并 不 古 我 们 布 望 的 。 
通过 把 计算 采样 纹理 坐标 的 代码 从 厂 元 着 色 器 中 转移 到 顶点 着 色 器 
中 ， 可 以 减少 运算 ， 提 高 性 能 。 由 于 从 顶点 着 色 右 到 厂 元 着 色 器 的 插 
值 古 线性 的 ， 因 此 这 样 的 转移 并 不 会 影响 纹理 坐标 的 计算 结 末 。 


水 平方 向 的 顶点 着 色 器 和 上 面 的 代码 类 似 ， 只 是 在 计算 4 个 纹理 坐 
标 时 使 用 了 水 平方 向 的 纹 素 大 小 进行 纹理 偏 移 。 


(5) 定义 两 个 Pass 共 用 的 片 元 着 色 器 : 
fixed4 fragBlur(v2f i) : SV_Target { 
float weight[3] = {0.4026, 0.2442, 0.0545}; 
fixed3 sum = tex2D(_MainTex, i.uv[0]).rgb * weight[0]; 


for (int it = 1; it < 3; it++) 
sum += tex2D(_MainTex, i.uv[it*2-1]).rgb * 


weight[it]; 


Sum += tex2D(_MainTex, i.uv[it*2]).rgb * weight[it]; 


} 


return fixed4(sum, 1.0); 


由 12.4.1 市 可 知 ， 一 个 5x5 的 二 维 高 斯 核 可 以 拆 分 成 两 个 大 小 为 5 的 
一 维 高 斯 核 ， 并 且 由 于 它 的 对 称 性 ， 我 们 只 需要 记录 3 个 高 斯 权重 ， 也 
束 是 代码 中 的 weight 变 量 。 我 们 首 和 声明 了 各 个 邻 域 像 系 对 应 的 权重 
weight， 然 后 将 结 采 值 sum 初 始 化 为 当前 的 像素 值 乘 以 它 的 权重 值 。 根 
据 对 称 性 ， 我 们 进行 了 两 次 达 代 ， 每 次 迭代 包含 了 两 次 纹理 采样 ， 并 


把 像素 值 和 权重 相 乘 后 的 结果 县 加 到 sum 中 。 最 后 ， 函 数 返 回 滤 流 绪 


SUMm ° 


(6) 然后 ， 我 们 定义 了 高 斯 模糊 使 用 的 两 个 Pass: 


ZTest Always Cull Off Zwrite Off 


Pass { 
NAME "GAUSSIAN_ BLUR_ VERTICAL" 


CGPROGRAM 


#pragma vertex vertBlurVertical 
#pragma fragment fragBlur 


ENDCG 
} 


Pass 


{ 
NAME "GAUSSIAN_ BLUR_HORIZONTAL" 


CGPROGRAM 


#pragma vertex vertBlurHorizontal 
#pragma fragment fragBlur 


ENDCG 


注意 ， 我 们 仍然 首先 设置 了 泻 染 状态 。 和 之 前 实现 不 同 的 是 ， 我 
们 为 两 个 Pass 使 用 NAME 语 义 ( 见 3.3.3 节 ) 定义 了 它们 的 名 字 。 这 是 因 
为 ， 高 斯 模糊 是 非常 常见 的 图 像 处 理 操作 ， 很 多 屏幕 特 殖 都 是 建立 在 
它 的 基础 上 的 ， 例 如 Bloom 效 果 ( 见 12.5 节 ) 。 为 Pass 定 义 名 字 ， 可 以 
在 其 他 Shader 中 直接 通过 它们 的 名 字 来 使 用 该 Pass， 而 不 需要 再 重复 编 
写 代码 。 


(7) 最 后 ， 关 闭 该 Shader 的 Fallback: 


Fallback Off 


完成 后 返回 编辑 絮 ， 并 把 Chapter12-GaussianBlur 拖 上 忠 到 摄像 机 的 
GaussianBlur.cs 脚 本 中 的 gaussianBlurShader 参 数 中 。 当 然 ， 我 们 可 以 在 
GaussianBlurcs 的 脚本 面板 中 将 gaussianBlurShader 参 数 的 默认 值 设 置 为 
Chapter12-GaussianBlur， 这 样 惑 不 需要 以 后 使 用 时 每 次 都 手动 拖 暇 
Ts 


12.5 Bloom 效 果 


Bloom 特 效 是 游戏 中 常见 的 一 种 屏幕 效果 。 这 种 特效 可 以 模拟 真实 
摄像 机 的 一 种 图 像 效 果 ， 它 让 画面 中 较 腕 的 区 域 和 和 散 ”到 周围 的 区 域 
中 ， 造 成 一 种 膀 胱 的 效果 。 图 12.9 给 出 了 动画 短片 《大 象 之 梦 》 《英文 
名 : Elephants Dream) 中 的 一 个 Bloom 效 果 。 


本 世 将 会 实现 一 个 基本 的 Bloom 特 效 ， 在 学 习 完 本 和 后 ， 我 们 可 以 


得 到 类 似 图 12.10 中 的 效果 。 


区 


图 12.9 ”动画 短片 《大 象 之 梦 》 中 的 Bloom 效 果 ， 光 线 透 过 | 扩散 到 了 周围 较 上 暗 的 区 域 中 
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图 12.10 ”左边 为 原 效 果 ， 右 边 为 Bloom 处 理 后 的 效果 


Bloom 的 实现 原理 非常 简单 :我 们 站 先 根据 一 个 病 值 所 取出 图 像 中 
的 较 亮 区 域 ， 把 它们 存储 在 一 张 泻 染 纹理 中 ， 再 利用 高 斯 模糊 对 这 张 
演 染 纹理 进行 模糊 处 理 ， 模 拟 光 线 扩 获 的 效 霖 ， 最 后 再 将 其 和 原 图 像 
进行 混合 ， 得 到 最 终 的 效果 。 


为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene 12 5。 在 
Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 使 
用 了 内 置 的 天 空 例子。 在 Window 一 Lighting 一 Skybox 中 去 掉 场 景 中 
的 天 空 盒子 。 


(2) 把 本 书 资 源 中 的 Textures/Chapter12/Sakural.jpg 拖 电 到 场景 
中 ， 并 调整 它 的 位 置 使 其 可 以 填充 整个 场景 。 注 意 ，Sakural.jpg 的 纹理 
类 型 已 被 设置 为 Sprite， 因 此 可 以 直接 拖 虑 到 场景 中 。 


(3) 新 建 一 个 脚本 。 在 本 书 资 源 中 ， 该 脚本 名 为 Bloom.cs。 把 该 
脚本 拖 上 忠 到 摄像 机 上 。 


(4) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter12-Bloom ° 


我 们 首先 来 编写 Bloom.cs 脚 本 。 打 开 该 脚本 ， 并 进行 如 下 修改 。 
(1) 首先 ， 继 承 12.1 节 中 创建 的 基 类 : 


(2) 声明 该 效果 需要 的 Shader， 并 据 此 创建 相应 的 材质 : 


public Shader bloomShader; 
private Material bloomMaterial = null; 
public Material material { 

get 


{ 

bloomMaterial = CheckShaderAndCreateMaterial(bloomShader, 
bloomMaterial ); 

return bloomMaterial; 


在 上 述 代 码 中 ，bloomShader 是 我 们 指定 的 Shader， 对 应 了 后 面 将 
会 实现 的 Chapter12-Bloom。 


(3) 由 于 Bloom 效 果 是 建立 在 高 斯 模糊 的 基础 上 的 ， 因 此 脚本 中 
提供 的 参数 和 12.4 广 中 的 几乎 完全 一 样 ， 我 们 只 增加 了 一 个 新 的 参数 
luminanceThreshold 来 控制 提取 较 亮 区 域 时 使 用 的 国 值 大 小 : 


// Blur iterations - larger number means more blur. 
[Range (0, 4)] 
public int iterations = 3; 


// Blur spread for each iteration - larger value means more blur 


[Range(0.2f, 3.0f)] 
public float blurSpread = 0.6f; 


[Range(1, 8)] 
public int downSample = 2; 


[Range(0.0f, 4.0f)] 
public float luminanceThreshold = 0.6f; 


尽管 在 绝 大 多 数 情 况 下 ， 图 像 的 亮度 值 不 会 超过 1。 但 如 果 我 们 开 
启 了 HDR， 硬 件 会 允许 我 们 把 颜色 值 存 储 在 一 个 更 高 精度 范围 的 缓冲 
中 ， 此 时 像素 的 亮度 值 可 能 会 超过 1。 因 此 ， 在 这 里 我 们 把 
luminanceThreshold 的 值 规定 在 [0, 4 和光 围 内 。 更 多 关于 HDR 的 内 容 ， 可 
以 参见 18.4.3 节 。 


(4) 最 后 ， 我 们 需要 定义 关键 的 OnRenderImage 函 数 : 


void OnRenderImage (RenderTexture src, RenderTexture dest) { 
If (material != null) { 
material.SetFloat("_LuminanceThreshold", 
luminanceThreshold); 


int rtw = src.width/downSample; 
int rtH = src.height/downSample; 


RenderTexture buffer0 = RenderTexture.GetTemporary(rtw, 
rtH, 0); 
bufferg0.filterMode = FilterMode.Bilinear; 


Graphics.Blit(src, buffer0, material, 0); 


for (int i = 0; i < iterations; i++) { 
material.SetFloat("_BlurSize", 1.0f + i * blurSspread); 


RenderTexture buffer1 = RenderTexture.GetTemporary(rtw, 
rtH, 0); 


// Render the vertical pass 
Graphics.Blit(buffer0, buffer1, material, 1); 


RenderTexture.ReleaseTemporary(buffero0); 
bufferg = buffer1， 
buffer1 = RenderTexture.GetTemporary(rtw, rtH, 0); 


// Render the horizontal pass 
Graphics.BlLit(buffer0，buffer1，material，2)， 


RenderTexture.ReleaseTemporary(buffero0); 
bufferg = buffer1， 
} 


material.SetTexture ("_Bloom", buffero0); 
Graphics.Blit (src, dest, material, 3); 


RenderTexture.ReleaseTemporary(buffero0); 
} else { 
Graphics.Blit(src, dest); 


上 面 的 代码 和 12.4 节 中 进行 高 斯 模糊 时 使 用 的 代码 基本 相同 ， 但 进 
行 了 一 些 人 和 修改。 我们 前 面 提 到 ，Bloom 歼 果 需 要 3 个 步骤 : 首先 ， 提 取 
图 像 中 较 亮 的 区 域 ， 因 此 我 们 没有 像 12.4 方 那样 直接 对 src 进 行 降 采 
样 ， 而 是 通过 调用 Graphics.Blit(src, buffer0, material, 0) 来 使 用 Shader 中 
的 第 一 个 Pass 提 取 图 像 中 的 较 亮 区 域 ， 提 取得 到 的 较 腕 区 域 将 存储 在 
buffer0 中 。 然 后 ， 我 们 进行 和 12.4 和 中 完全 一 样 的 高 斯 模糊 友 代 处 理 ， 
这 些 Pass 对 应 了 Shader 的 第 二 个 和 第 三 个 Pass。 模 炎 后 的 较 亮 区 域 将 会 
存储 在 buffer0 中 ， 此 时 ， 我 们 再 把 buffer0 传 递 给 材质 中 的 _Bloom 纹 理 
属性 ， 并 调用 Graphics.Blit (src, dest material, 3) 使 用 Shader 中 的 第 四 个 
Pass 来 进行 最 后 的 混合 ， 将 结果 存储 在 目标 洽 染 纹理 dest 中 。 最 后 ， 释 
放 临 时 缓存 。 


下 面 ， 我 们 来 实现 Shader 的 部 分 。 打 开 Chapter12-Bloom， 进 行 如 
下 修改 。 


(1) 我 们 首先 需要 声明 本 例 使 用 的 各 个 属性 : 


Properties { 
_MainTex ("Base (RGB)", 2D) = "white" {} 
_Bloom ("Bloom (RGB)", 2D) = "black" {} 


_LuminanceThreshold ("Luminance Threshold", Float) = 0.5 
_BlurSize ("Blur Size", Float) = 1.0 


} 


_MainTex 对 应 了 输入 的 演 染 纹理 。_Bloom 是 高 斯 模糊 后 的 较 亮 区 
域 ，_LuminanceThreshold 是 用 于 提取 较 亮 区 域 使 用 的 国 值 ， 而 
_BlurSize 和 12.4 市 中 的 作用 相同 ， 用 于 控制 不 同 迭 代 之 间 高 斯 模糊 的 模 
糊 区 域 范 围 。 


(2) 在 本 节 中 ， 我 们 仍然 使 用 CGINCLUDE 来 组 织 代码 。 我 们 在 
SubShader 块 中 利用 CGINCLUDE 和 ENDCG 语 义 来 定义 一 系列 代码 : 


SubShader { 
CGINCLUDE 


ENDCG 


(3) 声明 代码 中 需要 使 用 的 各 个 变量 : 


sampler2D _MainTex; 

half4 _MainTex_TexelSize; 
sampler2D _Bloom; 

float _LuminanceThreshold; 
float _BlurSize; 


(4) 我 们 首先 定义 提取 较 亮 区 域 需要 使 用 的 顶点 着 色 器 和 片 元 着 
色 郁 : 


struct v2f { 
float4 pos : SV_POSITION; 
half2 uv : TEXCOORDO; 


}; 


v2f vertExtractBright(appdata _ img v) { 
v2f Oo; 


oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


O.UV = V.texcoord 


return o; 


} 


fixed luminance(fixed4 color) { 
return 0.2125 * color.r + 0.7154 * color.g + 0.0721 * color.b; 
} 


fixed4 fragExtractBright(v2f i) : SV_Target { 

fixed4 c = tex2D(_MainTex, i.uv); 

fixed val = clamp(luminance(c) - _LuminanceThreshold, 0.0, 
1.0); 


return c * val; 


顶点 着 色 器 和 之 前 的 实现 完全 相同 。 在 片 元 着 色 器 中 ， 我 们 将 采 
样 得 到 的 亮度 值 城 去 赋值 LuminanceThreshold， 并 把 结果 截取 到 0~1 
范围 内 。 然 后 ， 我 们 把 该 值 和 原 像 素 值 相 乘 ， 得 到 提取 后 的 亮 部 区 
域 。 


(5) 然后 ， 我 们 定义 了 混合 亮 部 图 像 和 原 图 像 时 使 用 的 顶点 着 色 
器 和 厂 元 着 色 器 : 


struct v2fBloom { 
float4 pos : SV_POSITION; 
half4 uv : TEXCOORDO; 


}; 


v2fBloom vertBloom(appdata img v) { 
v2fBloom 0 ， 


oO.pos = mul (UNITY_MATRIX_ MVP, Vv.vertex); 
O.UV.Xy = Vv.texcoord; 
O.UV.ZW = Vv.texcoord; 


#if UNITY_UV_STARTS_AT_TOP 

if (_MainTex_TexelSize.y < 0.0) 
O.UV.W = 1.0 - O.UV.WwW; 

#endif 


return o; 


fixed4 fragBloom(v2fBloom i) : SV_Target { 


} 


return tex2D(_MainTex, i.uv.xy) + tex2D(_Bloom, i.uv.Zzw); 


这 里 使 用 的 顶点 着 色 器 与 之 前 的 有 所 不 同 ， 我 们 定义 了 两 个 纹理 
坐标 ， 并 存储 在 同一 个 类 型 为 half4 的 变量 uv 中 。 它 的 xy 分 量 对 应 了 
_MainTex， 即 原 图 像 的 纹理 坐标 。 而 它 的 zw 分 量 是 _Bloom， 即 模糊 后 
的 较 亮 区 域 的 纹理 坐标 。 我 们 需要 对 这 个 纹理 坐标 进行 平台 差异 化 处 
理 ( 详 见 5.6.1 节 ) 。 


片 元 着 色 句 的 代码 束 很 镜 单 了 。 我 们 只 需要 把 两 张 纹理 的 采样 结 
果 相 加 混合 即 可 。 


(6) 接着 ， 我 们 定义 了 Bloom 效 果 需 要 的 4 个 Pass: 


ZTest Always Cull Off ZWrite Off 


Pass { 
CGPROGRAM 
#pragma vertex vertExtractBright 
#pragma fragment fragExtractBright 


ENDCG 
} 


UsePass "Unity Shaders Book/Chapter 12/Gaussian 
Blur/GAUSSIAN_BLUR_VERTICAL" 


UsePass "Unity Shaders Book/Chapter 12/Gaussian 
Blur/GAUSSIAN_BLUR_HORIZONTAL" 


Pass { 
CGPROGRAM 
#pragma vertex vertBloom 
#pragma fragment fragBloom 


ENDCG 


其 中 ， 第 二 个 和 第 三 个 Pass 我 们 直接 使 用 了 12.4 节 高 斯 模糊 中 定义 
的 两 个 Pass， 这 是 通过 UsePass 语 义 指 明 它 们 的 Pass 名 来 实现 的 。 需 要 
注意 的 是 ， 由 于 Unity 内 部 会 把 所 有 Pass 的 Name 转 换 成 大 写字 母 表示 ， 
因此 在 使 用 UsePass 命 令 时 我 们 必须 使 用 大 写 形式 的 名 字 。 


(7) 最 后 ， 我 们 关闭 了 该 Shader 的 Fallback: 


Fallback Off 


完成 后 返回 编辑 絮 ， 并 把 Chapter12-Bloom 拖 虑 到 摄像 机 的 
Bloom.cs 脚 本 中 的 bloomShader 参 数 中 。 当 然 ， 我 们 可 以 在 Bloom.cs 的 
脚本 面板 中 将 bloomShader 参 数 的 默认 值 设 置 为 Chapter12-Bloom， 这 样 
束 不 需要 以 后 使 用 时 每 次 都 手动 拖 忠 了 。 


12.6 运动 模糊 


运动 模糊 是 真实 世界 中 的 摄像 机 的 一 种 效果 。 如 末 在 摄像 机 曝光 
时 ， 拍 摄 场景 发 生 了 变化 ， 就 会 产生 模糊 的 画面 。 运 动 模糊 在 我 们 的 
日 常生 活 中 是 非常 种 见 的 ， 只 要 留心 观察 ， 就 可 以 发 现 无 论 是 体育 报 
道 还 是 各 个 电影 里 ， 都 有 运动 模糊 的 号 影 。 运 动 模糊 效 末 可 以 让 物体 
运动 看 起 来 更 加 真实 平 消 ， 但 在 计算 机 产生 的 图 像 中 ， 由 于 不 存在 上 曝 
光 这 一 物理 现象 ， 泻 染 出 来 的 图 像 往往 都 棱角 分 明 ， 缺 少 运动 模糊 。 
在 一 些 诸如 赛车 类 型 的 游戏 中 ， 为 画面 添加 运动 模糊 是 一 种 常见 的 处 
理 方法 。 在 这 一 下 中 ， 我 们 将 学 习 如 何在 屏幕 后 处 理 中 实现 运动 模糊 
的 效果 。 在 本 市 结束 后 ， 我 们 将 得 到 类 似 图 12.11 中 的 效 采 。 


A 图 12.11 左边 为 原 效 果 ， 右 边 为 应 用 运动 模糊 后 的 效果 


运动 模糊 的 实现 有 多 种 方法 。 一 种 实现 方法 是 利用 一 块 累积 缓存 
(accumulation buffer ) 来 混合 多 张 连续 的 图 像 。 当 物体 快速 移动 产 
生 多 张 图 像 后 ， 我 们 取 它 们 之 间 的 平均 值 作为 最 后 的 运动 模糊 图 像 。 
然而 ， 这 种 暴力 的 方法 对 性 能 的 消耗 很 大 ， 因 为 想 要 获取 多 张 帧 图 像 
往往 意味 着 我 们 需要 在 同一 帧 里 泻 染 多 次 场景 。 男 一 种 应 用 广泛 的 方 
法 是 创建 和 使 用 速度 缓存 (velocity buffer) ， 这 个 缓存 中 存储 了 各 个 
像素 当前 的 运动 速度 ， 然 后 利用 该 值 来 决定 模糊 的 方向 和 大 小 。 


在 本 万 中 ， 我 们 将 使 用 类 似 上 述 第 一 种 方法 的 实现 来 模拟 运动 模 
糊 的 效果 。 我 们 不 需要 在 一 帧 中 把 场景 泻 染 多 次 ， 但 需要 保存 之 前 的 
演 染 结果 ， 不 断 把 当前 的 泻 染 图 像 堆 加 到 之 前 的 泻 染 图 像 中 ， 从 而 产 
生 一 种 运动 轨迹 的 视觉 效果 。 这 种 方法 与 原始 的 利用 累计 缓存 的 方法 
相 比 性 能 更 好 ， 但 模糊 效果 可 能 会 略 有 影响 。 


为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene_ 12 6。 在 
Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 使 
用 了 内 置 的 天 空 盒子 。 在 Window ~” Lighting Skybox 中 去 掉 场景 中 
的 天 空 盒子 。 


(2) 我 们 需要 搭建 一 个 测试 运动 模糊 的 场景 。 在 本 书 资源 的 实现 
中 ， 我 们 构建 了 一 个 包含 3 面 墙 的 房间 ， 并 放置 了 4 个 立方 体 ， 它 们 均 
使 用 了 我 们 在 9.5 广 中 创建 的 标准 材质 。 同 时 ， 我 们 把 本 书 资 源 中 的 
Translating.cs 脚 本 拖 忠 给 摄像 机 ， 让 其 在 场景 中 不 断 运 动 。 


(3) 新 建 一 个 脚本 。 在 本 书 资源 中 ， 该 脚本 名 为 MotionBlurcs 。 
把 该 脚本 拖 虑 到 摄像 机 上 。 


(4) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter12-MotionBlur ° 


我 们 首 抑 来 编写 MotionBlurcs 脚 本 。 打 开 该 脚本 ， 并 进行 如 下 修 
改 * 


(1) 首先 ， 继 承 12.1 节 中 创建 的 基 类 : 


(2) 声明 该 效果 需要 的 Shader， 并 据 此 创建 相应 的 材质 : 


public Shader motionBlurShader; 
private Material motionBlurMaterial = nulil; 


public Material material { 
get { 
motionBlurMaterial = 
CheckShaderAndCreateMaterial(motionBlurShader, motionBlurMaterial); 


return motionBlurMaterial， 


(3) 定义 运动 模糊 在 混合 图 像 时 使 用 的 模糊 参数 : 


[Range(0.0f, 0.9f)] 
public float blurAmount = 0.5f; 
blurAmount 的 值 越 大 ， 运 动 拖 尾 的 效果 就 越 明 显 ， 为 了 防止 拖 尾 


效果 完全 稚 代 当前 帆 的 浑 染 结 末 ， 我 们 把 它 的 值 截取 在 0.0~0.9 范 围 
内 。 


(4) 定义 一 个 RenderTexture 类 型 的 变量 ， 保 存 之 前 图 像 徐 加 的 结 
时 


private RenderTexture accumulationTexture; 


void OnDisable() { 


DestroyImmediate(accumulationTexture); 


} 


在 上 面 的 代码 里 ， 我 们 在 该 脚本 不 运行 时 ， 即 调用 OnDisable 函 数 
时 ， 立 即 销毁 accumulation Texture。 这 是 因为 ， 我 们 希望 在 下 一 次 开始 
应 用 运动 模糊 时 重新 琶 加 图 像 。 


(5) 最 后 ， 我 们 需要 定义 运动 模糊 使 用 的 OnRenderImage 函 数 : 


void OnRenderImage (RenderTexture src, RenderTexture dest) { 
if (material != null) { 
// Create the accumulation texture 
if (accumulationTexture == null || 
accumulationTexture.width != src.width || 
accumulationTexture.height != src.height) { 
DestroyImmediate(accumulationTexture); 
accumulationTexture = new RenderTexture(src.width, 
src.height, 0); 
accumulationTexture.hideFlags = 


HideFlags.HideAndDontSave; 
Graphics.Blit(src, accumulationTexture); 


// We are accumulating motion over frames without 
clear/discard 

// by design, so silence any performance warnings from 
Unity 

accumulationTexture.MarkRestoreExpected( ); 


material.SetFloat("_BlurAmount", 1.0f - blurAmount); 


Graphics.Blit (src, accumulationTexture, material); 
Graphics.Blit (accumulationTexture, dest); 

} else { 
Graphics.Blit(src, dest); 


在 确认 材质 可 用 后 ， 我 们 首先 判断 用 于 混合 J 
accumulationTexture 是 否 满 足 条 件 。 我 们 不 仅 判断 它 是 否 为 至 ， 还 判断 
它 是 否 与 当前 的 屏幕 分 辨 率 相 等 ， 如 果 不 满足 ， 人 要 重新 
创建 一 个 适合 于 当前 分 Eo 。 创建 完毕 后 ， 
由 于 我 们 会 目 己 控制 该 变量 的 销毁， 因此 可 以 把 i 
HideFlags.HideAndDontSave， 这 意味 着 这 个 变量 不 会 显示 在 Hierarchy 

中 ， 也 不 会 保存 到 场景 中 。 然 后 ， 我 们 使 用 当前 的 帧 图 像 初 始 化 


accumulation Texture (使 用 Graphics.Blit(src, accumulationTexture) 代 


码 ) 。 


得 到 了 有 效 的 accumulationTexture 变 量 后 ， 我 们 调用 了 
accumulationTexture.Mark RestoreExpected 函 数 来 表明 我 们 需要 进行 一 个 
泻 染 纹理 的 恢复 操作 。 恢 复 操作 (restore operation) 发 生 在 泻 染 到 纹 
理 而 该 纹理 又 没有 被 提前 请 至 或 销毁 的 情况 下 。 在 本 例 中 ， 我 们 每 次 
调用 OnRenderImage 时 都 需要 把 当前 的 帧 图 像 和 accumulationTexture 中 
的 图 像 混合 ，accumulationTexture 纹 理 不 需要 提前 清空 ， 因 为 它 保 存 了 


我 们 之 前 的 混合 结 采 。 人 然后， 我们 将 参数 传递 给 材质 ， 并 调用 
Graphics.Blit (src, accumulationTexture, material) 把 当前 的 屏幕 图 像 src 释 
加 到 accumulationTexture 中 。 最 后 使 用 Graphics.Blit 
(accumulationTexture, desb 把 结果 显示 到 屏幕 上 。 


下 面 ， 我 们 来 实现 Shader 的 部 分 。 本 市 实现 的 运动 模糊 非常 简单 ， 
我 们 打开 Chapter12-MotionBlur， 进 行 如 下 修改 。 


(1) 我 们 首先 需要 声明 本 例 使 用 的 各 个 属性 : 


Properties { 
_MainTex ("Base (RGB)", 2D) = "white" {} 


_BlurAmount ("Blur Amount", Float) = 1.0 


} 


_MainTex 对 应 了 输入 的 演 染 纹理 。 BlurAmount 是 混合 图 像 时 使 用 
的 混合 系数 。 


(2) 在 本 节 中 ， 我 们 使 用 CGINCLUDE 来 组 织 代 码 。 我 们 在 
SubShader 块 中 利用 CGINCLUDE 和 ENDCG 语 义 来 定义 一 系列 代码 : 


SubShader { 
CGINCLUDE 


ENDCG 


(3) 声明 代码 中 需要 使 用 的 各 个 变量 : 


sampler2D _MainTex; 
fixed _BlurAmount; 


(4) 顶点 着 色 器 的 代码 与 之 前 章节 使 用 的 代码 完全 一 样 : 


struct v2f { 
float4 pos : SV_POSITION; 
half2 uv : TEXCOORDO; 


}; 


v2f vert(appdata img v) { 


v2f Oo; 
0.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


O.UV = VvV.texcoord; 


return o; 


(5) 下 面 ， 我 们 定义 了 两 个 片 元 着 色 器 ， nn 
的 RGB 通道 部 分 ， 另 一 个 用 于 更 新 演 染 纹理 的 A 通 


fixed4 fragRGB (v2f i) : SV_Target { 
return fixed4(tex2D(_MainTex, i.uv).rgb, _BlurAmount); 


half4 fragA (v2f i) : SV_Target { 
return tex2D(_MainTex, i.uv); 


RGB 通 道 版 本 的 Shader 对 当前 图 像 进 行 采样 ， 并 将 其 A 通道 的 值 设 
0 以 便 在 后 面 混 合 时 可 以 使 用 它 的 透明 通 i 人 行 兹 合 。 

通道 版 本 的 代码 就 更 简单 了 ， 直 接 返 回采 样 结 果 。 实 际 上 ， 这 个 版 本 
i 道 值 ， 不 让 其 受 ee 明 
度 值 的 影响 。 


(6) 然后 ， 我 们 定义 了 运动 模糊 所 需 的 Pass。 在 本 例 中 我 们 需要 
两 个 Pass， 一 个 用 于 更 新 泻 染 纹理 的 RGB 通 道 ， 另 一 个 用 于 更 新 A 通 
道 。 之 所 以 要 把 A 通道 和 RGB 通 道 分 开 ， ee 
设置 它 的 A 通 道 来 混合 图 像 ， 但 又 不 希望 A 通 道 的 值 写 入 演 染 弘 理 中 。 


ZTest Always Cull Off Zwrite Off 
Pass { 
Blend SrcAlpha OneMinusSrcAlpha 
ColorMask RGB 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment fragRGB 


ENDCG 
} 


Pass { 
Blend One Zero 
ColorMask A 


CGPROGRAM 


#pragma vertex vert 
#pragma fragment fragA 


ENDCG 


(7) 最 后 ， 我 们 关闭 了 Shader 的 Fallback: 


Fallback Off 


完成 后 返回 编辑 器 ， 并 把 Chapter12-MotionBlur 拖 上 忠 到 摄像 机 的 
MotionBlurcs 脚 本 中 的 motionBlurShader 参 数 中 。 当 然 ， 我 们 可 以 在 
MotionBlur.cs 的 脚本 面板 中 将 motionBlurShader 参 数 的 默认 值 设 置 为 
Chapter12-MotionBlur， 这 样 就 不 需要 以 后 使 用 时 每 次 都 手动 拖 上 忠 了 。 


本 市 是 对 运动 模糊 的 一 种 简单 实现 。 我 们 混合 了 连续 帧 之 间 的 图 
像 ， 这 样 得 到 一 张 具 有 模糊 拖 尾 的 图 像 。 然 而 ， 当 物体 运动 速度 过 快 
时 ， 这 种 方法 可 能 会 造成 单独 的 帧 图 像 变 得 可 见 。 在 第 13 章 中 ， 我 们 
会 学 习 如 何 利用 深度 纹理 重建 速度 来 模拟 运动 模糊 效果 。 


12.7 扩展 阅读 


本 章 介 绍 了 如 何在 Unity 中 利用 演 染 纹理 实现 屏幕 后 处 理 效 果 ， 并 

且 介 绍 了 几 种 常见 的 屏幕 特 殖 的 实现 方法 。 这 些 效 果 都 使 用 了 图 像 处 
理 中 的 一 些 算法 ， 以 达到 特定 的 图 像 效果 。 除 了 本 章 介 绍 的 这 些 效果 
外 ， 读 者 可 以 在 Unity 的 Image Effect 

(http://docs.unity3d.com/Manual/comp- ”ImageEffects.html) 包 中 找到 
更 多 特效 的 实现 。 在 GPU Gems 系 列 (https://developer.nvidia.com/ 
gpugems/GPUGems) 中 ， 也 介绍 了 许多 基于 图 像 处 理 的 泻 染 技术 。 例 
如 ，《GPU Gems 3》 的 第 27 章 ， 介 绍 了 一 种 景深 效果 的 实现 方法 。 除 
此 之 外 ， 读 者 也 可 以 在 Unity 的 资源 商店 和 其 他 网 络 资 源 中 找到 许多 出 
色 的 屏 介 特效。 


第 13 章 使 用 深度 和 法 线 纹理 


在 第 12 章 中 ， 我 们 学 习 的 屏幕 后 处 理 效 果 都 只 是 在 屏幕 颜色 图 像 
上 进行 各 种 操作 来 实现 的 。 然 而 ， 很 多 时 候 我 们 不 仅 需 要 当前 屏幕 的 
颜色 信息 ， 还 希望 得 到 深度 和 法 线 信息 。 例 如 ， 在 进行 边缘 检测 时 ， 
直接 利用 颜色 信息 会 使 检测 到 的 边缘 信息 受 物体 纹理 和 光照 等 外 部 因 
素 的 影响 ， 得 到 很 多 我 们 不 需要 的 边缘 点 。 一 种 更 好 的 方法 是 ， 我 们 
可 以 在 深度 纹理 和 法 线 纹理 上 进行 边缘 检测 ， 这 些 图 像 不 会 受 纹理 和 
光照 的 影 响 ， 而 仅仅 保存 了 当前 渔 染 物体 的 模型 信息 ， 通 过 这 样 的 方 
去 检测 出 来 的 边 绿 更 加 可 靠 。 


在 本 章 中 ， 我 们 将 学 习 如 何在 Unity 中 获取 深度 纹理 和 法 线 纹理 来 
实现 特定 的 屏幕 后 处 理 效 果 。 在 13.1T 中 ， 我 们 首先 会 学 习 如 何在 
Unity 中 获取 这 两 种 纹理 。 在 13.2 市 中 ， 我 们 会 利用 深度 纹理 来 计算 摄 
像 机 的 移动 速度 ， 实 现 摄 像 机 的 运动 模糊 效果 。 在 13.3 市 中 ， 我 们 会 学 
习 如 何 利 用 深度 纹理 来 重建 屏幕 像素 在 世界 空间 中 的 位 置 ， 从 而 模拟 
屏幕 筋 效 。13.4 玫 会 再 次 学 习 边 绿 检测 的 另 一 种 实现 ， 即 利用 深度 和 法 
线 纹理 进行 边缘 检测 。 


13.1 获取 深度 和 法 线 纹理 


虽然 在 Unity 里 获取 深度 和 法 线 纹理 的 代码 非常 简单 ， 但 是 我 们 有 
必要 在 这 之 前 首先 了 解 它 们 背后 的 实现 原理 。 


13.1.1 背后 的 原理 


深度 纹理 实际 就 是 一 张 泻 染 纹 理 ， 只 不 过 它 里 面 存储 的 像素 值 不 
是 颜色 值 ， 而 是 一 个 高 精度 的 深度 值 。 由 于 被 存储 在 一 张 纹 理 中 ， 深 
度 纹 理 里 的 深度 值 范 围 是 [0, 1]， 而 且 通 常 是 非 线 性 分 布 的 。 那 么 ， 这 
些 深度 值 是 从 哪里 得 到 的 呢 ? 要 回答 这 个 问题 ， 我 们 需要 回顾 在 第 4 章 
学 过 的 顶点 变换 的 过 程 。 总 体 来 说 ， 这 些 深度 值 来 自 于 顶点 变换 后 得 
到 的 归 一 化 的 设备 坐标 (Normalized Device Coordinates ，NDC) 。 回 
顾 一 下 ， 一 个 模型 要 想 最终 被 绘制 在 屏幕 上 ， 需 要 把 它 的 顶点 从 模型 
空间 变换 到 齐 次 裁 交 坐标 系 下 ， 这 是 通过 在 顶点 大 色 右 中 乘 以 MVP 变 
换 和 矩阵 得 到 的 。 在 变换 的 最 后 一 步 ， 我 们 需要 使 用 一 个 投影 算 阵 来 变 
换 顶 忠 ， 当 我 们 使 用 的 是 透视 投影 类 型 的 摄像 机 时 ， 这 个 投影 矩阵 束 
是 非 线性 的 ， 具 体 过 程 可 回顾 4.6.7 小 入。 


图 13.1 显 示 了 4.6.7 小 节 中 给 出 的 Unity 中 透视 投影 对 顶点 的 变换 过 
程 。 图 13.1 中 最 左 侧 的 图 显示 了 投影 变换 前 ， 即 观察 空间 下 视 锥 体 的 结 
构 及 相应 的 顶点 位 置 ， 中 间 的 图 显示 了 应 用 透视 裁剪 矩阵 后 的 变换 结 
果 ， 即 顶点 着 色 器 阶段 输出 的 顶点 变换 结果 ， 最 右 侧 的 图 则 是 底层 硬 
件 进行 了 透视 除法 后 得 到 的 归 一 化 的 设备 坐标 。 需 要 注意 的 是 ， 这 里 
的 投影 过 程 是 建立 在 Unity 对 坐标 系 的 假定 上 的 ， 也 就 是 说 ， 我 们 针对 
的 是 观察 空间 为 右手 坐标 系 ， 使 用 列 和 矩阵 在 矩阵 右 侧 进行 相 乘 ， 且 变 
换 到 NDC 后 z 分 量 范围 将 在 [-1, 1] 之 间 的 情况 。 而 在 类 似 DirectX 这 样 的 
图 形 接口 中 ， 变 换 后 z 分 量 范 围 将 在 [0, 1] 之 间 。 如 果 需 要 在 其 他 图 形 接 
口 下 实现 本 章 的 类 似 效果 ， 需 要 对 一 些 计 算 参 数 做 出 相应 变化 。 关 于 
变换 时 使 用 的 矩阵 运算 ， 读 者 可 以 参考 4.6.7 小 方 。 


7 x = farClipPlaneWidth /2 
x = -farClipPlaneWidth / 2 y=farclipPlaneHeight/ 2 
y = -farClipPlaneHeight / 2 z= -F 

z=-Far 昌 王 1 
w=1 
载 剪 矩 阵 透视 除法 


x= -nearClipPlaneWidth /2 
y= -nearClipPlaneHeight /2 
w=1 


arClipPlaneWidth / 2 
earCipPlan neHeight / 2 


w= 1 


图 13.1 在 透视 投影 中 ， 投 影 矩 阵 首先 对 顶点 进行 了 缩放 。 和 和 双 过 齐 次 除法 后 ， 透 视 投 影 的 裁 
剪 空间 会 变换 到 一 个 立方 体 。 图 中 标注 了 4 个 关键 点 经 过 投影 矩阵 变换 后 的 结果 


区 


图 13.2 显 示 了 在 使 用 正 交 摄像 机 时 投影 变换 的 过 程 。 同 样 ， 变 换 后 
会 得 到 一 个 范围 为 [-1, 1] 的 立方 体 。 正 交 投影 使 用 的 变换 矩阵 是 线性 
的 。 


farClipPlaneWidth / 2 
ya PIHeighi/ 2 


W = 人 


~ Xx = farCli 
y = farClipPianeHeight / 2 


ewWidth /2 
tht 


W = A 


Xe noarClipPlaneWidth /2 
y = nearClipPlaneHeight / 2 
z= -Near 


w=1 


图 13.2 在 正 交 投 影 中 ， 投 影 矩 阵 对 顶点 进行 了 缩放 。 在 经 过 齐 次 除法 后 ， 正 区 投影 的 裁剪 空 
间 会 变换 到 一 个 立方 体 。 图 中 标注 了 4 个 关键 点 经 过 投影 矩阵 变换 后 的 结果 


> 


在 得 到 NDC 后 ， 深 度 纹理 中 的 像素 值 束 可 以 很 方便 地 计算 得 到 
文 此 


了 ， 这 些 深度 值 就 对 应 了 NDC 中 顶点 坐标 的 z 分 量 的 值 。 由 于 NDC 中 z 


分 量 的 范围 在 [-1 1]， 为 了 让 这 些 值 能 够 存储 在 一 张 图 像 中 ， 我 们 需要 
使 用 下 面 的 公式 对 其 进行 映 册 : 


d=0.5.z +0.5 


其 中 ，d 对 应 了 深度 纹理 中 的 像素 值 ，znae 对 应 了 NDC 坐 标 中 的 z 分 
量 的 值 。 


那么 Unity 是 怎么 得 到 这 样 一 张 深 度 纹理 的 呢 ? 在 Unity 中 ， 深 度 纹 
理 可 以 直接 来 自 于 真正 的 深度 缓存 ， 也 可 以 是 由 一 个 单独 的 Pass 泻 染 而 
得 ， 这 取决 于 使 用 的 泻 染 路 径 和 人 硬件。 通常 来 讲 ， 当 使 用 延迟 泻 染 路 
径 (包括 遗留 的 延迟 演 染 路 径 ) 时 ， 深 度 纹理 理所当然 可 以 访问 到 ， 
因为 延迟 渲染 会 把 这 些 信息 泻 染 到 G-buffer 中 。 而 当 无 法 直接 获取 深度 
缓存 时 ， 深 度 和 法 线 纹理 是 通过 一 个 单独 的 Pass 演 染 而 得 的 。 具 体 实现 
是 ，Unity 会 使 用 着 色 器 替换 (Shader Replacement) 技术 选择 那些 泻 染 
类 型 〈 即 SubShader 的 RenderType 标 签 ) 为 Opaque 的 物体 ， 判 断 它 们 使 
用 的 泻 染 队列 是 否 小 于 等 于 2 500 (内 置 的 Background、Geometry 和 
AlphaTest 泻 染 队 列 均 在 此 范围 内 ) ， 如 果 满 足 条 件 ， 就 把 它 泻 染 到 深 
度 和 法 线 纹理 中 。 因 此 ， 要 想 让 物体 能 够 出 现在 深度 和 法 线 纹理 中 ， 
就 必须 在 Shader 中 设置 正确 的 RenderType 标 签 。 


在 Unity 中 ， 我 们 可 以 选择 让 一 个 摄像 机 生成 一 张 深度 纹理 或 是 一 
张 深度 + 法 线 纹理 。 当 选择 前 者 ， 即 只 需要 一 张 单独 的 深度 纹理 时 ， 
Unity 会 直接 获取 深度 缓存 或 是 按 之 前 讲 到 的 着 色 器 替换 技术 ， 选 取 需 
要 的 不 透明 物体 ， 并 使 用 它 投 射 阴影 时 使 用 的 Pass ( 即 LightMode 被 设 
置 为 ShadowCaster 的 Pass， 详 见 9.4 节 ) 来 得 到 深度 纹理 。 如 果 Shader 中 
不 包含 这 样 一 个 Pass， 那 么 这 个 物体 就 不 会 出 现在 深度 纹理 中 (当然 ， 


它 也 不 能 向 其 他 物体 投射 阴影 ) 。 深 度 纹 理 的 精度 通常 是 24 位 或 16 
位 ， 这 取决 于 使 用 的 深度 缓存 的 精度 。 如 果 选 择 生 成 一 张 深度 + 法 线 纹 
理 ，Unity 会 创建 一 张 和 屏 幕 分 辨 率 相 同 、 精 度 为 32 位 (每 个 通道 为 8 
位 ) 的 纹理 ， 其 中 观察 空间 下 的 法 线 信息 会 被 编码 进 纹 理 的 R 和 G 通 
道 ， 而 深度 信息 会 被 编码 进 B 和 A 通 道 。 法 线 信息 的 获取 在 延迟 深 染 中 
是 可 以 非常 容易 就 得 到 的 ，Unity 只 需要 合并 深度 和 法 线 缓存 即 可 。 而 
在 前 辣 泻 染 中 ， 默 认 情 况 下 是 不 会 创建 法 线 缓存 的 ， 因 此 Unity 底 层 使 
用 了 一 个 单独 的 Pass 把 整个 场景 再 次 演 染 一 所 来 完成 。 这 个 Pass 被 包含 
在 Unity 内 置 的 一 个 Unity Shader 中 ， 我 们 可 以 在 内 置 的 builtin_shaders- 
xxx/DefaultResources/Camera-DepthNormalTexture.shader 文 件 中 找到 这 
个 用 于 泻 染 深度 和 法 线 信息 的 Pass 。 


13.1.2 如 何 获 取 


在 Unity 中 ， 获 取 深 度 纹理 是 非常 简单 的 ， 我 们 只 需要 告诉 
Unity: “ 嘿 ， 把 深度 纹理 给 我 ! ”然后 再 在 Shader 中 直接 访问 特定 的 纹 
理 属 性 即 可 。 这 个 与 Unity 沟 通 的 过 程 是 通过 在 脚本 中 设置 摄像 机 的 
depthTextureMode 来 完成 的 ， 例 如 我 们 可 以 通过 下 面 的 代码 来 获取 深度 
纹理 : 


一 旦 设置 好 了 了 上面 的 摄像 机 模式 后 ， 我 们 就 可 以 在 Shader 中 通过 声 
明 _CameraDepthTexture 变 量 来 访问 它 。 这 个 过 程 非 常 简单 ， 但 我 们 需 
要 知道 这 两 行 代 码 的 背后 ，Unity 为 我 们 做 了 许多 工作 ( 见 13.1.1 节 ) 


同 理 ， 如 果 想 要 获取 深度 + 法 线 纹理 ， 我 们 只 需要 在 代码 中 这 样 设 
置 : 


camera.depthTextureMode = DepthTextureMode.DepthNormals,; 


然后 在 Shader 中 通过 声明 _CameraDepthNormalsTexture 变 量 来 访问 


[CS 


我 们 还 可 以 组 合 这 些 模式 ， 让 一 个 摄像 机 同时 产生 一 张 深度 和 深 
度 + 法 线 纹理 


camera.depthTextureMode |= DepthTextureMode.DepthNormals; 

在 Unity 5 中 ， 我 们 还 可 以 在 摄像 机 的 Camera 组 件 上 看 到 当前 摄像 
机 是 否 需要 演 染 深度 或 深度 + 法 线 纹理 。 当 在 Shader 中 访问 到 深度 纹理 
_CameraDepthTexture 后 ， 我 们 就 可 以 使 用 当前 像素 的 纹理 坐标 对 它 进 
行 采 样 。 绝 大 多 数 情 况 下 ， 我 们 直接 使 用 tex2D 函 数 采 样 即 可 ， 但 在 某 
些 平 台 (例如 PS3 和 PSP2) 上 ， 我 们 需要 一 些 特殊 处 理 。Unity 为 我 们 
提供 了 一 个 统一 的 宏 SAMPLE_DEPTH_TEXTURE， 用 来 处 理 这 些 由 于 
平台 差异 造成 的 问题 。 而 我 们 只 需要 在 Shader 中 使 用 


井 行 采 


SAMPLE _DEPTH TEXTURE 宏 对 深度 纹理 进行 采样 ， 例 如 : 


float d = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv); 


其 中 ，iuv 是 一 个 float2 类 型 的 变量 ， 对 应 了 当前 像素 的 纹理 坐标 。 
类 似 的 宏 还 有 SAMPLEDEPTH_TEXTURE_PROJ 和 
SAMPLE_DEPTH_TEXTURE_LOD ° SAMPLE_DEPTH TEXTURE_PROJ 
宏 同 样 接 受 两 个 参数 一 深度 纹理 和 一 个 float3 或 float4 类 型 的 纹理 坐标 ， 
它 的 内 部 使 用 了 tex2Dproj 这 样 的 函数 进行 投影 纹理 采样 ， 纹 理 坐 标的 

前 两 个 分 量 首 和 完 会 除 以 最 后 一 个 分 量 ， 再 进行 纹理 采样 。 如 采 提 供 了 
第 四 个 分 量 ， 还 会 进行 一 次 比较 ， 通常 用 于 阴 曙 多 的 实现 中 。 


SAMPLE_DEPTH TEXTURE _PROJ 的 第 二 个 参数 通常 是 由 顶点 着 色 器 
输出 插值 而 得 的 屏幕 坐标 ， 例 如 : 


float d = SAMPLE_DEPTH_TEXTURE_PROJ(_CameraDepthTexture, 


UNITY_PROJ_COORD(i.scrPos)); 


其 中 ，i.scrPos 是 在 顶点 着 色 絮 中 通过 调用 ComputeScreenPos(o0.pos) 
得 到 的 屏幕 坐标 。 上 述 这 些 安 的 定义 ， 读 者 可 以 在 Unity 内 置 的 
HLSLSupport.cginc 文 件 中 找到 。 


当 通 过 纹理 采样 得 到 深度 值 后 ， 这 些 深度 值 往往 是 非 线性 的 ， 这 
种 非 线性 来 自 于 透视 投影 使 用 的 裁剪 矩阵 。 然 而 ， 在 我 们 的 计算 过 程 
中 通常 是 需要 线性 的 深度 值 ， 也 束 是 说 ， 我 们 需要 把 投影 后 的 深度 值 
变换 到 线性 空间 下 ， 例 如 视角 空间 下 的 深度 值 。 那 么 ， 我 们 应 该 如 何 
进行 这 个 转换 昵 ? 实际 上 ， 我 们 只 需要 倒 推 顶点 变换 的 过 程 即 可 。 下 
面 我 们 以 透视 投影 为 例 ， 推 导 如 何 由 深度 纹理 中 的 深度 信息 计算 得 到 
视角 空间 下 的 深度 值 。 


由 4.6.7 节 可 知 ， 当 我 们 使 用 透视 投影 的 裁剪 矩阵 Ps 对 视角 空间 下 
的 一 个 顶点 进行 变换 后 ， 和 裁剪 空间 下 项 点 的 z? 和 w 分 量 为 


Far 十 Near 2:Near: Far 
Fs 一 一 7 一 一 一 一 一 
chip ViewpFpar—Near Far— Near 


Welip = 一 Zpiew 


其 中 ，Far 和 Near 分 别 是 远近 裁剪 平面 的 距离 。 然 后 ， 我 们 通过 齐 
次 除法 就 可 以 得 到 NDC 下 的 z 分 量 


Zclip _ Far + Near 2:Near: Far 


Z，， 二 ee 
ne Wow Far—Near (Far— Near)': Zview 


在 13.1.1 节 中 我 们 知道 ， 深 度 纹理 中 的 深度 值 是 通过 下 面 的 公式 由 
NDC 计 算 而 得 的 : 


d =0.5.z +0.5 


由 上 面 的 这 些 式 子 ， 我 们 可 以 推导 出 用 gd 表示 而 得 的 zyiow 的 表达 


起 : 
加 | 
Zview 一 Far — Near 1 
Near : Far Near 


由 于 在 Unity 使 用 的 视角 空间 中 ， 摄 像 机 正 癌 对 应 的 z 值 均 为 负 值 ， 
因此 为 了 得 到 深度 值 的 正 数 表 示 ， 我 们 需要 对 上 面 的 结果 取 反 ， 最 后 
得 到 的 结果 如 下 : 


， 1 
Zview 一 Near 二 Far ) 网 1 
Near .Far Near 


它 的 取 值 范围 束 是 视 锥 体 深度 范围 ， 即 [Near, Far]。 如 有 果 我 们 想 得 
到 范围 在 [0, 1] 之 间 的 深度 值 ， 只 需要 把 上 面 得 到 的 结果 除 以 Far 旭 可 。 


这 样 ，0 束 表示 该 点 与 摄像 机 位 于 同一 位 置 ，1 表 示 该 点 位 于 视 维 体 的 
远 裁 甬 平 面 上 。 结 采 如 下 : 
1 


01 Near — Far Far 
Near Near 


Z 


焉 运 的 是 ，Unity 提 供 了 两 个 辅助 久 数 来 为 我 们 进行 上 述 的 计算 过 
程 一 LinearEyeDepth 和 Linear01Depth。LinearEyeDepth 人 负责 把 深度 纹理 
的 采样 结果 转换 到 视角 空间 下 的 深度 值 ， 也 就 是 我 们 上 面 得 到 的 view 。 
Dn 回 一 个 范围 在 [0，1] 的 线性 深度 值 ， 也 就 是 我 们 
上 面 得 到 的 z01。 这 两 个 钞 数 内 部 使 用 了 内 置 的 _ZBufferParams 变 量 米 得 
到 远近 裁 草 平面 的 距离 。 


如 果 我 们 需要 获取 深度 + 法 线 纹理 ， 可 以 直接 使 用 tex2D 函 数 对 
i 采样 ， 得 到 ee 的 深度 和 法 线 信 
。Unity 提 供 了 辅助 画 数 来 为 我 们 对 这 个 采样 结果 进行 解码 ， 从 而 得 
到 深度 值 和 法 线 方 同 。 ee 它 在 
UnityCG.cginc 里 被 定义 : 


inline void DecodeDepthNormal( float4 enc, out float depth, out 
float3 normal ) 


depth = DecodeFloatRG (enc ,zw) ; 
normal = DecodeViewNormalStereo (enc); 


DecodeDepthNormal 的 第 一 个 参数 是 对 深度 + 法 线 纹理 的 采样 结 
果 ， 这 个 采样 结果 是 Unity 对 深度 和 法 线 信 息 编码 后 的 结果 ， 它 的 xy 分 
量 存储 的 是 视角 空间 下 的 法 线 信息 ， 而 深度 信息 被 编码 进 了 zw 分 量 。 
通过 调用 DecodeDepthNormal 函 数 对 采样 结果 解码 后 ， 我 们 就 可 以 得 到 


解码 后 的 深度 值 和 法 线 。 这 个 深度 值 是 范围 在 [0, 1] 的 线性 深度 值 (这 
与 单独 的 深度 纹理 中 存储 的 深度 值 不 同 ) ， 而 得 到 的 法 线 则 是 视角 空 
则 下 的 法 线 方 同 。 同 样 ， 我 们 也 可 以 通过 调用 DecodeFloatRG 和 

DecodeViewNormalStereo 来 解码 深度 + 法 线 纹理 中 的 深度 和 法 线 信 息 。 


至 此 ， 我 们 已 经 学 会 了 如 何在 Unity 里 获取 及 使 用 深度 和 法 线 纹 
理 。 下 面 ， 我 们 会 学 习 如 何 使 用 它们 实现 各 种 屏幕 特效 。 


13.1.3 查看 深度 和 法 线 纹理 


很 多 时 候 ， 我 们 希望 可 以 查看 生成 的 深度 和 法 线 纹理 ， 以 便 对 
Shader 进 行 调试 。Unity 5 提供 了 一 个 方便 的 方法 来 查看 摄像 机 生成 的 深 
度 和 法 线 纹理 ， 这 个 方法 就 是 利用 帧 调试 器 (Frame Debugger) 。 图 
13.3 显 示 了 使 用 帧 调试 器 得 看 到 的 深度 纹理 和 深度 + 法 线 纹理 。 


全 


图 13.3 使 用 Frame Debugger 查 看 深度 纹理 ( 左 ) 和 深度 + 法 线 纹理 ( 右 ) 。 如 果 当 前 摄像 机 
需要 生成 深度 和 法 线 纹 理 ， 帧 调试 器 的 面板 中 束 会 出 现 相应 的 浑 染 事 件 。 只 要 单 击 对 应 的 事件 
就 可 以 查看 得 到 的 深度 和 法 线 纹理 


使 用 帧 调试 器 查看 到 的 深度 纹理 是 非 线性 空间 的 深度 值 ， 而 深度 
+ 法 线 纹理 都 是 由 Unity 编 码 后 的 结案 。 有 了 时， 显示 出 线性 空间 下 的 深度 


言 恩 或 解码 后 的 法 线 方向 会 更 加 有 用 。 此 时 ， 我 们 可 以 自行 在 片 元 着 
色 器 中 输出 转换 或 解码 后 的 深度 和 法 线 值 ， 如 图 13.4 所 示 。 输 出 代码 非 
常 人 简单， 我 们 可 以 使 用 类 似 下 面 的 代码 来 输出 线性 深度 值 : 


float depth = SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i.uv); 
float linearDepth = Linear01Depth(depth ) ; 


return fixed4(linearDepth, linearDepth, linearDepth, 1.0); 
或 是 输出 法 线 方向 : 


fixed3 normal = 
DecodeViewNormalStereo(tex2D(_CameraDepthNormalsTexture, i.uv).xy); 


return fixed4(normal * 0.5 + 0.5, 1.0) 


在 查看 深度 纹理 时 ， 读 者 得 到 的 画面 有 可 能 儿 乎 是 全 黑 或 全 日 
的 。 这 时 候 读者 可 以 把 摄像 机 的 远 裁 冯 平 面 的 距离 (Unity 默 认为 1 
000) 调 小 ， 使 视 锥 体 的 范围 刚好 覆盖 场景 的 所 在 区 域 。 这 是 因为 ， 由 
于 投影 变换 时 需要 履 盖 从 近 裁 剪 平 面 到 远 裁 级 平面 的 所 有 深度 区 域 ， 
当 远 裁 盈 平面 的 距离 过 大 时 ， 会 导致 离 摄 像 机 较 近 的 距离 被 映 册 到 非 
常 小 的 深度 值 ， 如 有 果 场 景 是 一 个 封闭 的 区 域 (如 图 13.4 所 示 ) ， 那 么 这 
束 会 导致 画面 看 起 来 几乎 是 全 黑 的 。 相 反 ， 如 琳 场 景 古 一 个 开放 区 
域 , 旦 物体 离 摄像 机 的 距离 较 远 ， 丈 会 导致 画面 几乎 是 全 日 的 。 


图 13.4 左边 : 线性 空间 下 的 深度 纹理 。 右 边 : 解码 后 并 且 被 映射 到 [0, 1] 范 围 内 的 视角 空间 下 


p> 


的 法 线 纹理 
13.2 再 谈 运 动 模糊 


在 12.6 节 中 ， 我 们 学 习 了 如 何 通 过 混合 多 张 屏幕 图 像 来 模拟 运动 模 
糊 的 效果 。 但 是 ， 另 一 种 应 用 更 加 广泛 的 技术 则 是 使 用 速度 映射 图 。 
速度 映射 图 中 存储 了 每 个 像素 的 速度 ， 然 后 使 用 这 个 速度 来 决定 模糊 
的 方向 和 大 小 。 速 度 缓冲 的 生成 有 多 种 方法 ， 一 种 方法 是 把 场景 中 所 
有 物体 的 速度 泻 染 到 一 张 纹 理 中 。 但 这 种 方法 的 缺点 在 于 需要 修改 场 
景 中 所 有 物体 的 Shader 代 码 ， 使 其 添加 计算 速度 的 代码 并 输出 到 一 个 泻 
染 纹 理 中 。 


《GPU Gems3》 在 第 27 章 
(http://http.developer.nvidia.com/GPUGems3/gpugems3_ch27.html) 中 介 
绍 了 一 种 生成 速度 映射 图 的 方法 。 这 种 方法 利用 深度 纹理 在 片 元 着 色 
器 中 为 每 个 像素 计算 其 在 世界 空间 下 的 位 置 ， 这 是 通过 使 用 当前 的 视 
角 玲 感 往 隆 所 他 箔 族 XJNDC 入 的 大 斌 能 环 进行 要 获得 到 的 。 当 得 到 此 


詹 鱼 司 中 的 大 所 坐 床 后， 我 们 刘 用 询 一 般 的 珊 骨 投影 矩阵 对 其 进行 变 
换 ， 得 到 该 位 置 在 前 一 帧 中 的 NDC 坐 标 。 然 后 ， 我 们 计算 前 一 帧 和 当 
前 帧 的 位 置 莽 ， 生 成 该 像素 的 速度 。 这 种 方法 的 优点 是 可 以 在 一 个 屏 
幕后 处 理 步 又 中 完成 整个 效果 的 模拟 ， 但 缺点 是 需要 在 片 元 着 色 器 中 
进行 两 次 窍 阵 乘法 的 操作 ， 对 性 能 有 所 影响 。 


为 了 使 用 深度 纹理 模拟 运动 模糊 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene_13_2。 在 
Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 使 
用 了 内 置 的 天 空 盒子 。 在 Window ~” Lighting ~” Skybox 中 去 掉 场 景 中 的 


天 空 盒子 。 


(2) 我 们 需要 搭建 一 个 测试 运动 模糊 的 场景 。 在 本 书 资源 的 实现 
中 ， 我 们 构建 了 一 个 包含 3 面 墙 的 房间 ， 并 放置 了 4 个 立方 体 ， 它 们 都 
使 用 了 我 们 在 9.5 节 中 创建 的 标准 材质 。 同 时 ， 我 们 把 本 书 资源 中 的 
Translating.cs 脚 本 拖 暇 给 摄像 机 ， 让 其 在 场景 中 不 断 运 动 。 


(3) 新 建 一 个 脚本 。 在 本 书 资源 中 ， 该 脚本 名 为 
MotionBlurWithDepthTexture.cs。 把 该 脚本 拖 息 到 摄像 机 上 。 


(4) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter13-MotionBlurWithDepthTexture ° 


我 们 首先 来 编写 MotionBlurWithDepthTexture.cs 肢 本。 打开 该 脚 
本 ， 并 进行 如 下 修改 。 


(1) 首先 ， 继 承 12.1 节 中 创建 的 基 类 : 


(2) 声明 该 效果 需要 的 Shader， 并 据 此 创建 相应 的 材质 : 


public Shader motionBlurShader ; 
private Material motionBlurMaterial = null; 
public Material material { 
get { 
motionBlurMaterial = 


CheckShaderAndCreateMaterial(motionBlurShader, motionBlurMaterial); 
return motionBlurMaterial; 


(3) 定义 运动 模糊 时 模糊 图 像 使 用 的 大 小 : 


[Range(0.0f, 1.0f)] 
public float blurSize = 0.5f; 


(4) 由 于 本 市 需要 得 到 摄像 机 的 视角 和 投影 矩阵 ， 我 们 需要 定义 
一 个 Camera 类 型 的 变量 ， 以 获取 该 脚本 所 在 的 摄像 机 组 件 : 


private Camera myCamera,; 
public Camera camera { 
get { 
If (myCamera == null) { 
myCamera = GetComponent<Camera>(); 


return myCamera; 


(5) 我 们 还 需要 定义 一 个 变量 来 保存 上 一 帧 摄像 机 的 视角 * 投 影 
短 阵 : 


private Matrix4x4 previousViewProjectionMatrix; 


(6) 由 于 本 例 需 要 获取 摄像 机 的 深度 纹理 ， 我 们 在 脚本 的 
OnEnable 函 数 中 设置 摄像 机 的 状态 : 


void OnEnable() { 
camera.depthTextureMode |= DepthTextureMode.Depth; 
} 


(7) 最 后 ， 我 们 实现 了 OnRenderImage 范 数 : 


void OnRenderImage (RenderTexture src, RenderTexture dest) { 
If (material != null) { 
material.SetFloat("_BlurSize", blurSize); 
material.SetMatrix("_PreviousViewProjectionMatrix", 
previousViewProjectionMatrix ); 
Matrix4x4 currentViewProjectionMatrix = 
camera.projectionMatrix * camera.worldToCameraMatrix; 
Matrix4x4 currentViewProjectionInverseMatrix = 
currentViewProjectionMatrix.inverse,; 


material.SetMatrix("_CurrentViewProjectionInverseMatrix", 
currentViewProjectionInverseMatrix); 
previousViewProjectionMatrix = currentViewProjectionMatrix; 
Graphics.Blit (src, dest, material); 
} else { 


Graphics.Blit(src, dest); 
} 


上 面 的 OnRenderImage 函 数 很 简单 ， 我 们 首先 需要 计算 和 传递 运动 
模糊 使 用 的 各 个 属性 。 本 例 需要 使 用 两 个 变换 矩阵 一 前 一 帧 的 视角 克 
裴 秃 阶 以 用 当 扎 航 的 矿 朱 投 影 矩 阵 的 刘 和 矩 阵 。 因 此 ， 我 们 通过 调用 
camera.worldToCameraMatrix 和 camera.projectionMatrix 来 分 别 得 到 当前 
摄像 机 的 视角 矩阵 和 投影 窟 孟 。 对 它们 相 乘 后 取 赤 ， 得 到 当前 帧 的 视 
角 * 投 影 矩 孟 的 逆 矩 阵 ， 并 传递 给 材质 。 然 后 ， 我 们 把 取 逆 前 的 结 采 存 
储 在 previousViewProjectionMatrix 变 量 中 ， 以 便 在 下 一 帧 时 传递 给 材质 
的 _PreviousViewProjectionMatrix 属 性 。 


下 面 ， 我 们 来 实现 Shader 的 部 分 。 打 开 Chapter13- 
MotionBlurWithDepthTexture， 进 行 如 下 修改 。 


(1) 我 们 首先 需要 声明 本 例 使 用 的 各 个 属性 : 


Properties { 
_MainTex ("Base (RGB)", 2D) = "white" {} 


_BlurSize ("Blur Size", Float) = 1.0 


} 


_MainTex 对 应 了 输入 的 泻 染 纹理 ，_BlurSize 是 模糊 图 像 时 使 用 的 
参数 。 我 们 注意 到 ， 虽 然 在 脚本 里 设置 了 材质 的 
_PreviousViewProjectionMatrix 和 _CurrentViewProjectionInverseMatrix 属 
性 ， 但 并 没有 在 Properties 块 中 声明 它们 。 这 是 因为 Unity 没 有 提供 拓 阵 
类 型 的 属性 ， 但 我 们 仍然 可 以 在 CG 代码 块 中 定义 这 些 和 矩阵 ， 并 从 脚本 
中 设置 它们 。 


(2) 在 本 节 中 ， 我 们 使 用 CGINCLUDE 来 组 织 代 码 。 我 们 在 
SubShader 块 中 利用 CGINCLUDE 和 ENDCG 语 义 来 定义 一 系列 代码 : 


SubShader { 
CGINCLUDE 


ENDCG 


(3) 声明 代码 中 需要 使 用 的 各 个 变量 : 


sampler2D _MainTex; 
half4 _MainTex_TexelSize; 
sampler2D _CameraDepthTexture; 


float4x4 _CurrentViewProjectionInverseMatrix; 
float4x4 _PreviousViewProjectionMatrix; 
half _BlurSize; 


在 上 面 的 代码 中 ， 除 了 定义 在 Properties 声 明 的 _MainTex 和 
_BlurSize 属 性 ， 我 们 还 声明 了 其 他 三 个 变量 。 CameraDepthTexture 是 
Unity 传 递 给 我 们 的 深度 纹理 ， 而 _CurrentViewProjectionInverseMatrix 和 
_PreviousViewProjectionMatrix 是 由 脚本 传递 而 来 的 矩阵 。 除 此 之 外 ， 
我 们 还 声明 了 _MainTex_TexelSize 变 量 ， 它 对 应 了 主 纹理 的 纹 素 大 小 ， 
我 们 需要 使 用 该 变量 来 对 深度 纹理 的 采样 坐标 进行 平台 差异 化 处 理 

( 详 见 5.6.1 节 ) 。 


(4) 顶点 着 色 器 的 代码 和 之 前 使 用 多 次 的 代码 基本 一 致 ， 只 是 增 
加 了 专门 用 于 对 深度 纹理 采样 的 纹理 坐标 变量 : 


struct v2f { 
float4 pos : SV_POSITION; 
half2 uv : TEXCOORDO; 
half2 uv_depth : TEXCOORD1; 


}; 
v2f vert(appdata img v) { 
v2f Oo; 
0.pos = mul(UNITY_MATRIX_MVP, v.vertex); 
O.UV = VvV.texcoord; 
oOo.Uv_depth = v.texcoord; 
#if UNITY_UV_STARTS_AT_TOP 
if (_MainTex_TexelSize.y < 0) 
oOo.Uuv_depth.y = 1 - o.uv_depth.y; 
#endif 
return o; 


由 于 在 本 例 中 ， 我 们 需要 同时 处 理 多 张 泻 染 纹理 ， 因 此 在 DirectX 
这 样 的 平台 上 ， 我 们 需要 处 理 平台 差异 导致 的 图 像 翻 转 问 题 。 在 上 面 
的 代码 中 ， 我 们 对 深度 纹理 的 采样 坐标 进行 了 平台 差异 化 处 理 ， 以 便 
在 类 似 DirectX 的 平台 上 ， 在 开局 了 抗 锯 次 的 情况 下 仍然 可 以 得 到 正确 
的 结果 。 


(5) 片 元 着 色 器 是 算法 的 重点 所 在 : 


fixed4 frag(v2f i) : SV_Target { 

// Get the depth buffer value at this pixel. 

float d = SAMPLE_ DEPTH_TEXTURE(_CameraDepthTexture, 
i.uv_depth); 

// H is the viewport position at this pixel in the range -1 to 


float4 H = float4(i.uv.x*2-1, i.uvy*2-1,d*2-1, 


// Transform by the view-projection inverse. 

float4 D = mul(_CurrentViewProjectionInverseMatrix, H); 

// Divide by w to get the world position. 

float4 worldPos = D / D.w; 

// Current viewport position 

float4 currentPos = H; 

// Use the world position, and transform by the previous view- 
projection matrix. 

float4 previousPos = mul(_PreviousViewProjectionMatrix, 
worldPos ) ; 

// Convert to nonhomogeneous points [-1,1] by dividing by w. 

previousPos /= previousPos.w; 

// Use this frame's position and last frame's to compute the 
pixel velocity. 

float2 velocity = (currentPos.xy - previousPos.xy)/2.0f; 

float2 uv = i.uv; 

float4 c = tex2D(_MainTex, uv); 

UV += Velocity * _BlurSize; 

for (int it = 1; it < 3; it++, uv += Velocity * _BlurSize) { 

float4 currentColor = tex2D(_MainTex, uv); 
C += currentColor; 

} 

c /= 3; 

return fixed4(c.rgb, 1.0); 


我 们 首先 需要 利用 深度 纹理 和 当前 帧 的 视角 区 能 敌阵 的 说 舌 阵 夹 
习 得 该 借 辫 在 由 得 空间 下 的 名 斌 。 巡 得 开 努 天 对 深度 纹理 的 素 桩 ， 我 
位 使 历 内 加 ISAMPLE_DEPTH_TEXTURE 安 和 纹理 华 祭 对 深度 纹理 进 
行 严 桩 ， 得 到 了 深度 导 d。 由 13.1.2 节 可 知 ，d 是 由 NDC 下 的 坐标 映射 而 
来 的 。 我 们 想 要 构建 像素 的 NDC 坐 标 H， 就 需要 把 这 个 深度 值 重 新 映射 
回 NDC。 这 个 映射 很 简单 ， 只 需要 使 用 原 映 射 的 反 函 数 即 可 ， 即 d 2 - 
1。 同 样 ，NDC 的 xy 分 量 可 以 由 像素 的 纹理 坐标 映射 而 来 (NDC 下 的 
xyz 分 量 范围 均 为 [-1, 1]) 。 当 得 到 NDC 下 的 坐标 HH 后 ， 我 们 就 可 以 使 用 


当前 帆 的 视角 * 投 有 影 矩 阵 的 敢 窍 阵 对 其 进行 变换 ， 并 把 结果 值 除 以 它 的 
分 量 来 得 到 世界 空间 下 的 坐标 表示 worldPos 。 


一 旦 得 到 了 世界 空间 下 的 坐标 ， 我 们 就 可 以 使 用 前 一 帧 的 视角 * 投 
影 矩 阵 对 它 进 行 变 换 ， 得 到 前 一 帧 在 NDC 下 的 坐标 previousPos。 然 
后 ， 我 们 计算 前 一 帧 和 当前 帧 在 屏幕 空间 下 的 位 置 差 ， 得 到 该 像素 的 

速度 velocity 。 


当 得 到 该 像素 的 速度 后 ， 我 们 就 可 以 使 用 该 速度 值 对 它 的 邻 域 像 
素 进 行 采样 ， 相 加 后 取 平 均值 得 到 一 个 模糊 的 效果 。 采 样 时 我 们 还 使 
用 了 _BlurSsize 来 控制 采样 距离 。 


(6) 然后 ， 我 们 定义 了 运动 模糊 所 需 的 Pass: 


Pass { 
ZTest Always Cull Off ZWrite Off 


CGPROGRAM 

#pragma vertex vert 
#pragma fragment frag 
ENDCG 


(7) 最 后 ， 我 们 关闭 了 shader 的 Fallback: 


Fallback Off 


完成 后 返回 编辑 器 ， 并 把 Chapter13-MotionBlurWithDepthTexture 拖 
上 忠 到 摄像 机 的 MotionBlur WithDepthTexture.cs 脚 本 中 的 
motionBlurShader 参 数 中 。 当 然 ， 我 们 可 以 在 MotionBlurWith 
DepthTexture.cs 的 脚本 面板 中 将 motionBlurShader 参 数 的 默认 值 设 置 为 


Chapter13-MotionBlur WithDepthTexture， 这 样 承 不 需要 以 后 使 用 时 每 
次 都 手动 拖 熏 了 。 


本 市 实现 的 运动 模糊 适用 于 场景 静止 、 摄 像 机 快速 运动 的 情况 ， 
这 是 因为 我 们 在 计算 时 只 考虑 了 摄像 机 的 运动 。 因此 ， 如 琳 读 者 把 本 
斑 中 的 代码 应 用 到 一 个 物体 快速 运动 而 摄像 机 静止 的 场景 ， 会 发 现 不 
会 产生 任何 运动 模糊 效果 。 如 采 我 们 想 要 对 快速 移动 的 物体 产生 运动 
模糊 的 效果 ， 残 需要 生成 更 加 精确 的 速度 映射 图 。 读 者 可 以 在 Unity 目 
市 的 ImageEffect 包 中 找到 更 多 的 运动 模糊 的 实现 方法 。 


本 下 选择 在 片 元 着 色 器 中 使 用 逆 矩 阵 来 重建 每 个 像素 在 世界 空间 
下 的 位 置 。 但 是 ， 这 种 做 法 往往 会 影响 性 能 ， 在 13.3 广 中， 我 们 会 介绍 
一 种 更 快速 的 由 深度 纹理 重建 世界 坐标 的 方法 。 


13.3 全 局 雾 效 


雾 效 (Fog) 是 游戏 里 经 常 使 用 的 一 种 效果 。Unity 内 置 的 雾 效 可 
以 产生 基于 距离 的 线性 或 指数 筋 效 。 然 而 ， 要 想 在 自己 编写 的 顶点 / 片 
元 着 色 器 中 实现 这 些 筋 效 ， 我 们 需要 在 Shader 中 添加 #pragma 
multi_compile_fog 指 令 ， 同 时 还 需要 使 用 相关 的 内 置 宏 ， 例 如 
UNITY_FOG_COORDS 、UNITY_TRANSFER_FOG 和 
UNITY_APPLY_FOG 等 。 这 种 方法 的 缺点 在 于 ， 我 们 不 仅 需 要 为 场景 
中 所 有 物体 添加 相关 的 泻 染 代码 ， 而 且 能 够 实现 的 效果 也 非常 有 限 。 
当 我 们 需要 对 雾 效 进行 一 些 个 性 化 操作 时 ， 例 如 使 用 基于 高 度 的 雾 效 
等 ， 仅 仅 使 用 Unity 内 置 的 雾 效 就 变 得 不 再 可 行 。 


在 本 节 中 ， 我 们 将 会 学 习 一 种 基于 屏幕 后 处 理 的 全 局 雾 效 的 实 
现 。 使 用 这 种 方法 ， 我 们 不 需要 更 改 场景 内 泻 染 的 物体 所 使 用 的 Shader 
代码 ， 而 仅仅 依靠 一 次 屏幕 后 处 理 的 步骤 即 可 。 这 种 方法 的 自由 性 很 
高 ， 我 们 可 以 方便 地 模拟 各 种 筋 效 ， 例 如 均匀 的 筋 效 、 基 于 距离 的 线 
性 /指数 筋 效 、 基 于 高 度 的 筋 效 等 。 在 学 习 完 本 节 后 ， 我 们 可 以 得 到 类 
似 图 13.5 中 的 效果 。 


A 图 13.5 左边 : 原 效果 。 石 边 : 添加 全 局 筋 效 后 的 效果 


基于 屏幕 后 处 理 的 全 局 筋 效 的 关键 是 ， 根 据 深 度 纹理 来 重建 每 个 
像素 在 世界 空间 下 的 位 置 。 尽 管 在 13.2 世 中， 我 们 在 模拟 运动 模糊 时 已 
经 实现 了 这 个 要 求 ， 即 构建 出 当前 像素 的 NDC 坐 标 ， 再 通过 当前 摄像 
机 的 视角 * 投 影 窍 阵 的 逆 和 矩阵 来 得 到 世界 空间 下 的 像素 坐标 ， 但 是 ， 这 
样 的 实现 需要 在 片 元 着 色 器 中 进行 矩阵 乘法 的 操作 ， 而 这 通 肖 会 影响 
游戏 性 能 。 在 本 市 中 ， 我 们 将 会 学 习 一 个 快速 从 深度 纹理 中 重建 世界 
坐标 的 方法 。 这 种 方法 首先 对 图 像 空 间 下 的 视 锥 体 射 线 (从 摄像 机 出 
发 ， 指 向 图 像 上 的 某 点 的 射线 ) 进行 插值 ， 这 条 射线 存储 了 该 像素 在 
世界 空间 下 到 摄像 机 的 方向 信息 。 然 后 ， 我 们 把 该 射线 和 线性 化 后 的 


视角 空间 下 的 深度 值 相 乘 ， 再 加 上 摄像 机 的 世界 位 置 ， 就 可 以 得 到 该 
像素 在 世界 空间 下 的 位 置 。 当 我 们 得 到 世界 坐标 后 ， 束 可 以 轻松 地 使 
用 各 个 公式 来 模拟 全 局 筋 效 了 。 


13.3.1 重建 世界 坐标 


在 开始 动手 写 代码 之 前 ， 我 们 首先 来 了 解 如 何 从 深度 纹理 中 重建 
世界 坐标 。 我 们 知道 ， 坐 标 系 中 的 一 个 顶 扣 坐标 可 以 通过 它 相 对 于 田 
一 个 顶点 坐标 的 偏 移 量 来 求 得 。 重 建 像 素 的 世界 坐标 也 是 基于 这 样 的 
思想 。 我 们 只 需要 知道 摄像 机 在 世界 空间 下 的 位 置 ， 以 及 世界 空间 下 
该 像素 相对 于 摄像 机 的 仿 移 量 ， 把 它们 相 加 整 可 以 得 到 该 像素 的 世界 
坐标 。 整 个 过 程 可 以 使 用 下 面 的 代码 来 表示 : 


float4 worldPos = _WorldSpaceCameraPos + linearDepth * 
interpolatedRay; 


其 中 ，_WorldSpaceCameraPos 是 摄像 机 在 世界 空间 下 的 位 置 ， 
可 以 由 Unity 的 内 置 变量 直接 访问 得 到 。 而 linearDepth * interpolatedRay 
则 可 以 计算 得 到 该 像素 相对 于 摄像 机 的 偏 移 量 ，linearDepth 是 由 深度 纹 
理 得 到 的 线性 深度 值 ，interpolatedRay 是 由 顶点 着 色 器 输出 并 插值 后 得 
到 的 射线 ， 它 不 仅 包含 了 该 像素 到 摄像 机 的 方向 ， 也 包含 了 距离 信 
息 。linearDepth 的 获取 我 们 已 经 在 13.1.2 节 中 详细 解释 过 了 了， 因此， 本 
节 着 重 解 释 interpolatedRay 的 求法 。 


interpolatedRay 来 源 于 对 近 裁 瘟 平 面 的 4 个 角 的 某 个 特定 癌 量 的 搬 
值 ， 这 4 个 向 量 包含 了 它们 到 摄像 机 的 方向 和 距离 信息 ， 我 们 可 以 利用 
摄像 机 的 近 裁 瘟 平 面 距 离 、FOV、 横 纵 比 计算 而 得 。 图 13.6 显 示 了 计算 
时 使 用 的 一 些 辅助 问 量 。 为 了 方便 计算 ， 我 们 可 以 先 计 算 两 个 回 量 一 


toTop 和 toRight， 它 们 是 起 点 位 于 近 裁 剪 平 面 中 心 、 分 别 指 回 摄像 机 正 
上 上 方 和 正 右 方 的 同 量 。 它 们 的 计算 公式 如 下 : 


. FOV 
hal fHeight = Neartan 和 


toTop =camera.upxhalfHeight 
toRight =camera.rightxhalfHeight:aspect 


其 中 ，Near 是 近 裁 剪 平 面 的 距离 ，FOV 是 竖 直 方向 的 视角 范围 ， 
camera.Up、camera.right 分 别 对 应 了 摄像 机 的 正 上 方 和 正 右 方 。 


当 得 到 这 两 个 辅助 向 量 后 ， 我 们 束 可 以 计算 4 个 角 相 对 于 摄像 机 的 
方向 了 。 我 们 以 左上 和 角 为 例 〈 见 图 13.6 中 的 TL 点 ) ， 它 的 计算 公式 如 
和 


TL=camera.forward:Near+toTop-toRight 


读者 可 以 依靠 基本 的 矢量 运算 验证 上 面 的 结果 。 同 理 ， 其 他 3 个 角 
的 计算 也 是 类 似 的 : 


TR=camera.forward : Near+tolop+toRight 
BL=camera.forward . Near-toTop-toRight 


BR=camera.forward . Near-toTop+toRight 


注意 ， 上 面 求 得 的 4 个 向 量 不 仪 包含 了 方向 信息 ， 它 们 的 模 对 应 了 
4 个 点 到 摄像 机 的 空间 距离 。 由 于 我 们 得 到 的 线性 深度 值 并 非 是 点 到 摄 


像 机 的 欧式 距离 ， 而 是 在 z 方 向 上 的 距离 ， 因 此 ， 我 们 不 能 直接 使 用 深 
度 值 和 4 个 角 的 单位 方向 的 乘积 来 计算 它们 到 摄像 机 的 偏 移 量 ， 如 图 
13.7 所 示 。 想 要 把 深度 值 转换 成 到 摄像 机 的 欧式 距离 也 很 简单 ， 我 们 以 
TL 点 为 例 ， 根 据 相似 三 角形 原理 ，TL 所 在 的 射线 上 ， 像 素 的 深度 值 和 
它 到 摄像 机 的 实际 距离 的 比 等 于 近 裁剪 平面 的 距离 和 TL 向 量 的 模 的 
比划 


depth Near 


dist |TL| 


由 此 可 得 ， 我 们 需要 的 TL 距离 摄像 机 的 欧 氏 距离 dist: 


dist = Ea x depth 
N ear 


由 于 4 个 总 相互 对 称 ， 因 此 其 他 3 个 回 量 的 模 和 TL 相 等 ， 即 我 们 可 
以 使 用 同一 个 因子 和 单位 同 量 相 乘 ， 得 到 筷 们 对 应 的 回 量 值 : 


ITL| 
scale = 
Ne ar| 
TL TR 
Rayrr. 四 [rd XX scale. RayraR 一 区 本 Xx scale 
BL BR 
RayBr = EN x scale, RayBsR = E79] x scale 


A 图 13.7 采样 得 到 的 深度 值 并 非 是 点 到 摄像 机 的 欧式 距离 


屏幕 后 处 理 的 原理 是 使 用 特定 的 材质 去 泻 染 一 个 刚好 填充 整个 屏 
幕 的 四 边 形 面 片 。 这 个 四 边 形 面 片 的 4 个 顶点 就 对 应 了 近 裁 前 平面 的 4 
个 角 。 因 此 ， 我 们 可 以 把 上 面 的 计算 结果 传递 给 顶点 着 色 器 ， 顶 点 着 
色 器 根据 当前 的 位 置 选择 它 所 对 应 的 癌 量 ， 然 后 再 将 其 输出 ， 经 插值 
后 传递 给 片 元 着 色 器 得 到 interpolatedRay， 我 们 就 可 以 直接 利用 本 节 一 
开始 提 到 的 公式 重建 该 像素 在 世界 空间 下 的 位 置 了 。 


13.3.2 雾 的 计算 


在 简单 的 雾 效 实现 中 ， 我 们 需要 计算 一 个 雾 效 系数 f， 作 为 混合 原 
对 颜 色 和 和 雾 的 颜色 的 混合 系数 ; 

这 个 筋 效 系数 { 有 很 多 计算 方法 。 在 Unity 内 置 的 雾 效 实现 中 ， 文 持 
三 种 雾 的 计算 方式 一 线性 (Linear) 、 指 数 (Exponential) 以 及 指数 的 


平方 (Exponential Squared) 。 当 给 定 距 离 z: 后 ，f 的 计算 公式 分 别 如 
下 : 


Linear: 

f ee dmas |z| 

Gaz — tnin dm 和 aa 分 别 表 示 受 筋 影 响 的 最 小 距离 和 最 大 距 
离 o 

Exponential: 

月 < ““]，d 是 控制 雾 的 浓度 的 参数 。 


Exponential Squared: 
fre “1 ，d 是 控制 雾 的 浓度 的 参数 。 


在 本 中 ， 我 们 将 使 用 类 似 线性 筋 的 计算 方式 ， 计 算 基 于 高 度 的 


雾 效 。 具 体 方法 是 ， 当 给 定 一 点 在 世界 空间 下 的 高 度 y 后 ，/ 的 计算 公式 


Hend 一 了 1 
Hend 一 Hstart ， 瓦 ,rr 和 万 ,分 别 表示 受 筋 影响 的 起 台 高 度 和 终 


13.3.3 实现 


为 了 在 Unity 中 实现 基于 屏幕 后 处 理 的 筋 效 ， 我 们 需要 进行 如 下 准 
征 上 人 人 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene _ 13 3 。 在 
Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 使 
用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 中 去 掉 场 景 中 的 
天 空 盒子 。 


(2) 我 们 需要 搭建 一 个 测试 雾 效 的 场景 。 在 本 书 资 源 的 实现 中 ， 
我 们 构建 了 一 个 包含 3 面 墙 的 房 旧 ， 并 放置 了 两 个 立方 体 和 两 个 球体 ， 
它们 都 使 用 了 我 们 在 9.5 节 中 创建 的 标准 材质 。 同时， 我 们 把 本 书 资源 
中 的 Translating.cs 脚 本 拖 忠 给 摄像 机 ， 让 其 在 场景 中 不 断 运 动 。 


(3) 新 建 一 个 脚本 。 在 本 书 资源 中 ， 该 脚本 名 为 
FogWithDepthTexture.cs。 把 该 脚本 拖 电 到 摄像 机 上 。 


(4) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter13-FogWithDepthTexture ° 


我 们 首先 来 编写 FogWithDepthTexture.cs 脚 本 。 打 开 该 脚本 ， 并 进 
行 如 下 修改 。 


(1) 首先 ， 继 承 12.1 节 中 创建 的 基 类 : 


(2) 声明 该 效果 需要 的 Shader， 并 据 此 创建 相应 的 材质 : 


public Shader fogShader; 
private Material fogMaterial = null; 
public Material material { 


get { 


fogMaterial = CheckShaderAndCreateMaterial(fogShader, 


fogMaterial); 
return fogMaterial; 


(3) 在 本 节 中 ， 我 们 需要 获取 摄像 机 的 相关 参数 ， 如 近 裁 前 平面 
的 距离 、FOV 等 ， 同 时 还 需要 获取 摄像 机 在 世界 空间 下 的 前 方 、 上 方 
和 石 方 等 方向 ， 因 此 我 们 用 两 个 变量 存储 摄像 机 的 Camera 组 件 和 
Transform 组 件 : 


private Camera myCamera; 
public Camera camera { 
get { 
if (myCamera == null) { 
myCamera = GetComponent<Camera>(); 
} 


return myCamera; 


} 


private Transform myCameraTransform; 
public Transform cameraTransform { 
get { 
If (myCameraTransform == null) { 
myCameraTransform = camera.transform; 


return myCameraTransform; 


(4) 定义 模拟 雾 效 时 使 用 的 各 个 参数 : 


[Range(0.0f, 3.0f)] 
public float fogDensity = 1.0f， 


public Color fogColor = Color .white; 
public float fogStart = 0.0of; 
public float fogEnd = 2.0f; 


fogDensity 用 于 控制 雾 的 浓度 ，fogColor 用 于 控制 雾 的 颜色 。 我 们 
使 用 的 筋 效 模拟 函数 是 基于 高 度 的 ， 因 此 参数 fogStart 用 于 控制 筋 效 的 
起 始 高 度 ，fogEnd 用 于 控制 筋 效 的 终止 高 度 。 


(5) 由 于 本 例 需 要 获取 摄像 机 的 深度 纹理 ， 我 们 在 脚本 的 
OnEnable 芳 数 中 设置 摄像 机 的 相应 状态 : 


void OnEnable() { 
camera.depthTextureMode |= DepthTextureMode.Depth; 


} 


(6) 最 后 ， 我 们 实现 了 OnRenderImage 范 数 : 


void OnRenderImage (RenderTexture src, RenderTexture dest) { 
If (material != null) { 
Matrix4x4 frustumCorners = Matrix4x4.identity; 
float fov = camera.fieldOofView; 
float near = camera.nearClipPlane,; 
float far = camera.farcClipPlane; 
float aspect = camera.aspect,; 
float halfHeight = near * Mathf.Tan(fov * 0.5f * 
Mathf .Deg2Rad ) ; 

Vector3 toRight = cameraTransform.right * halfHeight * 


aspect,; 

Vector3 toTop = cameraTransform.up * halfHeight; 

Vector3 topLeft = cameraTransform.forward * near + toTop - 
toRight; 

float scale = topLeft.magnitude / near; 

topLeft.Normalize(); 

topLeft *= scale; 

Vector3 topRight = cameraTransform.forward * near + toRight 
+ toTop; 


topRight.Normalize( ); 

topRight *= scale; 

Vector3 bottomLeft = cameraTransform.forward * near - toTop 
- toRight; 

bottomLeft.Normalize( ); 

bottomLeft *= scale; 

Vector3 bottomRight = cameraTransform.forward * near + 
toRight - toTop; 

bottomRight.Normalize( ); 

bottomRight *= scale; 

frustumCorners.SetRow(0, bottomLeft); 


frustumCorners.SetRow(1, bottomRight); 
frustumCorners.SetRow(2, topRight); 
frustumCorners.SetRow(3, topLeft); 
material.SetMatrix("_FrustumCornersRay", frustumCorners); 
material.SetMatrix("_ViewProjectionInverseMatrix", 
(camera.projectionMatrix * 
camera.worldToCameraMatrix).inverse); 
material.SetFloat("_FogDensity", fogDensity); 
material.SetColor("_FogColor", fogColor); 
material.SetFloat("_FogStart", fogStart); 
material.SetFloat("_FogEnd", fogEnd); 
Graphics.Blit (src, dest, material); 
} else { 
Graphics.Blit(src, dest); 


OnRenderImage 站 完 计算 了 近 裁 前 平面 的 四 个 角 对 应 的 同 量 ， 并 把 
它们 存储 在 一 个 矩阵 类 型 的 变量 (frustumComers) 中 。 计 算 过 程 我 们 
已 经 在 13.3.1 广 中 评 细 解释 过 了 ， 代 码 只 是 套用 了 之 前 讲 过 的 公式 而 
已 。 我 们 按 一 定 顺 序 把 这 四 个 方向 存储 到 了 frustumCorners 不 同 的 行 
中 ， 这 个 顺序 是 非常 重要 的 ， 因 为 这 决定 了 我 们 在 顶点 着 色 句 中 使 用 
哪 一 行 作 为 该 点 的 待 插值 向 量 。 随 后 ， 我 们 把 结果 和 其 他 参数 传递 给 
材质 ， 并 调用 Graphics.Blit (src, dest, material) 把 渲染 结果 显示 在 屏幕 
四 本 


下 面 ， 我 们 来 实现 Shader 的 部 分 。 打 开 Chapter13- 
FogWithDepthTexture， 进 行 如 下 修改 。 


(1) 我 们 首先 需要 声明 本 例 使 用 的 各 个 属性 : 


Properties { 

MainTex ("Base (RGB)", 2D) = "white" {} 
FogDensity ("Fog Density", Float) = 1.0 
FogColor ("Fog Color", Color) (1, 1, 1, 1) 
FogStart ("Fog Start", Float) 0.0 

FogEnd ("Fog End", Float) = 1. 


(2) 在 本 节 中 ， 我 们 使 用 CGINCLUDE 来 组 织 代 码 。 我 们 在 
SubShader 块 中 利用 CGINCLUDE 和 ENDCG 语 义 来 定义 一 系列 代码 : 


SubShader { 
CGINCLUDE 


ENDCG 


(3) 声明 代码 中 需要 使 用 的 各 个 变量 : 


float4x4 _FrustumCornersRay; 
sampler2D _MainTex; 

half4 _MainTex_TexelSize; 
sampler2D _CameraDepthTexture; 
half _FogDensity; 

fixed4 _FogColor; 

float _FogStart; 

float _FogEnd; 


_FrustumCornersRay 虽 然 没 有 在 Properties 中 声明 ， 但 仍 可 由 脚本 传 
递 给 Shader。 除 了 Properties 中 声明 的 各 个 属性 ， 我 们 还 声明 了 深度 纹理 
_CameraDepthTexture，Unity 会 在 背后 把 得 到 的 深度 纹理 传递 给 该 值 。 


struct v2f { 
float4 pos : SV_POSITION; 
half2 uv : TEXCOORDO; 
half2 uv_depth : TEXCOORD1; 
float4 interpolatedRay : TEXCOORD2; 


v2f vert(appdata img v) { 
v2f 0O; 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 
O.UV = VvV.texcoord; 
oOo.uUv_depth = v.texcoord; 
#if UNITY_UV_STARTS_AT_TOP 
if (_MainTex_TexelSize.y < 0) 
oOo.Uuv_depth.y= 1 - o.uv_depth.y; 
#endif 


int index = 0; 

if (v. texcoord. x < 0.5 && v.texcoord.y < 0.5) { 
index = 0; 

} else if (v. texcoord. x > 0.5 && Vv.texcoord.y < 0.5) { 
index = 1; 

} else if (v.texcoord.x > 0.5 && Vv.texcoord.y > 0.5) { 
index = 2; 

} else { 
index = 3; 


} 
#if UNITY_UV_STARTS_AT_TOP 
if (_MainTex_TexelSize.y < 0) 


index = 3 - index; 
#endif 
o.interpolatedRay = _FrustumCornersRay[index]; 
return o; 


在 v2{f 结 构 体 中 ， 我 们 除了 定义 顶点 位 置 、 屏 幕 图 像 和 深度 纹理 的 
纹理 坐标 外 ， 还 定义 了 interpolatedRay 变 量 存储 插值 后 的 像素 辐 量 。 在 
顶点 着 色 器 中 ， 我 们 对 深度 纹理 的 采样 坐标 进行 了 平台 差异 化 处 理 。 
更 重要 的 是 ， 我 们 要 决定 该 点 对 应 了 4 个 角 中 的 哪个 角 。 我 们 采用 的 方 
法 是 判断 它 的 纹理 坐标 。 我 们 知道 ， 在 Unity 中 ， 纹 理 坐 标的 (0, 0) 扣 对 
应 了 左下 角 ， 而 (1 1) 扩 对 应 了 右上 角 。 我 们 据 此 来 判断 该 顶点 对 应 的 
索引 ， 这 个 对 应 关系 和 我 们 在 脚本 中 对 frustumCorners 的 赋值 顺序 是 一 
致 的 。 实 际 上 ， 不 同 平台 的 纹理 坐标 不 一 定 是 满足 上 面 的 条 件 的 ， 例 
如 DirectX 和 Metal 这 样 的 平台 ， 左 上 角 对 应 了 (0, 0) 点 ， 但 大 多 数 情 况 下 
Unity 会 把 这 些 平台 下 的 屏幕 图 像 进行 翻转 ， 因 此 我 们 仍然 可 以 利用 这 

个 条 件 。 但 如 果 在 类 似 DirectX 的 平台 上 开局 了 抗 锯 上 催 ，Unity 束 不 会 进 
行 这 个 翻转 。 为 了 此 时 仍然 可 以 得 到 相应 顶点 位 置 的 索引 值 ， 我 们 对 
索引 值 也 进行 了 平台 差异 化 处 理 ( 详 见 5.6.1 节 ) ， 以 便 在 必要 时 也 对 
索引 值 进行 翻转 。 最 后 ， 我 们 使 用 索引 值 来 获取 _FrustumCornersRay 中 
对 应 的 行 作为 该 顶点 的 interpolatedRay 值 。 


尽管 我 们 这 里 使 用 了 很 多 判断 语句 ， 但 由 于 屏幕 后 处 理 所 用 的 模 
型 是 一 个 四 这 形 网 格 ， 只 包 舍 4 个 项 点， 因此 这 些 操作 不 会 对 性 能 造成 
很 大 影响 。 


(5) 我 们 定义 了 片 元 着 色 器 来 产生 筋 效 : 


fixed4 frag(v2f i) : SV_Target { 

float linearDepth = 
LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i., 
uv_depth)); 

float3 worldPos = _WorldSpaceCameraPos + linearDepth 
i,.interpolatedRay .xyz; 

float fogDensity = (_FogEnd - worldPos.y) / (_FogEnd - 


_FogStart ) ， 
fogDensity = saturate(fogDensity * _FogDensity); 
fixed4 finalColor = tex2D(_MainTex, i.uv); 
finalcColor.rgb = lerp(finalColor.rgb, _FogColor.rgb, 
fogDensity); 
return finalColor; 
} 


首先 ， 我 们 需要 重建 该 像素 在 世界 空间 中 的 位 置 。 为 此 ， 我 们 首 
先 使 用 SAMPLFE_DEPTH_TEXTURE 对 深度 纹理 进行 采样 ， 再 使 用 
LinearEyeDepth 得 到 视角 空间 下 的 线性 深度 值 。 之 后 ,与 
interpolatedRay 相 乘 后 再 和 世界 空间 下 的 摄像 机 位 置 相 加 ， 即 可 得 到 世 
界 空 间 下 的 位 置 。 


得 到 世界 坐标 后 ， 模 拟 筋 效 就 变 得 非常 容易 。 在 本 例 中 ， 我 们 先 
择 实 现 基于 高 度 的 筋 效 模拟 ， 计 算 公 式 可 参见 13.3.2Pm。 我 们 根据 材质 
属性 _FogEnd 和 _FogStart 计 算 当 前 的 像素 高 度 worldPos.y 对 应 的 雾 效 系 
数 fogDensity， 再 和 参数 _ FogDensity 相 乘 后 ， 利 用 saturate 函 数 截 取 到 [0， 
J 可 范围 内 ， 作 为 最 后 皮 筋 效 系数 。 然 后 ， 我 们 使 用 该 系数 将 雾 的 颜色 和 
原始 颜色 进行 混合 后 返回 。 读 者 也 可 以 使 用 不 同 的 公式 来 实现 其 他 种 
类 的 筋 效 。 


(6) 随后 ， 我 们 定义 了 筋 效 泻 染 所 需 的 Pass: 


Pass { 
ZTest Always Cull Off ZWrite Off 
CGPROGRAM 
#pragma vertex vert 


#pragma fragment frag 
ENDCG 


(7) 最 后 ， 我 们 关闭 了 Shader 的 Fallback: 


Fallback Off 


完成 后 返回 编辑 器 ， 并 把 Chapter13-FogWithDepthTexture 拖 暇 到 援 
ee 中 的 fogShader 参 数 中 。 当 然 ， 我 们 
可 以 在 FogWithDepthTexture.cs 的 脚本 面板 中 将 fogShader 参 数 的 默认 值 
设置 为 Chapter13-FogWithDepthTexture， 这 样 就 不 需要 以 后 使 用 时 每 次 
都 手动 拖 虑 了 。 


本 市 介绍 的 使 用 深度 纹理 重建 像素 的 世界 坐标 的 方法 是 非 第 有 用 
的 。 但 需要 注意 的 是 ， 这 里 的 实现 是 基于 摄像 机 的 投影 类 型 是 透视 投 
影 的 前 所 下 。 多 的 情况 下 重建 世界 坐标 ， 需 要 使 用 
不 同 的 公 \ 式 ， 但 请 读者 相信 ， 这 个 过 程 不 会 比 透视 投影 的 情况 更 加 复 
杂 。 有 兴趣 的 读者 可 以 笑 试 目 行 推 性 ， 或 参考 这 篇 博客 


(http://www.derschmale.com/2014/03/19/reconstructing- positions-from- 


the-depth-buffer-pt-2-perspective-and-orthographic-general-case/) 来 实 
更。 


13.4 再 谈 边 缘 检 测 


在 12.3 全 中， 我 们 曾 介绍 如 何 使 用 Sobel 算 子 对 屏幕 图 像 进行 边 缘 
检测 ， 实 现 描 边 的 效果 。 但 是 ， 这 种 直接 利用 颜色 信息 进行 边缘 检测 
的 方法 会 产生 很 多 我 们 不 布 望 得 到 的 边缘 线 ， 如 岁 13.8 所 示 。 


可 以 看 出 ， 物 体 的 纹理 、 阴 影 等 位 置 也 被 挡 上 墨 边 ， 而 这 往往 不 
征 我 们 希望 看 到 的 。 在 本 节 中 ， 我 们 将 学 习 如 何在 深度 和 法 线 纹理 上 
进行 边 绿 检测 ， 这 些 图 像 不 会 受 纹理 和 光照 的 影响 ， 而 仅仅 保存 了 当 
前 演 染 物体 的 模型 信息 ， 通 过 这 样 的 方式 检测 出 来 的 边缘 更 加 可 靠 。 
在 学 习 完 本 和 后 ， 我 们 可 以 得 到 类 似 匈 13.9 中 的 效 末 。 


图 13.8 左边 : 原 效果 ， 石 边 : 直接 对 颜色 图 像 进行 边缘 检测 的 结果 


全 


图 13.9 在 深度 和 法 线 纹理 上 进行 更 健壮 的 边缘 检测 。 左 边 : 在 原 图 上 描 边 的 效果 。 右 边 : 只 
显示 描 边 的 效果 


全 


与 12.3 节 使 用 Sobel 算 子 不 同 ， 本 市 将 使 用 Roberts 算 子 来 进行 边缘 
检测 。 它 使 用 的 卷 积 核 如 图 13.10 所 示 。 


Roberts 


oj jo 
Gx G 


y 


A 图 13.10 Roberts 算 子 


Roberts 算 子 的 本 质 束 是 计算 左上 角 和 右 下 角 的 差 值 ， 乘 以 右上 角 
和 左下 角 的 差 值 ， 作 为 评估 边缘 的 依据 。 在 下 面 的 实现 中 ， 我 们 也 会 


按 这 样 的 方式 ， 取 对 角 方 向 的 深度 或 法 线 值 ， 比 较 它 们 之 间 的 差 值 ， 
如 采 超 过 某 个 国 值 (可 由 参数 控制 ，， 束 认为 它们 之 间 存 在 一 条 边 。 


首先 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资 源 中 ， 该 场景 名 为 Scene_13_4。 在 
Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 使 
用 了 内 置 的 天 空 盒子 。 在 Window~ Lighting ”> Skybox 中 去 掉 场 景 中 的 
天 空 盒 合 


(2) 我 们 需要 搭建 一 个 测试 雾 效 的 场景 。 在 本 书 资 源 的 实现 中 ， 
我 们 构建 了 一 个 包含 3 面 墙 的 房间 ， 并 放置 了 两 个 立方 体 和 两 个 球体 ， 
它们 都 使 用 了 我 们 在 9.5 节 中 创建 的 标准 材质 。 同时， 我 们 把 本 书 资源 
中 的 Translating.cs 脚 本 拖 忠 给 摄像 机 ， 让 其 在 场景 中 不 断 运动 。 


(3) 新 建 一 个 脚本 。 在 本 书 资源 中 ， 该 脚本 名 为 
EdgeDetectNormalsAndDepth.cs。 把 该 脚本 拖 暇 到 摄像 机 上 。 


(4) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter13-EdgeDetectNormalAndDepth ° 


我 们 首先 来 编写 EdgeDetectrNormalsAndDepth.cs 脚 本 。 该 脚本 与 
12.3 市 中 实现 的 EdgeDetection.cs 脚 本 几乎 完全 一 样 ， 只 是 添加 了 一 些 新 
的 属性 。 为 了 完整 性 ， 我 们 再 次 说 明 对 该 脚本 进行 的 修改 。 


(1) 首先 ， 继 承 12.1 节 中 创建 的 基 类 : 


(2) 声明 该 效果 需要 的 Shader， 并 据 此 创建 相应 的 材质 : 


public Shader edgeDetectShader; 
private Material edgeDetectMaterial = null; 
public Material material { 
get { 
edgeDetectMaterial = 


CheckShaderAndCreateMaterial(edgeDetectShader, edgeDetectMaterial); 
return edgeDetectMaterial; 
} 


(3) 在 脚本 中 提供 了 调整 边缘 线 强 度 描 边 颜 色 以 及 背景 颜色 的 参 
数 。 同 时 添加 了 控制 采样 距离 以 及 对 深度 和 法 线 进行 边缘 检测 时 的 灵 
敏 度 参数 : 
[Range(0.0f, 1.0f)] 
public float edgesonly = 0.0f; 


public Color edgeColor = Color.black; 
public Color backgroundColor = Color.white; 


public float sampleDistance = 1.0f; 
public float sensitivityDepth = 1.0f， 
public float sensitivityNormals = 1.0f; 


sampleDistance 用 于 控制 对 深度 + 法 线 纹理 采样 时 ， 使 用 的 采样 距 
离 。 从 视觉 上 来 看 ，sampleDistance 值 越 大 ， 描 边 越 宽 。 
sensitivityDepth 和 sensitivityNormals 将 会 影响 当 邻 域 的 深度 值 或 法 线 值 
相差 多 少时 ， 会 被 认为 存在 一 条 边 弄 。 如 采 把 灵 ht 
可 能 即使 是 深度 或 法 线 上 很 小 的 变化 也 会 形成 一 条 


(4) 由 于 本 例 需 要 获取 摄像 机 的 深度 + 法 线 纹理 ， 我 们 在 脚本 的 
OnEnable 芳 数 中 设置 摄像 机 的 相应 状态 : 


void OnEnable() { 
GetComponent<Camera>().depthTextureMode |= 


DepthTextureMode.DepthNormals; 


(5) 实现 OnRenderImage 函 数 ， 把 各 个 参数 传递 给 材质 : 


[ImageEffectopaque] 
void OnRenderImage (RenderTexture src, RenderTexture dest) { 
If (material != null) { 
material.SetFloat("_EdgeOnly", edgesOonly); 
material.SetColor("_EdgeColor", edgeColor); 
material.SetColor("_BackgroundColor", backgroundColor ); 
material.SetFloat("_SampleDistance", sampleDistance); 


material.SetVector("_ Sensitivity", new 
Vector4(sensitivityNormals, sensitivityDepth, 0.0f, 0.0of)); 
Graphics.Blit(src, dest, material); 
} else { 
Graphics.Blit(src, dest); 


需要 注意 的 是 ， 这 里 我 们 为 OnRenderImage 函 数 添 加 了 
[ImageEffectOpaque] 属 性 。 我 们 曾 在 12.1 市 中 提 到 过 该 属性 的 含义 。 在 
默认 情况 下 ，OnRenderImage 函 数 会 在 所 有 的 不 透明 和 透明 的 Pass 执 行 
完毕 后 被 调用 ， 以 便 对 场景 中 所 有 游戏 对 象 都 产生 影响 。 但 有 时 ， 我 
们 希望 在 不 透明 的 Pass ( 即 泻 染 队 列 小 于 等 于 2 500 的 Pass， 内 置 的 
Background、Geometry 和 AlphaTest 泻 染 队 列 均 在 此 范围 内 ) 执行 完毕 
后 立即 调用 该 函数 ， 而 不 对 透明 物体 ( 演 染 队列 为 Transparent 的 Pass) 
产生 影响 ， 此 时 ， 我 们 可 以 在 OnRenderImage 本 数 前 添加 
ImageEffectOpaque 属 性 来 实现 这 样 的 目的 。 在 本 例 中 ， 我 们 只 和 希望 对 
不 透明 物体 进行 描 边 ， 而 不 希望 透明 物体 也 被 描 边 ， 因 此 需要 添加 该 
属性 。 


下 面 ， 我 们 来 实现 Shader 的 部 分 。 打 开 Chapter13- 
EdgeDetectNormalAndDepth， 进 行 如 下 修改 。 


(1) 我 们 首先 需要 声明 本 例 使 用 的 各 个 属性 : 


Properties { 
MainTex ("Base (RGB)", 2D) = "white" {} 


_Edgeonly ("Edge Only", Float) = 1.0 

_EdgeColor ("Edge Color", Color) = (0, 0, 0, 1) 
_BackgroundColor ("Background Color", Color) = (1, 1, 1, 1) 
_SampleDistance ("Sample Distance", Float) = 1.0 
_Sensitivity ("Sensitivity", Vector) = (1, 1, 1, 1) 


其 中 ，_Sensitivity 的 xy 分 量 分 别 对 应 了 法 线 和 深度 的 检测 灵敏 度 ， 
zw 分 量 则 没有 实际 用 途 。 


(2) 在 本 节 中 ， 我 们 使 用 CGINCLUDE 来 组 织 代 码 。 我 们 在 
SubShader 块 中 利用 CGINCLUDE 和 ENDCG 语 义 来 定义 一 系列 代码 : 


SubShader { 
CGINCLUDE 


ENDCG 


(3) 为 了 在 代码 中 访问 各 个 属性 ， 我 们 需要 在 CG 代 码 块 中 声明 
对 应 的 变量 


sampler2D _MainTex; 

half4 _MainTex_TexelSize; 
fixed _EdgeOnly; 

fixed4 _EdgeColor; 


fixed4 _BackgroundColor; 

float _SampleDistance; 

half4 _Sensitivity; 

sampler2D _CameraDepthNormalsTexture; 


在 上 面 的 代码 中 ， 我 们 声明 了 需要 获取 的 深度 + 法 线 纹理 
_CameraDepthNormalsTexture。 由 于 我 们 需要 对 邻 域 像素 进行 纹理 采 
样 ， 所 以 还 声明 了 存储 纹 素 大 小 的 变量 _MainTex_TexelSize 。 


(4) 定义 顶点 着 色 器 : 


struct v2f { 
float4 pos : SV_POSITION; 
half2 uv[5]: TEXCOORDO; 


}; 
v2f vert(appdata _ img v) { 

v2f Oo; 

oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 

half2 uv = v.texcoord; 

o.uv[0] = uv; 

#if UNITY_UV_STARTS_AT_TOP 

If (_MainTex_TexelSize.y < 0) 

UV.y=1 - Uv.y; 

#endif 

oOo.uv[1] = uv + _MainTex_TexelSize. half2(1,1) * 
_SampleDistance; 

oOo.Uuv[2] = uv + _MainTex_TexelSize. half2(-1,-1) * 
_SampleDistance; 

oOo.uv[3] = uv + _MainTex_TexelSize. half2(-1,1) * 
_SampleDistance; 

oO.UVvV[4] = uv + _MainTex_TexelSize. half2(1,-1) * 
_SampleDistance; 

return o; 
} 


我 们 在 v2f 结 构 体 中 定义 了 一 个 维 数 为 5 的 纹理 坐标 数组 。 这 个 数组 
的 第 一 个 坐标 存储 了 屏幕 颜色 图 像 的 采样 纹理 。 我 们 对 深度 纹理 的 采 
样 坐标 进 行 了 平台 差异 化 处 理 ， 在 必要 情况 下 对 它 的 竖 直方 向 进行 了 
翻转 。 数 组 中 剩余 的 4 个 坐标 则 存储 了 使 用 Roberts 算 子 时 需要 采样 的 纹 
理 坐 标 ， 我 们 还 使 用 了 _SampleDistance 来 控制 采样 距离 。 通 过 把 计算 
采样 纹理 坐标 的 代码 从 片 元 着 色 句 中 转移 到 顶点 着 色 器 中 ， 可 以 减少 
运算 ， 提 高 性 能 。 由 于 从 顶点 着 色 器 到 片 元 着 色 器 的 插值 是 线性 的 ， 
因此 这 样 的 转移 并 不 会 影响 纹理 坐标 的 计算 结果 。 


(5) 然后 ， 我 们 定义 了 片 元 着 色 器 : 


fixed4 fragRobertsCrossDepthAndNormal(v2f i) : SV_Target { 
half4 sample1 = tex2D(_CameraDepthNormalsTexture, i.uv[1]); 


half4 sample2 
half4 sample3 
half4 sample4 


tex2D(_CameraDepthNormalsTexture, i.uv[2]); 
tex2D(_CameraDepthNormalsTexture, i.uv[3]); 
tex2D(_CameraDepthNormalsTexture, i.uv[4]); 


half edge = 1.0; 

edge *= CheckSame(sample1, sample2); 

edge *= CheckSame(sample3, sample4); 

fixed4 withEdgeCcolor = lerp(_EdgeColor, tex2D(_MainTex, 
i.uv[90]), edge); 

fixed4 onlyEdgeColor = lerp(_EdgeColor, _BackgroundColor, 
edge); 

return lerp(withEdgeColor, onlyEdgeColor, _EdgeOnly); 


} 


我 们 首先 使 用 4 个 纹理 坐标 对 深度 + 法 线 纹理 进行 采样 ， 再 调用 
CheckSame 函 数 来 分 别 计 算 对 角 线 上 两 个 纹理 值 的 差 值 。CheckSame 函 
数 的 返回 值 要 么 是 0， 要 么 是 1， 返 回 0 时 表明 这 两 点 之 间 存 在 一 条 边 
界 ， 反 之 则 返回 1。 它 的 定义 如 下 : 


half CheckSame(half4 center，half4 sample) { 

half2 centerNormal = center.xy; 

float centerDepth = DecodeFloatRG(center .zw); 

half2 sampleNormal = sample.xy; 

float sampleDepth = DecodeFloatRG(sample.zw); 

// difference in normals 

// do not bother decoding normals - there's no need here 

half2 diffNormal = abs(centerNormal - sampleNormal) * 
_Sensitivity.x; 

int isSameNormal = (diffNormal.x + diffNormal.y) < 0.1; 

// difference in depth 

float diffDepth = abs(centerDepth - sampleDepth) * 
_Sensitivity.y; 

// scale the required threshold by the distance 

int isSameDepth = diffDepth < 0.1 * centerDepth ; 

// return: 

// 1 - if normals and depth are similar enough 

// 0 - otherwise 

return isSameNormal * isSameDepth ? 1.0 : 0.0; 


CheckSame 站 完 对 输入 参数 进行 处 理 ， 得 到 两 个 采样 点 的 法 线 和 深 
度 值 。 值 得 注意 的 是 ， 这 里 我 们 并 没有 解码 得 到 真正 的 法 线 值 ， 而 是 
直接 使 用 了 xy 分 量 。 这 是 因为 我 们 只 需要 比较 两 个 采样 值 之 间 的 差异 
度 ， 而 并 不 需要 知道 它们 真正 的 法 线 值 。 然 后 ， 我 们 把 两 个 采样 点 的 


对 应 值 相 减 并 取 绝 对 值 ， 再 乘 以 灵敏 度 参 数 ， 把 差异 值 的 每 个 分 量 相 
加 再 和 一 个 病 值 比较 ， 如 琳 它 们 的 和 小 于 病 值 ， 则 返回 1， 说 明 有 差异 不 
明显 ， 不 存在 一 条 边界 ;否则 返回 90。 最后， 我 们 把 法 线 和 深度 的 检查 

结果 相 乘 ， 作 为 组 合 后 的 返回 值 。 


当 通 过 CheckSame 函 数 得 到 边缘 信息 后 ， 片 元 着 色 絮 就 利用 该 值 进 
行 颜色 混合 ， 这 和 12.3 市 中 的 步骤 一 致 。 


(6) 然后 ， 我 们 定义 了 边缘 检测 需要 使 用 的 Pass: 


Pass { 
ZTest Always Cull Off ZWrite Off 
CGPROGRAM 
#pragma vertex vert 


#pragma fragment fragRobertsCrossDepthAndNormal 
ENDCG 


(7) 最 后 ， 我 们 关闭 了 该 Shader 的 Fallback: 


Fallback Off 


完成 后 返回 编辑 器 ， 并 把 Chapter13-EdgeDetectNormalAndDepth 拖 
上 忠 到 摄像 机 的 EdgeDetect NormalsAndDepth.cs 脚 本 中 的 edgeDetectShader 
参数 中 。 当 然 ， 我 们 可 以 在 EdgeDetectNormals AndDepth.cs 的 脚本 面板 
中 将 edgeDetectShader 参 数 的 默认 值 设 置 为 Chapter13-EdgeDetectNormal 
AndDepth， 这 样 就 不 需要 以 后 使 用 时 每 次 都 手动 拖 鼻 了 。 


本 万 实现 的 描 边 效果 是 基于 整个 屏幕 空间 进行 的 ， 也 就 是 说 ， 场 
景 内 的 所 有 物体 都 会 被 添加 摘 边 效 末 。 但 有 时 ， 我 们 硕 望 只 对 特定 的 
物体 进行 朱 边 ， 例 如 当 玩 家 选中 场景 中 的 菜 个 物体 后 ， 我 们 想 要 在 该 


物体 周围 添加 一 层 描 边 效果 。 这 时 ， 我 们 可 以 使 用 Unity 提 供 的 
Graphics.DrawMesh 或 Graphics.DrawMeshNow 函 数 把 需要 描 边 的 物体 再 
次 泻 染 一 遍 (在 所 有 不 透明 物体 泻 染 完毕 之 后 )  ， 然 后 再 使 用 本 节 提 
到 的 边缘 检测 算法 计算 深度 或 法 线 纹理 中 每 个 像素 的 梯度 值 ， 判 断 它 
们 是 否 小 于 某 个 病 值 ， 如 果 是 ， 就 在 Shader 中 使 用 dlip0) 函 数 将 该 像素 
别 除 挥 ， 从 而 显示 出 原来 的 物体 颜色 。 


13.5 扩展 阅读 


在 本 章 中 ， 我 们 介绍 了 如 何 使 用 深度 和 法 线 约 理 实现 诸如 全 局 雾 
效 、 边 绿 检测 等 效果 。 尽 管 我 们 只 使 用 了 深度 和 法 线 纹理 ， 但 实际 上 
我 们 可 以 在 Unity 中 创建 任何 需要 的 缓存 纹理 。 这 可 以 通过 使 用 Unity 的 
着 色 器 蔡 换 (Shader Replacement) 功能 ( 即 调用 
Camera.RenderWithShader(shader replacementTag) 函 数 ) 把 整个 场景 
次 泻 染 一 遇 来 得 到 ， 而 在 很 多 时 候 ， 这 实际 也 是 Unity 创 建 深 度 和 法 线 
纹理 时 使 用 的 方法 。 


深度 和 法 线 纹理 在 屏幕 特效 的 实现 中 往往 扮演 了 重要 的 角色 。 许 

多 特殊 的 屏幕 效果 都 需要 依靠 这 两 种 纹理 的 帮助 。Unity 曾 在 2011 年 的 
SIGGRAPH 《计算 机 图 形 学 的 顶级 会 议 ) 上 做 了 一 个 关于 使 用 深度 纹 
理 实 现 各 种 特效 的 演讲 (http:/blogs.unity3d.com/2011/09/08/special- 
effects-with- depth-talk-at-siggraph/) 。 在 这 个 演讲 中 ，Unity 的 工作 人 员 
解释 了 如 何 利用 深度 纹理 来 实现 特定 物体 的 描 边 、 角 色 护 盾 、 相 殊 线 
的 高 光 模 拟 等 效果 。 在 Unity 的 Image Effect (http://docs.unity3d.com/ 
Manualcomp-ImageEffects.html) 包 中 ， 读 者 也 可 以 找到 一 些 传统 的 使 


用 深度 纹理 实现 屏幕 特效 的 例子 ， 例 如 屏幕 空间 的 环境 遮挡 (Screen 
Space Ambient Occlusion，SSAO) 等 效果 。 


第 14 章 ” 非 真实 感 演 染 


尽管 游戏 泻 染 一 般 都 是 以 照相 写实 主义 (photorealism) 作为 主要 
目标 ,但 也 有 许多 游戏 使 用 了 非 真 实感 泻 染 (Non-Photorealistic 
Rendering，NPR) 的 方法 来 演 染 游戏 画面 。 非 真实 感 泻 染 的 一 个 主要 
目标 是 ， 使 用 一 些 演 染 方法 使 得 画面 达到 和 某 些 特殊 的 绘画 风格 相似 
的 效果 ， 例 如 卡通 、 水 彩 风 格 等 。 


在 本 章 中 ， 我 们 将 会 介绍 两 种 常见 的 非 真实 感 泻 染 方法 。 在 14.1 闻 
中 ， 我 们 将 会 学 习 如 何 实现 一 个 包含 了 简单 赣 反 射 、 高 光 和 描 边 的 卡 
通风 格 的 泻 染 效果 。14.2 市 将 会 介绍 一 种 实时 素描 效果 的 实现 。 在 本 章 
最 后 ， 我 们 还 会 给 出 一 些 天 于 非 真实 感 泻 染 的 资料 ， 读 者 可 以 在 这 些 
文献 中 找到 更 多 非 真实 感 泻 染 的 实现 方法 。 


14.1 卡通 风格 的 演 染 


卡通 风格 是 游戏 中 常见 的 一 种 泻 染 风格 。 使 用 这 种 风格 的 游戏 画 
面 通常 有 一 些 共有 的 特点 ， 例 如 物体 都 家 黑色 的 线条 摘 边 ， 以 及 分 明 
的 明暗 变化 等 。 由 日 本 卡 普 空 (英文 名 : Capcom) 株式 会 社 开 发 的 游 
戏 《 大 神 》 (英文 名 Okami) 束 使 用 了 水 墨 + 卡 通风 格 来 泻 染 整 个 画 
面 ， 如 图 14.1 所 示 ， 这 种 泻 染 风格 获得 了 广泛 赞誉 。 


要 实现 卡通 演 染 有 很 多 方法 ， 其 中 之 一 就 是 使 用 基于 色调 的 着 色 
技术 (tone-based shading) 。Gooch 等 人 在 他 们 1998 年 的 一 篇 论文 中 中 


提出 并 实现 了 基于 色调 的 光照 模型 。 在 实现 中 ， 我 们 往往 会 使 用 漫 反 
冉 系数 对 一 张 一 维 纹理 进行 采样 ， 以 控制 漫 反 射 的 色调 。 我 们 曾 在 7.3 
市 使 用 渐变 纹理 实现 过 这 样 的 效果。 卡通 风格 的 高 光 效 果 也 和 我 们 之 
前 学 习 的 光照 不 同 。 在 卡通 风格 中 ， 模 型 的 高 光 往往 是 一 块 块 分 界 明 
显 的 纯色 区 域 。 


除了 光照 模型 不 同 外 ， 卡 通风 格 通常 还 需要 在 物体 边缘 部 分 绘制 
轮廓 。 在 之 前 的 章节 中 ， 我 们 曾 介绍 使 用 屏幕 后 处 理 技术 对 屏幕 图 像 
进行 插 边 。 在 本 市 ， 我 们 将 会 介绍 基于 模型 的 插 边 方法 ， 这 种 方法 的 
实现 更 加 简单， 而 且 在 很 多 情况 下 也 能 得 到 不 钳 的 效 末 。 


在 本 六 结束 后 ， 我 们 将 会 实现 类 似 图 14.2 的 效 霖 。 


4 图 14.1 游戏 《大 神 》 (英文 名 Okami) 的 游戏 截图 


全 


图 14.2 卡通 风格 的 泻 染 效 果 


14.1.1 演 染 轮廓 线 


在 实时 泻 染 中 ， 轮 亡 线 的 泻 染 是 应 用 非常 广泛 的 一 种 效果 。 近 20 
年 来 ， 有 许多 绘制 模型 轮廓 线 的 方法 被 先后 提出 来 。 在 《Real Time 
Rendering, third edition》 一 书 中 ， 作 者 把 这 些 方法 分 成 了 5 种 类 型 。 


。 基于 观察 角度 和 表面 法 线 的 轮廓 线 泻 染 。 这 种 方法 使 用 视角 方向 
和 表面 法 线 的 点 乘 结果 来 得 到 轮廓 线 的 信息 。 这 种 方法 简单 快 
速 ， 可 以 在 一 个 Pass 中 吏 得 到 演 染 结 末 ， 但 局 限 性 很 天， 很 多 模型 
泻 染 出 来 的 描 边 效果 都 不 尽 如 人 意 。 

过 程式 几何 轮廓 线 泻 染 。 这 种 方法 的 核心 是 使 用 两 个 Pass 泻 染 。 第 
一 个 Pass 泻 染 表 面 的 面 片 ， 并 使 用 某 些 技术 让 它 的 轮廓 可 见 ， 第 二 
个 Pass 再 正常 泻 梁 正面 的 面 片 。 这 种 方法 的 优 扣 在 于 快速 有 效 ， 并 
且 适 用 于 绝 大 多 数 表 面 平滑 的 模型 ,但 它 的 缺 操 是 不 适合 类 似 于 
立方 体 这 样 平整 的 模型 。 


。 基于 图 像 处 理 的 轮廓 线 演 染 。 我 们 在 第 12、13 章 介绍 的 边缘 检测 
的 方法 束 属 于 这 个 类 别 。 这 种 方法 的 优点 在 于 ， 可 以 适用 于 任何 
种 类 的 模型 。 但 它 也 有 自身 的 局 限 所 在 ， 一 些 深度 和 法 线 变 化 很 
小 的 轮廓 无 法 被 检测 出 来 ， 例 如 果 了 于 上 的 纸张 。 

基于 轮廓 边 检 测 的 轮廓 线 泻 染 。 上 面 提 到 的 各 种 方法 ， 一 个 最 大 
的 问题 是 ， 无 法 控制 轮廓 线 的 风格 泻 染 。 对 于 一 些 情况 ， 我 们 硕 
望 可 以 泻 染 出 独特 风格 的 轮廓 线 ， 例 如 水 于 风 格 等 。 为 此 ， 我 们 
希望 可 以 检测 出 精确 的 轮廓 边 ， 然 后 直接 泻 染 它们 。 检 测 一 条 边 
征 否 是 轮廓 边 的 公式 很 简单 ， 我 们 只 需要 检查 和 这 条 边 相 邻 的 两 
个 三 角 面 片 古 否 满 足以 下 条 件 : 


(nov>0) z(n1:v>0) 


其 中 ，no 和 ni 分 别 表示 两 个 相 邻 三 角 面 片 的 法 同 ，v 是 从 视角 到 该 
边 上 任意 顶点 的 方向 。 上述 公 式 的 本 质 在 于 检查 两 个 相 邻 的 三 角 面 片 
是 否 一 个 朝 正 面 、 一 个 朝 背 面 。 我 们 可 以 在 几何 着 色 器 (Geometry 
Shader) 的 帮助 下 实现 上 面 的 检测 过 程 。 当 然 ， 这 种 方法 也 有 缺点， 除 
了 实现 相对 复杂 外 ， 它 还 会 有 动画 连贯 性 的 问题 。 也 束 是 说 ， 由 于 是 
逮 帆 单独 提取 轮廓 ， 所 以 在 帧 与 帧 之 间 会 出 现 跳 路 性 。 


。 最 后 一 个 种 类 束 是 混合 了 上 壕 的 几 种 渔 染 方法 。 例 如 ， 蛙 先 找到 
精确 的 轮廓 边 ， 把 模型 和 轮廓 边 泻 染 到 纹理 中 ， 再 使 用 图 像 处 理 
的 方法 识别 出 轮廓 线 ， 并 在 图 像 空 间 下 进行 风格 化 演 染 。 


在 本 广 中 ， 我 们 将 会 在 Unity 中 使 用 过 程式 几何 轮廓 线 洽 染 的 方法 
来 对 模型 进行 轮 亡 描 边 。 我 们 将 使 用 两 个 Pass 泻 染 模 型 ， 在 第 一 个 Pass 
中 ， 我 们 会 使 用 轮廓 线 颜 色 演 染 整 个 背面 的 面 片 ， 并 在 视角 空间 下 把 


模型 顶点 治 痢 法 线 方 癌 癌 外 扩张 一 段 距 离 ， 以 此 来 让 至 部 轮廓 线 可 
见 。 代 码 如 下 : 


ViewPos = viewPos + ViewNormal * _Outline; 


但 是 ， 如 果 直 接 使 用 顶点 法 线 进行 扩展 ， 对 于 一 些 内 四 的 模型 ， 
就 可 能 发 生 背 面 面 片 收 挡 正面 面 片 的 情况 。 为 了 尽 可 能 防止 出 现 这 样 
的 情况 ， 在 扩张 育 面 项 点 之 前 ， 我 们 间 移 对 顶点 法 线 的 z 分 量 进行 处 
理 ， 使 它们 等 于 一 个 定 值 ， 然 后 把 法 线 归 一 化 后 再 对 顶点 进行 扩张 。 
这 样 的 好 处 在 于 ， 扩 展 后 的 背面 更 加 局 平 化 ， 从 而 降低 了 让 挡 正 面 面 
片 的 可 能 性 。 代 码 如 下 : 


viewNormal.z = -0.5; 
viewNormal = normalize(viewNormal ) ; 


ViewPos = viewPos + ViewNormal * _Outline; 


14.1.2 ”添加 高 光 


前 面 提 到 过 ， 卡 通风 格 中 的 高 光 往 往 是 模型 上 一 块 块 分 弄 明 显 的 
纯色 区 域 。 为 了 实现 这 种 效 末 ， 我 们 融 不 能 再 使 用 之 前 学 习 的 光照 模 
型 。 回 顾 一 下 ， 在 之 前 实现 Blinn-Phong 模 型 的 过 程 中 ， 我 们 使 用 法 线 
扩 乘 光照 方 同 以 及 视角 方 回 和 的 一 半 ， 再 和 男 一 个 参数 进行 指数 操作 
得 到 高 光 反 射 系数 。 代 码 如 下 : 


float spec = pow(max(0，dot(normal，halfDir))，_Gloss ) 


对 于 卡通 泻 染 需要 的 高 光 反 射 光照 模型 ， 我 们 同样 需要 计算 normal 
和 halfDir 的 点 乘 结 有 末 ， 但 不 同 的 是 ， 我 们 把 该 值 和 一 个 国 值 进行 比 
较 ， 如 果 小 于 该 国 值 ， 则 高 光 反 射 系数 为 0， 否 则 返回 1。 


spec = step(threshold, spec); 

在 上 面 的 代码 中 ， 我 们 使 用 CG 的 step 档 数 来 实现 和 辣 值 比较 的 目 
的 。step 函 数 接受 两 个 参数 ， 第 一 个 参数 是 参考 值 ， 第 二 个 参数 是 竺 比 
较 的 数值 。 如 果 第 二 个 参数 大 于 等 于 第 一 个 参数 ， 则 返回 1， 否 则 返回 
0 O 


但 是 ， 这 种 粗暴 的 判断 方法 会 在 高 光 区 域 的 边界 造成 饥 现 ， 如 图 
14.3 左 图 所 示 。 出 现 这 种 问题 的 原因 在 于 ， 高 光 区 域 的 边 毕 不 是 平滑 
变 的， 而 是 由 0 突变 到 1。 要 想 对 其 进行 抗 饥 基 处理， 我 们 可 以 在 边界 
处 很 小 的 一 块 区 域内 ， 进 行 平滑 处 理 。 代 码 如 下 : 


float spec = dot(worldNormal, worldHalfDir); 


spec = lerp(0, 1, smoothstep(-w, w, spec - threshold)); 


在 上 面 的 代码 中 ， 我 们 没有 像 之 前 一 样 直接 使 用 step 函 数 返 回 0 或 
1， 而 是 首先 使 用 了 CG 的 smoothstep 阔 数 。 其 中 ，w 是 一 个 很 小 的 值 ， 
当 spec - threshold 小 于 -w 时 ， 返 回 0， 大 于 w 时 ， 返 回 1， 否 则 在 0 到 1 之 
间 进 行 插值 。 这 样 的 效果 是 ， 我 们 可 以 在 [-w, w] 区 间 内 ， 即 高 光 区 域 
的 边 弄 处 ， 得 到 一 个 从 0 到 1 平滑 变化 的 spec 值 ， 从 而 实现 抗 锯齿 的 目 
的 。 尽 管 我 们 可 以 把 w 设 为 一 个 很 小 的 定 值 ， 但 在 本 例 中 ， 我 们 选择 使 
用 邻 域 像素 之 间 的 近似 导数 值 ， 这 可 以 通过 CG 的 fwidth 范 数 来 得 到 。 


A 图 14.3 左边 : 未 对 高 光 区 域 进行 抗 锯齿 处 理 ， 右 边 : 使 用 fwidth 函 数 对 高 光 区 域 进行 抗 锯 
齿 处 理 


当然 ， 卡 通 演 染 中 的 高 光 往往 有 更 多 个 性 化 的 需要 。 例 如 ， 很 多 
卡通 高 光 特 效 希 望 可 以 随意 伸缩 、 方 块 化 光照 区 域 。Anjyo 等 人 在 他 们 
2003 年 的 一 篇 论文 四 中 给 出 了 一 种 风格 化 的 卡通 高 光 的 实现 。 读 者 也 可 
以 在 这 篇 非 真 实感 泻 染 的 博文 
(http://blog.csdn.net/candycat1992/article/details/47284289) 中 找到 这 种 
方法 在 Unity 中 的 实现 。 


14.1.3 ”实现 


我 们 现在 已 经 有 了 理论 基础 ， 古 时 候 在 Unity 中 验证 我 们 的 结 
了 。 为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene_14_1。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 


平行 光 ， 并 且 使 用 了 内 置 的 天 空 盒子 。 在 Window 一 Lighting ~ 
Skybox 中 去 挥 场景 中 的 天 空 盒子。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
ToonShadingMat ° 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 为 
Chapter14-ToonShading。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 拖 忠 一 个 Suzanne 模 型 ， 并 把 第 2 步 中 的 材质 赋 给 该 
模型 。 


(一 


(5) 保存 场景 。 
打开 Chapter14-ToonShading， 关 键 修改 如 下 。 


(1) 首先 ， 我 们 需要 声明 本 例 使 用 各 个 属性 : 


Properties { 
_Color ("Color Tint", Color) = (1, 1, 1, 1) 
_MainTex ("Main Tex", 2D) = "white" {} 
_Ramp ("Ramp Texture", 2D) = "white" 全 
_Outline ("Outline", Range(0, 1)) = 0.1 


_OutlineColor ("Outline Color", Color) = (0, 0, 0, 1) 
_Specular ("Specular", Color) = (1, 1, 1, 1) 
_SpecularScale ("Specular Scale", Range(0, 0.1)) = 0.01 


} 


其 中 ，_Ramp 古 用 于 控制 得 反射 色调 的 渐变 纹理 ，_Outline 用 于 探 
制 轮廓 线 宽 度 ，_OutlineColor 对 应 了 轮廓 线 颜色 ，_Specular 是 高 光 反 射 
颜色 ，_SpecularScale 用 于 控制 计算 高 光 反 射 时 使 用 的 冰 值 。 


(2) 定义 演 染 轮廓 线 需要 的 Pass。 前 面 提 到 过 ， 这 个 Pass 只 演 染 
背面 的 三 角 面 片 ， 因 此 ， 我 们 需要 设置 正确 的 泻 染 状态 : 


Pass { 


NAME "OUTLINE" 


Cull Front 


我 们 使 用 Cull 指 令 把 正面 的 三 角 面 片 吻 除 ， 而 只 洽 染 有 月 面 。 值 得 注 
意 的 是 ， 我 们 还 使 用 NAME 命 令 为 该 Pass 定 义 了 名 称 。 这 是 因为 ， 描 边 
在 非 真 实感 泻 染 中 是 非常 常见 的 效果 ， 为 该 Pass 定 义 名 称 可 以 让 我 们 在 
后 面 的 使 用 中 不 需要 再 重复 编写 此 Pass， 而 只 需要 调用 它 的 名 字 即 可 。 


(3) 定义 描 边 需要 的 顶点 着 色 器 和 片 元 着 色 器 : 


v2f vert (a2v v) { 
v2f Oo; 


float4 pos = mul(UNITY_MATRIX_MV, v.vertex); 

float3 normal = mul((float3x3)UNITY_ MATRIX_IT_MV, v.normal); 
normal.z = -0.5; 

pos = pos + float4(normalize(normal), 0) * _Outline; 

0.pos = mul(UNITY_MATRIX_P, pos); 


return o; 


} 


float4 frag(v2f i) : SV_Target { 
return float4(_OutlineColor.rgb, 1); 


如 14.1.1 广 所 讲 ， 在 项 后 着 色 右 中 我 们 御 先 把 项 点 和 法 线 变换 到 视 
角 空 间 下 ， 这 是 为 了 让 描 边 可 以 在 观察 空间 达到 最 好 的 效果 。 随 后 ， 
我 们 设置 法 线 的 z 分 量 ， 对 其 归 一 化 后 表 将 顶点 沿 其 方 同 扩张 ， 得 到 扩 
张 后 的 顶 扣 坐标 。 对 法 线 的 处 理 是 为 了 尽 可 能 避免 至 面 扩 张 后 的 顶 斥 
挡住 正面 的 面 片 。 最 后 ， 我 们 把 顶点 从 视角 空间 变换 到 裁剪 空间 。 


片 元 着 色 句 的 代码 非常 简单 ， 我 们 只 需要 用 轮廓 线 闫 色 泻 染 整个 
背面 即 可 。 
(4) 然后 ， 我 们 需要 定义 光照 模型 所 在 的 Pass， 以 演 染 模型 的 正 


面 。 由 于 光照 模型 需要 使 用 Unity 提 供 的 光照 等 信息 ， 我 们 需要 为 Pass 
进行 相应 的 设置 ， 并 添加 相应 的 编译 指令 : 


Pass { 
Tags { "LightMode"="ForwardBase" } 


Cull Back 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


#pragma multi_compile_fwdbase 


在 上 面 的 代码 中 ， 我 们 将 LightMode 设 置 为 ForwardBase， 并 且 使 用 
#pragma 语 句 设 置 了 编译 指令 ， 这 些 都 是 为 了 让 Shader 中 的 光照 变量 可 
以 被 正确 赋值 。 


(5) 随后 ， 我 们 定义 了 顶点 着 色 器 : 


struct v2f { 
float4 pos : POSITION; 
float2 uv : TEXCOORDO; 
float3 worldNormal : TEXCOORD1; 
float3 worldPos : TEXCOORD2; 
SHADOW_COORDS (3 ) 


}; 

v2f vert (a2v v) { 
v2f Oo; 
o0.pos = mul( UNITY_MATRIX_ MVP, Vv.vertex); 
O.UV = TRANSFORM_TEX (v.texcoord, _MainTex ); 
oOo.worldNormal = mul(v.normal, (float3x3)_ World20bject); 
oOo.worldPos = mul(_Object2Wworld, v.vertex).xyz; 


TRANSFER_SHADOW(o ) 


return o; 


在 上 面 的 代码 中 ， 我 们 计算 了 世界 空间 下 的 法 线 方向 和 顶点 位 
置 ， 并 使 用 Unity 提 供 的 内 置 宏 SHADOW_COORDS 和 
TRANSFER_SHADOW 来 计算 阴影 所 需 的 各 个 变量 。 这 些 宏 的 实现 原 
理 可 以 参见 9.47。 


(6) 片 元 着 色 器 中 包含 了 计算 光照 模型 的 关键 代码 : 


float4 frag(v2f i) : SV_Target { 

fixed3 worldNormal = normalize(i.worldNormal ); 

fixed3 worldLightDir = 
normalize(UnityworldSpaceLightDir(i.worldPos)); 

fixed3 worldViewDir = 
normalize(UnityworldSpaceViewDir(i.worldPos)); 

fixed3 worldHalfDir = normalize(worldLightDir + worldViewDir ); 


fixed4 c = tex2D (_MainTex, i.uv); 
fixed3 albedo = c.rgb * _Color.rgb; 


fixed3 ambient = UNITY_LIGHTMODEL AMBIENT.xyz * albedo; 
UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos); 


fixed diff = dot(worldNormal, worldLightDir); 
diff = (diff * 0.5 + 0.5) * atten; 


fixed3 diffuse = _LightCcolorg,rgb * albedo * tex2D(_Ramp, 
float2(diff, diff)).rgb; 


fixed spec = dot(worldNormal, worldHalfDir); 

fixed w = fwidth(spec) * 2.0; 

fixed3 specular = _Specular.rgb * lerp(0, 1, smoothstep(-w, w, 
spec + _SpecularScale 

- 1)) * step(0.0001, _SpecularScale); 


return fixed4(ambient + diffuse + specular, 1.0); 


首先 ， 我 们 计算 了 光照 模型 中 需要 的 各 个 方向 矢量 ， 并 对 它们 进 
行 了 上 归 一 化 处 理 。 然 后 ， 我 们 计算 了 材质 的 反射 率 albedo 和 环境 光照 
ambient。 接 着 ， 我 们 使 用 内 置 的 UNITYLIGHT ATTENUATION 宏 来 计 
算 当 前 世界 坐标 下 的 阴影 值 。 随 后 ， 我 们 计算 了 半 兰 伯 特 漫 反 射 系 
数 ， 并 和 阴影 值 相 乘 得 到 最 终 的 漫 反射 系数 。 我 们 使 用 这 个 漫 反 射 系 
数 对 讲 变 纹理 _Ramp 进 行 采样 ， 并 将 结果 和 材质 的 反射 率 、 光 照 颜色 
相 乘 ， 作 为 最 后 的 漫 反 射 光 照 。 高 光 反 射 的 计算 和 14.1.2 节 中 介绍 的 方 
法 一 致 ， 我 们 使 用 fwidth 对 高 光 区 域 的 边界 进行 抗 饮 痪 处 理 ， 并 将 计算 
而 得 的 高 光 反 射 系数 和 高 光 反 射 颜色 相 乘 ， 得 到 高 光 反 射 的 光照 部 
分 。 值 得 注意 的 是 ， 我 们 在 最 后 还 使 用 了 step(0.000 1， 

_SpecularScale)， 这 是 为 了 在 _SpecularScale 为 0 时 ， 可 以 完全 消除 高 光 
反射 的 光照 。 最 后 ， 返 回环 境 光 照 、 漫 反射 光照 和 高 光 反 射 光 照 琶 加 
的 结 


(7) 最 后 ， 我 们 为 Shader 设 置 了 合适 的 Fallback: 


这 对 产生 正确 的 阴影 投射 效果 很 重要 〈 详 见 9.4P) 。 


本 节 实 现 的 卡通 泻 染 光照 模型 是 一 种 非常 简单 的 实现 。 在 商业 项 
目 中 ， 我 们 往往 需要 设计 和 实现 更 复杂 的 光照 模型 ， 以 得 到 出 色 的 卡 
通 效 采 。 一 个 很 好 的 例子 是 游戏 《军团 要 塞 2》 《英文 名 : Team 
Fortress 2) 的 泻 染 效 果 。Valve 公 司 在 2007 年 发 表 了 一 篇 车 名 的 文章 
3]， 解释 了 他 们 在 实现 该 游戏 时 使 用 的 相关 技术 。 


14.2 素描 风格 的 演 染 


男 一 个 非常 流行 的 非 真 实感 泻 染 是 素描 风格 的 渲染 。 微 软 研究 院 
的 Praun 等 人 在 2001 年 的 SIGGRAPH 上 发 表 了 一 篇 非常 著名 的 论文 轴 。 
在 这 篇 文章 中 ， 他 们 使 用 了 提前 生成 的 素描 纹理 来 实现 实时 的 素描 风 
格 泻 染 ， 这 些 纹理 组 成 了 一 个 色调 艺术 映射 〈Tonal Art Map ， 
TAM) ， 如 图 14.4 所 示 。 在 图 14.4 中 ， 从 左 到 右 纹理 中 的 笔触 逐渐 增 
多 ， 用 于 模拟 不 同 光照 下 的 漫 反 射 效 果 ， 从 上 到 下 则 对 应 了 每 张 纹 理 
的 多 级 渐 远 纹理 (mipmaps) 。 这 些 多 级 渐 远 纹理 的 生成 并 不 是 简单 的 
对 上 一 层 纹 理 进 行 降 采样 ， 而 是 需要 保持 笔触 之 间 的 间隔 ， 以 便 更 真 
实地 模拟 素描 效果 。 
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4 图 14.4 一 个 ITAM 的 例子 (来 源 : Praun E, et al. Real-time hatching[4]) 


本 节 将 会 实现 简化 版 的 论文 中 提出 的 算法 ， 我 们 不 考虑 多 级 渐 远 
纹理 的 生成 ， 而 直接 使 用 6 张 素描 纹理 进行 渲染 。 在 泻 染 阶段 ， 我 们 首 
先 在 顶点 着 色 阶 段 计算 逐 顶点 的 光照 ， 根 据 光 照 结果 来 决定 6 张 纹 理 的 
混合 权重 ， 并 传递 给 片 元 着 色 器 。 然 后 ， 在 片 元 着 色 器 中 根据 这 些 权 
重 来 混合 6 张 纹 理 的 采样 结果 。 在 学 习 完 本 节 后 ， 我 们 会 得 到 类 似 图 
145 的 歼 采 ” 


4 图 14.5 ”素描 风格 的 泻 染 效 采 


为 此 ， 我 们 需要 进行 如 下 准备 工作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene_14 2。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 
平行 光 ， 并 有 旦 使 用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 
中 去 掉 场 景 中 的 天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 HatchingMat 。 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 为 
Chapter14-Hatching。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 在 场景 中 拖 遇 一 个 TeddyBear 模 型 ， 并 把 第 2 步 中 的 材质 赋 给 
该 模型 。 为 了 得 到 更 好 的 效 末 ， 我 们 还 把 一 张 纸张 岁 像 拖 熏 到 场景 中 
作为 育 景 。 


(5) 保存 场景 。 


打开 Chapter14-Hatching， 进 行 如 下 关键 修改 。 


(1) 首先 ， 声 明 演 染 所 需 的 各 个 属性 : 


Properties { 
_Color ("Color Tint", Color) = (1, 1, 1, 1) 
_TileFactor ("Tile Factor", Float) = 1 

Outline ("Outline", Range(0, 1)) = 0.1 

Hatchg 0", 2D) = 

Hatch1 ) 2D) 


"white" {} 
"white" {} 
"white" {} 
"white" {} 
"white" 全 
"white" {} 


Hatch2 ， 2D) 
Hatch3 ;， 2D) 
Hatch4 ) 2D) 
Hatch5 ) 2D) 


其 中 ，_Color 是 用 于 控制 模型 颜色 的 属性 。_TileFactor 是 纹理 的 平 
铺 系数 ，_TileFactor 越 大 ， 模 型 上 的 素描 线条 越 密 ， 在 实现 图 14.5 的 过 
程 中 ， 我 们 把 _TileFactor 设 置 为 8。 _Hatch0 至 _Hatch5 对 应 了 渲染 时 使 
用 的 6 张 素 拉 纹 理 ， 它 们 的 线条 密度 依次 增 大 。 


(2) 由 于 素描 风格 往往 也 需要 在 物体 周围 泻 染 轮廓 线 ， 因 此 我 们 
直接 使 用 14.1 市 中 泻 染 轮廓 线 的 Pass: 


SubShader { 
Tags { "RenderType"="Opaque" "QUueue"="Geometry"} 


UsePass "Unity Shaders Book/Chapter 14/Toon Shading/OUTLINE" 


我 们 使 用 UsePass 命 令 调用 了 14.1 广 中 实现 的 轮廓 线 洽 染 的 Pass， 
Unity Shaders Book/Chapter 14/Toon Shading 对 A 了 14.1 方 中 Chapter14- 
ToonShading 文 件 里 Shader 的 名 字 ， 而 Unity 内 部 会 把 Pass 的 名 称 全 部 转 
成 大 写 格 式 ， 所 以 我 们 需要 在 UsePass 中 使 用 大 写 格 式 的 Pass 名 称 。 


(3) 下 面 ， 我 们 需要 定义 光照 模型 所 在 的 Pass。 为 了 能 够 正确 获 
取 各 个 光照 变量 ， 我 们 设置 了 Pass 的 标签 和 相关 的 编译 指令 


Pass { 
Tags { "LightMode"="ForwardBase" } 


CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


#pragma multi_compile_fwdbase 


(4) 由 于 我 们 需要 在 顶点 着 色 器 中 计算 6 张 纹理 的 混合 权重 ， 我 
们 首先 需要 在 v2f 结 构 体 中 添加 相应 的 变量 


struct v2f { 
float4 pos : SV_POSITION; 
float2 uv : TEXCOORDO; 
fixed3 hatchweights© :; TEXCOORD1.; 
fixed3 hatchweights1 :; TEXCOORD2; 
float3 worldPos : TEXCOORD3; 
SHADOW_COORDS( 4) 


由 于 一 共 声 明了 6 张 纹 理 ， 这 意味 着 需要 6 个 混合 权重 ， 我 们 把 它 
们 存储 在 两 个 fixed3 类 型 的 变量 (hatchWeights0 和 hatchWeights1) 中 。 
为 了 添加 阴影 效果 ， 我 们 还 声明 了 worldPos 变 量 ， 并 使 用 
SHADOW_COORDS 宏 声明 了 阴影 纹理 的 采 : 样 从 标 


(5) 然后 ， 我 们 定义 了 关键 的 顶点 着 色 器 : 


v2f vert(a2v v) { 
v2f Oo; 


0.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


O.UV = Vv.texcoord.xy * _TileFactor; 


fixed3 worldLightDir = normalize(WorldSpaceLightDir(v.vertex)); 
fixed3 worldNormal = UnityObjectToworldNormal(v.normal); 
fixed diff = max(0, dot(worldLightDir, worldNormal)); 


o.hatchweights0 
o.hatchweights1 


fixed3(0, 0, 0); 
fixed3(0, 0, 0); 


float hatchFactor = diff * 7.0; 


if (hatchFactor > 6.0) { 

// Pure white, do nothing 

} else if (hatchFactor > 5.0) { 
o.hatchweights0O.x = hatchFactor - 5.0; 

} else if (hatchFactor > 4.0) { 
o.hatchweights0.x hatchFactor - 4.0; 
o.hatchweightsO.y = 1.0 - 0， natchweightse.x; 

} else if (hatchFactor > 3.0) { 
o.hatchweights0O.y hatchFactor - 3.0; 
o.hatchweights0.z 1.0 - 0o. hatchweightsg.y， 

} else if (hatchFactor > 2.0) { 
o.hatchweights0.z hatchFactor - 2.0; 
o.hatchweights1.x 1.0 - o. hatchweightsg.z， 

} else if (hatchFactor > 1.0) { 
o.hatchweights1.x hatchFactor - 1.0; 
o.hatchweightsi.y = 1.0 - o.hatchweights1.x; 

} else { 
o.hatchweights1.y 
o.hatchweights1.z 


hatchFactor; 
1.0 - o.hatchweights1.y; 


oOo.worldPos = mul(_Object2Wworld, v.vertex).xyz; 


TRANSFER_SHADOW(o); 


return o; 


我 们 首先 对 顶点 进行 了 基本 的 坐标 变换 。 人 然后， 使 用 _TileFactor 得 
到 了 纹理 采样 坐标 。 在 计算 6 张 纹理 的 混合 权重 之 前 ， 我 们 首先 需要 计 
算 了 未 顶 后 光 照 。 因 此 ， 我 们 使 用 世界 空间 下 的 光照 方向 和 法 线 方 同 得 
到 漫 反 射 系 数 diff。 之 后 ， 我 们 把 权重 值 初始 化 为 0， 并 把 diff 缩 放 到 [0， 
7] 范 围 ， 得 到 hatchFactor。 我 们 把 [0, 7] 的 区 间 均 匀 划 分 为 7 个 子 区 间 ， 
是 过 判断 hatchFactor 所 处 的 和子 区 间 来 计算 对 应 的 纹理 混合 权重 。 最 后 ， 


我 们 计算 了 顶点 的 世界 坐标 ， 并 使 用 TRANSFER_SHADOW 宏 来 计算 
阴影 纹理 的 采样 坐标 。 


(6) 接 下 来 ， 定 义 片 元 着 色 器 部 分 : 


fixed4 frag(v2f i) : SV_Target { 
fixed4 hatchTex0 tex2D(_HatchO, i.uv) i.hatchweightso0. 
fixed4 hatchTex1 tex2D(_Hatch1, i.uv) i.hatchweightso0.y; 
fixed4 hatchTex2 tex2D(_Hatch2, i.uv) i.hatchweightso0.z; 
fixed4 hatchTex3 tex2D(_Hatch3, i.uv) i.hatchweights1.x; 
fixed4 hatchTex4 tex2D(_Hatch4, i.uv) i.hatchweights1.y; 
fixed4 hatchTex5 tex2D(_Hatch5, i.uv) i.hatchweights1.z; 
fixed4 whiteColor = fixed4(1, 1, 1, 1) * (1 - i.hatchweightso0.x 
- i.hatchweightsO.y - i.hatchweights0.z - 
i.hatchweights1i.x - i.hatchweightsi.y - 


i.hatchweights1.z); 


fixed4 hatchColor = hatchTex0 + hatchTex1 + hatchTex2 + 
hatchTex3 + hatchTex4 + hatchTex5 + whiteColor; 


UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos); 


return fixed4(hatchColor.rgb * _Color.rgb * atten, 1.0); 


当 得 到 了 6 六 张 纹理 的 温 合 权重 后 ， 我 们 对 每 张 纹 理 进 行 采样 并 和 
它们 对 应 的 权重 值 相 乘 得 到 每 张 纹理 的 采样 颜色 。 我 们 还 计算 了 纯 日 
在 演 染 中 的 贡献 度 ， 这 是 通过 从 1 中 减 去 所 有 6 张 纹 理 的 权重 来 得 到 
的 。 这 是 因为 素描 中 往往 有 和 留 白 的 部 分 ， 因 此 我 们 希望 在 最 后 的 泻 染 
中 光照 最 亮 的 部 分 是 纯 日 色 的 。 最 后 ， 我 们 混合 了 各 个 颜色 值 ， 并 和 
阴影 值 atten、 模 型 颜色 _Color 相 乘 后 返回 最 终 的 演 染 结果 。 


(7) 最 后 ， 我 们 设置 了 合适 的 Fallback: 


读者 也 可 以 生成 与 本 例 不 同 的 素 摘 纹理， 具体 方法 可 以 参见 论文 
中。 这 篇 博文 (https://alastaira. wordpress.com/2013/11/01/hand-drawn- 
shaders-and-creating-tonal-art-maps/) 中 还 介绍 了 一 种 使 用 Photoshop 等 
软件 创建 相似 的 素描 纹理 的 方法 。 


14.3 扩展 阅读 


在 工业 界 ， 非 真实 感 泻 染 已 被 应 用 到 很 多 成 功 的 游戏 中 ， 除 了 之 
前 提 及 的 《大 神 》 和 《和 军团 要 蹇 2》 外 ， 还 有 最 近 的 《海岛 奇兵 》《 三 
国志 》 等 游戏 都 可 以 看 到 非 真实 感 洽 染 的 喘 影 。 在 学 术 界 ， 有 更 多 出 
色 的 非 真 实感 泻 染 的 工作 被 提 了 出 来 。 读 者 可 以 在 国际 讨论 会 NPAR 

(Non-Photorealistic Animation and Rendering) 上 找到 许多 关于 非 真实 
感 泻 染 的 论文 。 浙 江 大 学 的 耿 卫 东 教 授 编 入 的 书籍 《艺术 化 绘制 的 图 
形 学 原理 与 方法 》 《英文 名 : The Algorithms and Principles of Non- 
photorealistic Graphics) (中 ， 也 是 非常 好 的 学 习 材料 。 这 本 书 概述 了 近 
年 来 非 真实 感 泻 染 在 各 个 领域 的 发 展 ， 并 倍 述 了 许多 有 重要 页 献 的 算 
法 过 程 ， 是 一 本 非常 好 的 参考 书籍 。 


U 


在 Unity 的 资源 商店 中 ， 也 有 许多 优秀 的 非 真 实感 洽 染 从 源 。 例 
如 ，Toon Shader Free 
(https://www.assetstore.unity3d.com/cn/#!/content/21288) 是 一 个 免费 的 
卡通 资源 包 ， 里 面 实现 了 包括 轮廓 线 洽 染 等 卡通 风格 的 渲染 。Toon 
Styles Shader Pack (https://www.assetstore.unity3d.com/ 
cn/#!/content/7212) 是 一 个 需要 收费 的 卡通 资源 包 ， 它 包含 了 更 多 的 卡 
通风 格 的 Unity Shader。Hand-Drawn Shader Pack 


(https://www.assetstore.unity3d.com/cn/#!/content/12465) 同样 是 一 个 需 


要 收费 的 非 真实 感 泻 染 效 果 包 ， 它 包含 了 诸如 铅笔 泻 染 、 蜡 笔 演 染 等 
多 种 手绘 风格 的 非 真 实感 泻 染 效果 。 
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第 15 章 ”使 用 噪声 


很 多 时 候 ， 疝 规则 的 事物 里 添加 一 些 “ 洒 乱 无 章 ” 的 效果 往往 会 有 
意 想 不 到 的 效果 。 而 这 些 “ 杂 乱 无 章 ” 的 效果 来 源 束 是 噪声 。 在 本 章 
中 ， 我 们 将 会 学 习 如 何 使 用 噪声 来 模拟 各 种 看 似 “ 神 奇 " 的 特效 。 在 15.1 
斑 中 ， 我 们 将 使 用 一 张 噪声 纹理 来 模拟 火焰 的 消融 效 末 。15.2 下 则 把 吕 
声 应 用 在 模拟 水 面 的 波动 上 ， 从 而 产生 流光 妾 刍 的 视觉 效果 。 在 15.3 王 
中 ， 我 们 会 回顾 13.3 太 中 实现 的 全 局 筋 效 ， 并 向 其 中 添加 品 声 来 模拟 不 
均匀 的 味 各 筋 效 。 


15.1 消融 效果 


消融 (dissolve) 效果 常见 于 游戏 中 的 角色 死亡 、 地 图 烧毁 等 效 
果 。 在 这 些 效 果 中 ， 消 融 往往 从 不 同 的 区 域 开始 ， 并 向 看 似 随机 的 方 
同 扩 张 ， 最 后 整个 物体 都 将 消失 不 见 。 在 本 方 中 ， 我 们 将 学 习 如 何在 
Unity 中 实现 这 种 效果 。 在 学 习 完 本 和 后 ， 我 们 可 以 得 到 类 似 图 15.1 中 
的 效果 。 


Maximize on Play | Mute audio | Stats | Gizmos ”| 


A 图 15.1 箱子 的 消融 效果 


要 实现 图 15.1 中 的 效果 ， 原 理 非常 油 单 ， 概 括 来 说 束 是 噪声 纹理 
+ 透明 度 测 试 。 我 们 使 用 对 噪声 纹理 采样 的 结果 和 某 个 控制 消融 程度 的 
阔 值 比较 ， 如 果 小 于 阔 值 ， 就 使 用 clip 函 数 把 它 对 应 的 像素 裁剪 掉 ， 这 
些 部 分 束 对 应 了 图 中 被 <“ 底 吗 ?” 的 区 域 。 而 铁 空 区 域 边缘 的 煤 焦 效果 则 
是 将 两 种 颜色 混合 ， 再 用 pow 函 数 处 理 后 ， 与 原 纹理 颜色 混合 后 的 结 


浊 


为 了 实现 上 述 消融 效果 ， 我 们 首先 进行 如 下 准备 工作 。 


(1) 在 Unity 中 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene_15 1。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 
1 Ce 
中 去 掉 场 景 中 的 天 至 盒 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 DissolveMat 。 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 为 
Chapter15-Dissolve。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 我 们 需要 搭建 一 个 测试 消融 的 场景 。 在 本 书 资源 的 实现 中 ， 
我 们 构建 了 一 个 包含 3 面 墙 的 房间 ， 并 放置 了 一 个 立方 体 。 把 第 2 步 创 
建 的 材质 拖 暇 给 立方 体 。 


(5) 保存 场景 。 
打开 Chapter15-Dissolve， 删 除 原 有 代码 ， 进 行 如 下 天 键 修 改 。 
(1) 首先 ， 声 明 消 融 效 果 需 要 的 各 个 属性 : 


Properties { 
_BurnAmount ("Burn Amount", Range(0.0, 1.0)) 
Linewidth("Burn Line Width", Range(0.0, 0.2) 
MainTex ("Base (RGB)", 2D) = "white" {} 
BumpMap ("Normal Map", 2D) = "bump"” 人 
1, 0, 0, 1) 


BurnSsecondColor("Burn Second Color", Color) (1, 0, 0, 1) 


_BurnFirstCcolor ("Burn First Color", Color) 
_BurnMap( "Burn Map", 2D) = "white"{} 


} 


_BurmAmount 属 性 用 于 控制 消融 程度 ， 当 值 为 0 时 ， 物 体 为 正常 效 
果 ， 当 值 为 1 时 ， 物 体会 完全 消融 。_LineWidth 属 性 用 于 控制 模拟 烧 焦 
效果 时 的 线 腕 ， 它 的 值 越 大 ， 火 燃 边 毕 的 葛 延 范围 越 广 。_MainTex 和 
_BumpMap 分 别 对 应 了 物体 原本 的 洲 反 喘 纹 理 和 法 线 纹理 。 
_BurnFirstColor 和 _BurnSecondColor 对 应 了 火焰 边缘 的 两 种 颜色 值 。 
_BurnMap 则 是 关键 的 噪声 纹理 。 


(2) 我 们 在 SubShader 块 中 定义 消融 所 需 的 Pass: 


Pass { 
Tags { "LightMode"="ForwardBase" } 


Cull Off 
CGPROGRAM 


#include "Lighting.cginc" 
#include "AutoLight.cginc" 


#pragma multi_compile_fwdbase 


为 了 得 到 正确 的 光照 ， 我 们 设置 了 Pass 的 LightMode 和 
multi_compile_fwdbase 的 编译 指令 。 值 得 注意 的 是 ， 我 们 还 使 用 Cull 命 
令 关 闭 了 该 Shader 的 面 片 别 除 ， 也 束 是 说 ， 模 型 的 正面 和 痛 面 都 会 被 泻 
染 。 这 是 因 为 ， 消 融会 导致 裸露 模型 内 部 的 构造 ， 如 有 果 只 泻 染 正面 会 
出 现 错误 的 结果 。 


(3) 定义 顶点 着 色 器 : 


struct v2f { 
float4 pos : SV_POSITION; 
float2 uvMainTex : TEXCOORDO; 
float2 uvBumpMap : TEXCOORD1; 
float2 uvBurnMap : TEXCOORD2;,; 
float3 lightDir : TEXCOORD3; 
float3 worldPos : TEXCOORD4; 
SHADOW_COORDS(5 ) 


}; 


v2f vert(a2v v) { 
v2f Oo; 
oO.pos = mul(UNITY_MATRIX_MVP, v.vertex); 


oO.UvMainTex 
o,.UVBumpMap 
o,.UVBurnMap 


TRANSFORM_TEX(Vv.texcoord, _MainTex); 
TRANSFORM_TEX(Vv.texcoord, _BumpMap); 
TRANSFORM_TEX(Vv.texcoord, _BurnMap); 


TANGENT_SPACE_ROTATION;,; 
o0.1ightDir = mul(rotation, ObjSpaceLightDir(v.vertex)).xyz; 


oOo.worldPos = mul(_Object2Wworld, v.vertex).xyz; 


TRANSFER_SHADOW(o ) 


return o; 


顶点 着 色 句 的 代码 很 常规 。 我 们 使 用 宏 TRANSFORM_TEX 计 算 了 
三 张 纹理 对 应 的 纹理 坐标 ， 再 把 光源 方向 从 模型 空间 变换 到 了 切线 空 
间 。 最 后 ， 为 了 得 到 阴影 信息 ， 计 算 了 世界 空间 下 的 顶点 位 置 和 阴影 
纹理 的 采样 坐标 (使 用 了 TRANSFER_SHADOW 宏 ) 。 具 体 原理 可 参 
见 9.4 节 。 


(4) 我 们 还 需要 实现 片 元 着 色 器 来 模拟 消融 效果 : 


fixed4 frag(v2f i) : SV_Target { 
fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb; 


clip(burn.r - _BurnAmount); 

float3 tangentLightDir = normalize(i.1lightDir); 

fixed3 tangentNormal = UnpackNormal(tex2D(_BumpMap, 
i.uvBumpMap ) ) ; 

fixed3 albedo = tex2D(_MainTex, i.uvMainTex).rgb; 


fixed3 ambient UNITY_LIGHTMODEL_AMBIENT.xyz * albedo; 


fixed3 diffuse = _LightCcolorg,rgb * albedo * max(0, 


dot(tangentNormal, tangentLightDir)); 


fixed t = 1 - smoothstep(0.0, _Linewidth, burn.r - 
_BurnAmount ) ， 


fixed3 burnColor = lerp(_BurnFirstColor, _BurnSecondColor, t); 
burncolor = pow(burnColor, 5); 


UNITY_LIGHT_ATTENUATION(atten, i, i.worldPos); 
fixed3 finalColor = lerp(ambient + diffuse * atten, burnColor, 
t * Step(0.0001，_BurnAmount ) ) ， 


return fixed4(finalColor, 1); 


我 们 站 先 对 喉 声 纹理 进行 采样 ， 并 将 采样 结果 和 用 于 控制 消融 程 
度 的 属性 _BurnAmount 相 减 ， 传 递 给 clip 函 数 。 当 结果 小 于 0 时 ， 该 像素 
将 会 被 剔除 ， 从 而 不 会 显示 到 屏幕 上 。 如 有 果 通 过 了 测试 ， 则 进行 正常 
的 光照 计算 。 我 们 首先 根 据 刘 反 射 纹理 得 到 材质 的 反射 率 albedo， 并 由 
此 计算 得 到 环境 光照 ， 进 而 得 到 漫 反 射 光 照 。 然 后 ， 我 们 计算 了 烧 焦 
颜色 burnColor 。 我 们 想 要 在 宽度 为 _LineWidth 的 范围 内 模拟 一 个 烧 焦 
的 颜色 变化 ， 第 一 步 就 使 用 了 smoothstep 函 数 来 计算 混合 系数 t。 当 1 值 
为 时， 表明 该 像素 位 于 消融 的 边界 处 ， 当 t 值 为 0 时 ， 表 明 该 像素 为 正 
常 的 模型 颜色 ， 而 中 间 的 插值 则 表示 需要 模拟 一 个 烧 焦 效果 。 我 们 首 
先 用 t 来 混合 两 种 火焰 颜色 _BurnFirstColor 和 _BurnSecondColor， 为 了 让 
效果 更 接近 底 焦 的 痕迹 ， 我 们 还 使 用 pow 男 数 对 结果 进行 处 理 。 然 后 ， 
我 们 再 次 使 用 t 来 混合 正常 的 光照 颜色 〈 环 境 光 + 漫 反 射 ) 和 烧 焦 颜色 。 
我 们 这 里 又 使 用 了 step 函 数 来 保证 当 _BurnAmount 为 0 时 ， 不 显示 任何 
消融 效 采 。 最 后 ， 返 回 混 合 后 的 颜色 人 finalColor 。 


(5) 与 之 前 的 实现 不 同 ， 我 们 在 本 例 中 还 定义 了 一 个 用 于 投射 阴 
影 的 Pass。 正 如 我 们 在 9.4.5 节 中 的 解释 一 样 ， 使 用 透明 度 测 试 的 物体 的 
阴影 需要 特别 处 理 ， 如 有 果 仍 然 使 用 普通 的 阴影 Pass， 那 么 被 剔除 的 区 域 
仍然 会 问 其 他 物体 投射 阴影 ， 造 成 * 罕 帮 ”。 为 了 让 物体 的 阴影 也 能 配 
合 透 明度 测试 产生 正确 的 效果 ， 我 们 需要 目 定 义 一 个 投射 阴影 的 Pass: 


// Pass to render object as a shadow caster 
Pass { 
Tags { "LightMode" = "ShadowCaster" } 


CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


#pragma multi_compile_shadowcaster 


在 Unity 中 ， 用 于 投射 阴影 的 Pass 的 LightMode 需 要 被 设置 为 
ShadowCaster， 同 时 ， 还 需要 使 用 元 ragma multi_compile_shadowcaster 
和 明 它 需要 的 编译 指令 


顶点 着 色 器 和 片 元 着 色 句 的 代码 很 位 单 : 


struct v2f { 

V2F_SHADOW_CASTER ， 

float2 uvBurnMap : TEXCOORD1， 
}; 


v2f vert(appdata base v) { 
v2f Oo; 


TRANSFER_SHADOW_CASTER_NORMALOFFSET(o ) 
oO.UvBurnMap = TRANSFORM_TEX(v.texcoord, _BurnMap); 


return o; 


} 


fixed4 frag(v2f i) : SV_Target { 
fixed3 burn = tex2D(_BurnMap, i.uvBurnMap).rgb; 


clip(burn.r - _BurnAmount); 


SHADOW_CASTER_FRAGMENT(I) 


阴影 投射 的 重点 在 于 我 们 需要 按 正常 Pass 的 处 理 来 剔除 片 元 或 进行 
顶点 动画 ， 以 便 阴 影 可 以 和 物体 正常 渲染 的 结果 相 匹 配 。 在 自 定义 的 
明 影 投射 的 Pass 中 ， 我 们 通常 会 使 用 Unity 提 供 的 内 置 宏 
V2FSHADOW_CASTER 、 
TRANSFER_SHADOW_CASTER_NORMALOFFSET (万 上 旗 天 办 会 秃 历 
TRANSFER_SHADOW_CASTER) 知 SHADOW_CASTER_FRAGMENT 夹 
郑 励 茂 旋 节 咎 万 明 帮 和 翼 计 往 砚 各 劲 变 熏 ， 历 我 休 可 以 只 关注 月 定义 
太 营 的 部 分 。 在 上 历 的 代码 中 ， 我 们 首先 站 v2f 结 移 伯 中 刊 历 


V2F_SHADOW_CASTER 来 定义 厄 散 帮 田 需要 定义 的 变 熏 。 彤 厅 ， 在 太 
点 壹 色 静 四， 我 们 使 历 
TRANSFER_SHADOW_CASTER_NORMALOFFSET 夹 苇 亢 
V2F_SHADOW CASTER 在 背后 声明 的 一 些 变量 ， 这 是 由 Unity 在 背后 为 
我 们 完成 的 。 我 们 需要 在 顶点 着 色 句 中 关注 自 定义 的 计算 部 分 ， 这 里 
指 的 就 是 我 们 需要 计算 噪声 纹理 的 采样 坐标 vwBurmMap。 在 片 元 着 色 器 
中 ， 我 们 自 先 按 之 前 的 处 理 方法 使 用 噪声 纹理 的 采样 结果 来 吻 除 片 

元 ， 最 后 再 利用 SHADOW_CASTER_FRAGMENT 来 让 Unity 为 我 们 完 
成 阴影 投射 的 部 分 ， 把 结果 输出 到 深度 图 和 阴影 映射 纹理 中 。 


通过 Unity 提 供 的 这 3 个 内 置 宏 (在 UnityCG.cginc 文 件 中 被 定义 ) ， 
我 们 可 以 方便 地 目 定义 需要 的 阴影 投射 的 Pass， 但 由 于 这 些 宏 需要 使 用 
一 些 特定 的 输入 变量 ， 因 此 我 们 需要 保证 为 它们 提供 了 这 些 变量 。 例 
如 ，TRANSFERSHADOW_CASTER_NORMALOFFSET 会 使 用 名 堵 y 作 为 
狂人 入 绍 构 休 ， Vv 中超 要 包 人 对 质点 位 蔬 Vv.vertex 彻 质点 法 线 v.normal 的 语 
息 ， 我 们 可 以 让 楼 使 用 认 种 fyjappdata_base 缔 移 休 ， 它 包含 以 些 必需 
的 大 点 变 熏 。 妨 区 我 仿 入 要 丰 行 拓扑 动 古 ， 可 以 正大 扣 毒 名 殉 让 记 巷 
修改 vvertex， 再 夸 详 纷 TRANSFER_SHADOW 
CASTER_NORMALOFFSET 即 可 〈 可 参见 11.3.3 节 ) 。 


在 本 例 中 ， 我 们 使 用 的 噪声 纹理 (对 应 本 书 资源 的 
Assets/Textures/Chapter15/Burn_Noise.png) 如 图 15.2 所 示 。 把 它 拖 电 到 
材质 的 _BurmMap 属 性 上 ， 再 调整 材质 的 _BurnAmount 属 性 ， 束 可 以 看 
到 木 箱 未 渐 消融 的 效果 。 在 本 书 资源 的 实现 中 ， 我 们 实现 了 一 个 辅助 
脚本 ， 用 来 随时 间 调 整 材质 的 _ BurnAmount 值 ， 因 此 ， 当 读者 单 击 运行 
后 ， 也 可 以 看 到 消融 的 动画 效果 。 


A 图 15.2 ”消融 效果 使 用 的 噪声 纹理 


使 用 不 同 的 噪声 和 纹理 属性 ( 即 材质 面板 上 纹理 的 Tiling 和 Offset 
值 ) 都 会 得 到 不 同 的 消融 效果 。 因 此 ， 要 想得到 好 的 消融 效果 ， 也 需 
要 美术 人 员 提 供 合适 的 噪声 纹理 来 配合 。 


15.2 水 波 效果 


在 模拟 实时 水 面 的 过 程 中 ， 我 们 往往 也 会 使 用 噪声 纹理 。 此 时 ， 
噪声 纹理 通 稼 会 用 作 一 个 高 度 图 ， 以 不 断 修改 水 面 的 法 线 方向 。 为 了 
模拟 水 不 断 流 动 的 效果 ， 我 们 会 使 用 和 时 间 相 关 的 变量 来 对 噪声 纹理 
进行 采样 ， 当 得 到 法 线 信息 后 ， 再 进行 正常 的 反射 + 折 里 计 算 ， 得 到 最 
后 的 水 面 波动 效果 。 


在 本 节 中 ， 我 们 将 会 使 用 一 个 由 噪声 纹理 得 到 的 法 线 贴图 ， 实 现 
一 个 包含 菲 涅 耳 反 射 〈 详 见 10.1.5 节 ) 的 水 面 效果 ， 如 图 15.3 所 示 。 


图 15.3 ”包含 菲 涅 耳 反 射 的 水 面 波动 效果 。 在 左边 中 ， 视 角 方 向 和 水 面 法 线 的 夹 角 越 大 ， 反 
射 效 果 越 强 。 在 右边 中 ， 视 角 方 向 和 水 面 法 线 的 夹 角 越 大 ， 折 射 效 果 越 强 


全 


我 们 曾 在 10.2.2 节 介绍 过 如 何 使 用 反射 和 折射 来 模拟 一 个 透明 玻璃 
的 效果 。 本 市 使 用 的 Shader 和 10.2.2 市 中 的 实现 基本 相同 。 我 们 使 用 一 
张 立 方 体 纹理 (Cubemap) 作为 环境 纹理 ， 模 拟 反射 。 为 了 模拟 折射 效 
果 ， 我 们 使 用 GrabPass 来 获取 当前 屏幕 的 泻 染 纹理 ， 并 使 用 切线 空间 下 
的 法 线 方 向 对 像素 的 屏幕 坐标 进行 侦 移 ， 再 使 用 该 坐标 对 演 染 纹理 进 
行 屏 幕 采样 ， 从 而 模拟 近似 的 折射 效果 。 与 10.2.2 世 中 的 实现 不 同 的 
是 ,水波 的 法 线 纹理 是 由 一 张 噪声 纹理 生成 而 得 ， 而 且 会 随 着 时 间 变 
化 不 断 平 移 ， 模 拟 波光 阁 关 的 效果 。 除 此 之 外 ， 我 们 没有 使 用 一 个 定 
值 来 混合 反射 和 折射 颜色 ， 而 是 使 用 之 前 提 到 的 菲 涅 耳 系 数 来 动态 决 
定 混合 系数 。 我 们 使 用 如 下 公式 来 计算 菲 涅 耳 系 数 : 


fresnel=pow(1-max(0,v : n),4) 


其 中 ，v 和 n 分 别 对 应 了 视角 方向 和 法 线 方向 。 它 们 之 间 的 夹 角 越 
小 ，fresnel 值 越 小 ， 反 映 越 弱 ， 折 射 越 强 。 菲 涅 耳 系 数 还 经 常会 用 于 边 
绿 光 照 的 计算 中 。 


为 此 ， 我 们 需要 做 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene_15 2。 在 
Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 使 
用 了 内 置 的 天 空 盒子 。 在 Window -> Lighting -> Skybox 中 去 掉 场 景 中 的 
天 空 盒子 。 


(2) 新 建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 WaterWaveMat 。 


(3) 新 建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter15-WaterWave。 把 新 的 Shader 赋 给 第 2 步 中 创建 的 材质 。 


(4) 构建 一 个 测试 水 波 效果 的 场景 。 在 本 书 资源 的 实现 中 ， 我 们 
构建 了 一 个 由 6 面 墙 转 成 的 封闭 房 提 ， 它 们 都 使 用 了 我 们 在 9.5 闻 中 创建 
的 标准 材质 。 我 们 还 在 房间 中 放置 了 一 个 平面 来 模拟 水 面 。 把 第 2 步 中 
创建 的 材质 赋 给 该 平面 。 


(5) 为 了 得 到 本 场景 适用 的 环境 纹理 ， 我 们 使 用 了 10.1.2 节 中 实 
现 的 创建 立方 体 纹理 的 脚本 〈 通 过 Gameobject -> Render into Cubemap 
打开 编辑 窗口 ) 来 创建 它 ， 如 图 15.4 所 示 。 在 本 书 资源 中 ， 该 Cubemap 
名 为 Water_Cubemap。 


Ea Water_Cubemap 


图 15.4 ”本 例 使 用 的 立方 体 纹理 


> 


完成 准备 工作 后 ， 打 开 Chapter15-WaterWave， 对 它 进行 如 下 关键 
修改 。 


(1) 首先 ， 我 们 需要 声明 该 Shader 使 用 的 各 个 属性 : 


Properties { 
_Color ("Main Color", Color) = (0, 0.15, 0.115, 1) 
_MainTex ("Base (RGB)", 2D) = "white" {} 
_WaveMap ("Wave Map", 2D) = "bump" {} 


_Cubemap ("Environment Cubemap", Cube) = "_Skybox" 人 


_WaveXSpeed ("Wave Horizontal Speed", Range(-0.1, 0.1)) = 0.01 
_WaveYSpeed ("Wave Vertical Speed", Range(-0.1, 0.1)) = 0.01 
_Distortion ("Distortion", Range(©0, 100)) = 10 


其 中 ，_Color 用 于 控制 水 面 颜 色 ，_MainTex 是 水 面 波纹 材质 纹理 ， 
默认 为 日 色 纹理 ，_WaveMap 是 一 个 由 噪声 纹理 生成 的 法 线 纹理 ; 
_Cubemap 是 用 于 模拟 反射 的 立方 体 纹理 ，_Distortion 则 用 于 控制 模拟 


折射 时 图 像 的 扭曲 程度 ，_WaveXSpeed 和 _WaveYSpeed 分 别 用 于 控制 法 
线 纹理 在 X 和 Y 方 向 上 的 平移 速度 。 


(2) 定义 相应 的 泻 染 队列 ， 并 使 用 GrabPass 来 获取 屏幕 图 像 : 


SubShader { 

// We must be transparent, so other objects are drawn before 
this one. 

Tags { "Queue"="Transparent" "RenderType"="Opaque" } 


// This pass grabs the screen behind the object into a texture. 
// We can access the result in the next pass as _RefractionTex 
GrabPass { "_RefractionTex" } 


我 们 首先 在 SubShader 的 标签 中 将 泻 染 队列 设置 成 Transparent， 并 
把 后 面 的 RenderType 设 置 为 Opaque。 把 Queue 设 置 成 Transparent 可 以 确 
保 该 物体 洽 染 时 ， 其 他 所 有 不 透明 物体 都 已 经 被 泻 染 到 屏幕 上 了 ， 否 
则 吏 可 能 无 法 正确 得 到 * 透 过 水 面 看 到 的 图 像 ”*。 而 设置 RenderType 则 是 
为 了 在 使 用 着 色 器 替换 (Shader Replacement) 时 ， 该 物体 可 以 在 需要 
时 被 正确 泻 染 。 这 通常 发 生 在 我 们 需要 得 到 摄像 机 的 深度 和 法 线 纹理 
时 ， 这 在 第 13 章 中 介绍 过 。 随 后 ， 我 们 通过 关键 词 GrabPass 定 义 了 一 个 
抓 取 屏幕 图 像 的 Pass。 在 这 个 Pass 中 我 们 定义 了 一 个 字符 串 ， 该 字符 串 
内 部 的 名 称 决定 了 抓 取 得 到 的 屏幕 图 像 将 会 被 存 入 哪个 纹理 中 (可 参 
见 10.2.2 节 ) 。 


SN 


(3) 定义 泻 染 水 面 所 需 的 Pass。 为 了 在 Shader 中 访问 各 个 属性 ， 
我 们 首先 需要 定义 它们 对 应 的 变量 : 


fixed4 _Color; 
sampler2D _MainTex; 
float4 MainTex_ST; 
sampler2D _wWaveMap; 
float4 _WaveMap_ST; 
samplerCUBE _Cubemap; 


fixed _WaveXxSpeed ; 

fixed _WaveYSpeed ; 

float _Distortion; 

sampler2D _RefractionTex; 

float4 _RefractionTex_TexelSize; 


需要 注意 的 是 ， 我 们 还 定义 了 _RefractionTex 和 
_RefractionTex_TexelSize 变 量 ， 这 对 应 了 在 使 用 GrabPass 时 ， 指 定 的 约 
理 名 称 。_RefractionTex_TexelSize 可 以 让 我 们 得 到 该 纹理 的 纹 素 大 小 ， 
例如 一 个 大 小 为 256x512 的 纹理 ， 它 的 纹 素 大 小 为 (1/256, 1/512)。 我 们 
需要 在 对 屏幕 图 像 的 采样 坐标 进行 偏 移 时 使 用 该 变量 。 


(4) 定义 顶点 着 色 器 ， 这 和 10.2.2 节 中 的 实现 完全 一 样 : 


struct v2f { 
float4 pos : SV_POSITION; 
float4 scrPos : TEXCOORDO; 
float4 uv : TEXCOORD1.; 
float4 TtowoO : TEXCOORD2; 
float4 Ttow1 : TEXCOORD3; 
float4 Ttow2 : TEXCOORD4; 


}; 

v2f vert(a2v v) { 
v2f Oo; 
0.pos = mul(UNITY_ MATRIX_MVP, v.vertex); 
oO.scrPos = ComputeGrabScreenpPos(o.pos); 


O.UV.Xy 
O.UV.ZW 


TRANSFORM_TEX(Vv.texcoord, _MainTex); 
TRANSFORM_TEX(Vv.texcoord, _WaveMap); 


float3 worldPos = mul(_Object2Wworld, v.vertex).xyz; 

fixed3 worldNormal = UnityObjectToworldNormal(v.normal); 

fixed3 worldTangent = UnityObjectToworldDir(v.tangent.xyz); 

fixed3 worldBinormal = cross(worldNormal, worldTangent) * 
Vv.tangent.w; 


Oo.TtowoO = float4(worldTangent.x, worldBinormal.x, 
worldNormal.x, worldPos.x); 

oOo.Ttow1 = float4(worldTangent.y, worldBinormal.y, 
worldNormal.y, worldPos.y); 

oOo.Ttow2 = float4(worldTangent.z, worldBinormal.z, 
worldNormal.z, worldPos.z); 


return o; 
} 


在 进行 了 必要 的 顶点 坐标 变换 后 ， 我 们 通过 调用 
ComputeGrabScreenPos 来 得 到 对 应 被 抓 取 屏 幕 图 像 的 采样 坐标 。 读 者 可 
以 在 UnityCG.cginc 文 件 中 找到 它 的 声明 ， 它 的 主要 代码 和 
ComputeScreenPos 基 本 类 似 ， 最 大 的 不 同 是 针对 平台 差异 造成 的 采样 坐 
标 问题 ( 见 5.6.1 节 ) 进行 了 处 理 。 接 着 ， 我 们 计算 了 _MainTex 和 
_BumpMap 的 采样 坐标 ， 并 把 它们 分 别 存储 在 一 个 float4 类 型 变量 的 xy 
和 zw 分 量 中 。 由 于 我 们 需要 在 片 元 着 色 器 中 把 法 线 方向 从 切线 空间 
(由 法 线 纹理 采样 得 到 ) 变换 到 世界 空间 下 ， 以 便 对 Cubemap 进 行 采 
样 ， 因 此 ， 我 们 需要 在 这 里 计算 该 顶点 对 应 的 从 切线 空间 到 世界 空间 
的 变换 矩阵 ， 并 把 该 矩阵 的 每 一 行 分 别 存储 在 TtoW0、TtoW1 和 TtowW2 
的 xyz 分 量 中 。 这 里 面 使 用 的 数学 方法 殉 是 ， 得 到 切线 空间 下 的 3 个 坐标 
轴 (x、y、z 轴 分 别 对 应 了 切线 、 副 切线 和 法 线 的 方向 ) 在 世界 空间 下 
的 表示 ， 再 把 它们 依次 按 列 组 成 一 个 变换 矩阵 即 可 。Ttow0 等 值 的 w 分 
量 同样 袖 利 用 起 来 ， 用 于 存储 世界 空间 下 的 顶点 坐标 。 


(5) 定义 片 元 着 色 器 : 


fixed4 frag(v2f i) : SV_Target { 
float3 worldPos = float3(i.TtowO.w, i.Ttowi.w, i.TtoWw2.w); 
fixed3 viewDir = normalize(UnityworldSpaceViewDir(worldPos)); 
float2 Speed = Time.y * float2(_WaveXSpeed, _WaveYSpeed); 


// Get the normal in tangent space 

fixed3 bump1 = UnpackNormal(tex2D(_WaveMap, i.uVv.zw + 
speed)).rgb; 

fixed3 bump2 = UnpackNormal(tex2D(_WaveMap, i.uVv.zw - 
speed)).rgb; 

fixed3 bump = normalize(bump1 + bump2); 


// Compute the offset in tangent space 
float2 offset = bump.xy * _Distortion * 


_RefractionTex_TexelSize,.wxy; 
i,.scrPos.xy = offset * i,.scrPos.z + i.scrPos.xy; 
fixed3 refrCol = tex2D( _RefractionTex, 
i,scrPos.xy/i.scrPos.w).rgb; 


// Convert the normal to world space 

bump = normalize(half3(dot(i.TtowoO.xyz, bump), dot(i.Ttowi1.xyz, 
bump), dot(i.Ttow2.xyz, bump))); 

fixed4 texColor = tex2D(_MainTex, i.uv.xy + speed); 

fixed3 reflDir reflect(-viewDir, bump); 

fixed3 reflCol texCUBE(_Cubemap, reflDir).rgb * texColor.rgb 
* _Color.rgb; 


fixed fresnel = pow(1 - saturate(dot(viewDir, bump)), 4); 
fixed3 finalColor = reflCol * fresnel + refrCol * (1 - 
fresnel); 


return fixed4(finalColor, 1); 


} 


我 们 前 先 通过 TtowW0 等 变量 的 w 分 量 得 到 世界 侍 标 ， 并 用 该 值得 到 
该 片 元 对 应 的 视角 方 同 。 除 此 之 外 ， 我 们 还 使 用 内 置 的 _Time.y 变 量 和 
_WaveXSpeed、_WaveYSpeed 属 性 计算 了 法 线 纹理 的 当前 偏 移 量 ， 并 利 
用 该 值 对 法 线 纹理 进行 两 次 采样 * 这 是 为 了 模拟 两 层 交 叉 的 水 面 波动 
的 效果 ) ， 对 两 次 结果 相 加 并 归 一 化 后 得 到 切线 空间 下 的 法 线 方 向 。 
然后 ， 和 10.2.2 市 中 的 处 理 一 样 ， 我 们 使 用 该 值 和 _Distortion 属 性 以 及 
_RefractionTex_TexelSize 来 对 屏幕 图 像 的 采样 坐标 进行 偏 移 ， 模 拟 折 射 
效果 。_Distortion 值 越 大 ， 偏 移 量 越 大 ， 水 面 背 后 的 物体 看 起 来 变形 程 
度 越 大 。 在 这 里 ， 我 们 选择 使 用 切线 空间 下 的 法 线 方向 来 进行 偏 移 ， 
是 因为 该 空间 下 的 法 线 可 以 反映 顶点 局 部 空间 下 的 法 线 方向 。 和 需要 注 
意 的 是 ， 在 计算 偏 移 后 的 屏幕 坐标 时 ， 我 们 把 偏 移 量 和 屏幕 坐标 的 z 分 
量 相 习 ， 这 是 为 了 模拟 深度 越 大 、 折 映 程 度 越 大 的 效果 。 如 果 读 者 不 
希望 产生 这 样 的 效果 ， 可 以 直接 把 偏 移 值 王 加 到 屏幕 坐标 上 “。 随 后 ， 
我 们 对 scrPos 进 行 了 透视 除法 ， 再 使 用 该 坐标 对 抓 取 的 屏幕 图 像 
_RefractionTex 进 行 采样 ， 得 到 模拟 的 折 映 颜色 。 


之 后 ， 我 们 把 法 线 方向 从 切线 空间 变换 到 了 世界 空间 下 (使 用 变 
换 和 矩阵 的 每 一 行 ， 即 TtoW0、TtowW1 和 TtowW2， 分 别 和 法 线 方向 点 乘 ， 
构成 新 的 法 线 方向 ) ， 并 据 此 得 到 视角 方向 相对 于 法 线 方向 的 反射 方 
向 。 随 后 ， 使 用 反射 方向 对 Cubemap 进 行 采 样 ， 并 把 结果 和 主 纹理 颜色 
相 乘 后 得 到 反射 颜色 。 我 们 也 对 主 纹理 进行 了 纹理 动画 ， 以 模拟 水 波 
的 效果 。 


为 了 混合 折 映 和 反射 闫 色 ， 我 们 随后 计算 了 菲 诅 耳 系 数 。 我 们 使 
用 之 前 的 公式 来 计算 菲 涅 耳 系 效 ， 并 据 此 来 混合 折射 和 反射 闫 色 ， 作 
为 最 终 的 输出 颜色 。 


在 本 例 中， 我们 使 用 的 噪声 纹理 (对 应 本 书 资源 的 
Assets/Textures/Chapter15/Water_Noise.png) 如 图 15.5 左 图 所 示 。 由 于 在 
本 例 中 ， 我 们 需要 的 是 一 张 法 线 纹理 ， 因 此 我 们 可 以 从 该 噪声 纹理 的 
灰 度 值 中 生成 需要 的 法 线 信息 ， 这 是 通过 在 它 的 纹理 面板 中 把 纹理 类 
型 设置 为 Normal map， 并 选中 Create from grayscale 来 完成 的 。 最 后 生 
成 的 法 线 纹理 如 图 15.5 右 图 所 示 。 我 们 把 生成 的 法 线 纹理 拖 熏 到 材质 的 
_WaveMap 属 性 上 ， 青 单 击 运行 后 ， 束 可 以 看 到 水 面 波动 的 效果 了 。 


全 图 15.5 ”水波 效果 使 用 的 噪声 纹理 左边 : 噪声 纹理 的 灰 度 图 ， 右 边 : 由 左边 生成 的 法 线 纹理 


5.3 再 谈 全 局 雾 效 


我 们 在 13.3 节 讲 到 了 如 何 使 用 深度 纹理 来 实现 一 种 基于 屏幕 后 处 理 
的 全 局 筋 效 。 我 们 由 深度 纹理 重建 每 个 像素 在 世界 空间 下 的 位 置 ， 再 
使 用 一 个 基于 高 度 的 公式 来 计算 雾 效 的 混合 系数 ， 骤 后 使 用 该 系数 来 
混合 筋 的 颜色 和 原 屏 医 颜 色 。13.3 世 的 实现 效果 是 一 个 基于 高 度 的 均匀 
筋 效 ， 即 在 同一 个 高 度 上 ， 筋 的 浓度 是 相同 的 ， 如 图 15.6 左 图 所 示 。 然 
而 ， 一 些 时 候 我 们 布 望 可 以 模拟 一 种 不 均匀 的 筋 效 ， 同 时 让 筋 不 断 吐 
动 ， 使 雾 看 起 来 更 加 丈 渺 ， 如 图 15.6 右 图 所 示 。 而 这 就 可 以 通过 使 用 一 
张 噪声 纹理 来 实现 。 


A 图 15.6 左边 : 均匀 雾 效 ， 右 边 : 使 用 噪声 纹理 后 的 非 均 匀 雾 效 


本 下 的 实现 非常 简单 ， 绝 大 多 数 代码 和 13.3 世 中 的 完全 一 样 ， 我 们 
只 是 添加 了 噪声 相关 的 参数 和 属性 ， 并 在 Shader 的 片 元 着 色 锋 中 对 高 度 
的 计算 添加 了 噪声 的 影响 。 为 了 完整 性 ， 我 们 会 给 出 本 届 使 用 的 脚本 
和 Shader 的 实现 ， 但 其 中 使 用 的 原理 不 再 资 述 ， 读 者 可 参见 13.3 订 。 


我 们 首先 需要 进行 如 下 准备 工作 。 


(1) 新 建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 Scene _ 15 3。 在 
Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 平行 光 ， 并 且 使 
用 了 内 置 的 天 空 合子。 在 Window -> Lighting -> Skybox 中 去 掉 场景 中 的 
天 空 盒 子 。 


(2) 我 们 需要 搭建 一 个 测试 雾 效 的 场景 。 在 本 书 资 源 的 实现 中 ， 
我 们 构建 了 一 个 包含 3 面 墙 的 房间 ， 并 放置 了 两 个 立方 体 和 两 个 球体 ， 
它们 都 使 用 了 我 们 在 9.5 节 中 创建 的 标准 材质 。 


(3) 新 建 一 个 脚本 。 在 本 书 资源 中 ， 该 脚本 名 为 
FogWithNoise.cs。 把 该 脚本 拖 忠 到 摄像 机 上 。 


(4) 新 建 一 个 Unity Shader 。 在 本 书 资源 中 ， 该 Shader 名 为 
Chapter15-FogWithNoise。 


我 们 首 抑 来 编写 FogWithNoise.cs 脚 本 。 打 开 该 脚本 ， 并 进行 如 下 
修改 。 


(1) 首先 ， 继 承 12.1 节 中 创建 的 基 类 : 


(2) 声明 该 效果 需要 的 Shader， 并 据 此 创建 相应 的 材质 : 


public Shader fogShader; 
private Material fogMaterial = null; 


public Material material { 


get { 
fogMaterial = CheckShaderAndCreateMaterial(fogShader, 
fogMaterial); 
return fogMaterial; 
} 


} 


(3) 在 本 节 中 ， 我 们 需要 获取 摄像 机 的 相关 参数 ， 如 近 裁 前 平面 
的 距离 、FOV 等 ， 同 时 还 需要 获取 摄像 机 在 世界 空间 下 的 前 方 、 上 方 
和 石 方 等 方向 ， 因 此 我 们 用 两 个 变量 存储 摄像 机 的 Camera 组 件 和 
Transform 组 件 : 


private Camera myCamera; 
public Camera camera { 
get { 
If (myCamera == null) { 
myCamera = GetComponent<Camera>(); 


return myCamera; 


private Transform myCameraTransform; 
public Transform cameraTransform { 


get { 
If (myCameraTransform == null) { 
myCameraTransform = camera.transform; 
} 


return myCameraTransform; 


(4) 定义 模拟 雾 效 时 使 用 的 各 个 参数 : 
[Range(0.1f, 3.0f)] 
public float fogDensity = 1.0f， 
public Color fogColor = Color .white; 


public float fogStart = 0.0of; 
public float fogEnd = 2.0f; 


public Texture noiseTexture; 


[Range(-0.5f, 0.5f)] 
public float fogXSpeed = 


[Range(-0.5f, 0.5f)] 
public float fogYSpeed = 


[Range(0.0f, 3.0f)] 
public float noiseAmount = 


fogDensity 用 于 控制 雾 的 浓度 ，fogColor 用 于 控制 雾 的 颜色 。 我 们 
使 用 的 雪 效 模拟 函数 是 基于 高 度 的 ， 因 此 参数 fogStart 用 于 控制 筋 效 的 
起 始 高 度 ，fogEnd 用 于 控制 雾 效 的 终止 高 度 。noiseTexture 是 我 们 使 用 
的 噪声 纹理 ，fogXSpeed 和 fogYSpeed 分 别 对 应 了 噪声 纹理 在 X 和 Y 方 回 
上 的 移动 速度 ， 以 此 来 模拟 雾 的 允 动 效果 。 最 后 ，noiseAmount 用 于 控 
制 噪声 程度 ， 当 noiseAmount 为 0 时 ， 表 示 不 应 用 任何 噪声 ， 即 得 到 一 
个 均匀 的 基于 高 度 的 全 局 筋 效 。 


(5) 由 于 本 例 需 要 获取 摄像 机 的 深度 纹理 ， 我 们 在 脚本 的 
OnEnable 函 效 中 设置 摄像 机 的 相应 状态 : 


void OnEnable() { 


camera.depthTextureMode |= DepthTextureMode.Depth; 


} 


(6) 最 后 ， 我 们 实现 了 OnRenderImage 范 数 : 


void OnRenderImage (RenderTexture src, RenderTexture dest) { 
If (material != null) { 
Matrix4x4 frustumCorners = Matrix4x4.identity; 


// Compute frustumCorners 


material.SetMatrix("_FrustumCornersRay", frustumCorners); 


material.SetFloat("_FogDensity", fogDensity); 
material.SetColor("_FogColor", fogColor); 
material.SetFloat("_FogStart", fogStart); 
material.SetFloat("_FogEnd", fogEnd); 


material.SetTexture("_ NoiseTex", noiseTexture); 
material.SetFloat("_FogXSpeed", fogXSpeed); 
material.SetFloat("_FogYSpeed", fogYSpeed); 
material.SetFloat("_NoiseAmount", noiseAmount); 


Graphics.Blit (src, dest, material); 
} else { 
Graphics.Blit(src, dest); 


我 们 首先 利用 13.3 节 学 习 的 方法 计算 近 裁 前 平面 的 4 个 角 对 应 的 向 
量 ， 并 把 它们 存储 在 一 个 矩阵 类 型 的 变量 (frustumCorners) 中 。 计 算 
过 程 和 原理 均 可 参见 13.3 节 。 随 后 ， 我 们 把 结 末 和 其 他 参数 传递 给 材 
质 
J 


， 并 调用 Graphics.Blit (src, dest, material) 把 泻 染 结果 显示 在 屏幕 


下 面 ， 我 们 来 实现 Shader 的 部 分 。 打 开 Chapter15-FogWithNoise， 
进行 如 下 修改 。 


(1) 我 们 首先 需要 声明 本 例 使 用 的 各 个 属性 : 


Properties { 
_MainTex ("Base (RGB)", 2D) = "white" {} 
_FogDensity ("Fog Density", Float) = 1.0 
_FogColor ("Fog Color", Color) (Ly cp) 
_FogStart ("Fog Start", Float) 0.0 
_FogEnd ("Fog End", Float) = 1.0 


_NoiseTex ("Noise Texture", 2D) = "white" {} 
_FogXSpeed ("Fog Horizontal Speed", Float) = 0.1 
_FogYSpeed ("Fog Vertical Speed", Float) = 0.1 
_NoiseAmount ("Noise Amount", Float) = 1 


(2) 在 本 节 中 ， 我 们 使 用 CGINCLUDE 来 组 织 代码 。 我 们 在 
SubShader 块 中 利用 CGINCLUDE 和 ENDCG 语 义 来 定义 一 系列 代码 : 


SubShader { 
CGINCLUDE 


ENDCG 


(3) 声明 代码 中 需要 使 用 的 各 个 变量 : 


float4x4 _FrustumCornersRay; 


sampler2D _MainTex; 

half4 _MainTex_TexelSize; 
sampler2D _CameraDepthTexture; 
half _FogDensity; 

fixed4 _FogColor; 


float _FogStart; 
float _FogEnd; 
sampler2D _NoiseTex; 
half _FogXxSpeed ; 
half _FogYSpeed ; 
half _NoiseAmount; 


_FrustumCornersRay 虽 然 没 有 在 Properties 中 声明 ， 但 仍 可 由 脚本 传 
递 给 Shader。 除 了 Properties 中 声明 的 各 个 属性 ， 我 们 还 声明 了 深度 纹理 
_CameraDepthTexture，Unity 会 在 背后 把 得 到 的 深度 纹理 传递 给 该 值 。 


(4) 定义 顶点 着 色 器 ， 这 和 13.3 节 中 的 实现 完全 一 致 。 读 者 可 以 
在 13.3 太 找到 它 的 实现 和 相关 解释 。 


(5) 定义 片 元 着 色 器 : 


fixed4 frag(v2f i) : SV_Target { 

float linearDepth = 
LinearEyeDepth(SAMPLE_DEPTH_TEXTURE(_CameraDepthTexture, i., 
uv_depth)); 

float3 worldPos = _WorldSpaceCameraPos + linearDepth * 
i,.interpolatedRay .xyz; 


float2 speed = _Time.y * float2(_FogXSpeed, _FogYSpeed); 
float noise = (tex2D(_NoiseTex, i.uv + speed).r - 0.5) * 
_NoiseAmount; 


float fogDensity = (_FogEnd - worldPos.y) / (_FogEnd - 
_FogStart ) ， 
fogDensity = saturate(fogDensity * _FogDensity * (1 + noise)); 


fixed4 finalColor = tex2D(_MainTex, i.uv); 
finalcColor.rgb = lerp(finalColor.rgb, _FogColor.rgb, 
fogDensity); 


return finalColor; 


我 们 首先 根据 深度 纹理 来 重建 该 像素 在 世界 空间 中 的 位 置 。 然 
后 ， 我 们 利用 内 置 的 _Time.y 变 量 和 _FogXSpeed、_FogYSpeed 属 性 计算 
出 当前 噪声 纹理 的 侦 移 量 ， 并 据 此 对 噪声 纹理 进行 采样 ， 得 到 噪声 
值 。 我 们 把 该 值 减 去 0.5， 再 乘 以 控制 噪声 程度 的 属性 _ NoiseAmount， 
得 到 最 终 的 噪声 值 。 随 后 ， 我 们 把 该 噪声 值 添加 到 雾 效 浓度 的 计算 


中 ， 得 到 应 用 噪声 后 的 筋 效 混合 系 数 fogDensity。 节 后 ， 我 们 使 用 该 系 
数 将 筋 的 颜色 和 原始 颜色 进行 混合 后 返回 。 


(6) 随后 ， 我 们 定义 了 雾 效 泻 染 所 需 的 Pass: 


Ss 
CGPROGRAM 


#pragma vertex vert 
#pragma fragment frag 


ENDCG 


(7) 最 后 ， 我 们 关闭 了 Shader 的 Fallback: 


Fallback Off 


完成 后 返回 编辑 絮 ， 并 把 Chapter15-FogWithNoise 拖 虑 到 摄像 机 的 
ed 。 当然 ， 我 们 可 以 在 
FogWithNoise.cs 的 脚本 面板 中 将 fogShader 参 数 的 默认 值 设置 为 
Chapter15-FogWithNoise， 这 样 就 不 需要 以 后 使 用 时 每 次 都 手动 拖 虑 
了 。 本 节 使 用 的 噪声 纹理 (对 应 本 书 资 源 的 
Assets/Textures/Chapter15/Fog_Noise.jpg) 如 图 15.7 所 示 。 我 们 把 该 噪声 
纹理 拖 虑 到 FogWithNoise.cs 脚 本 中 的 noiseTexture 参 数 中 ， 我 们 也 可 以 
参照 之 前 的 方法 ， 直 接 在 FogWithNoise.cs 的 脚本 面板 中 将 noiseTexture 
参数 的 默认 值 设置 为 Fog_Noise.jpg， 这 样 就 不 需要 以 后 使 用 时 每 次 都 
手动 拖 上 忠 了 。 


A 图 15.7 ”本 节 使 用 的 噪声 纹理 


读者 在 阅读 本 章 时 ， 可 能 会 有 一 个 疑问 : 这 些 噪 声 纹 理 都 是 如 何 
构建 出 来 的 ? 这 些 噪 声 纹理 可 以 被 认为 是 一 种 程序 纹理 (Procedure 
Texture) ， 它 们 都 是 由 计算 机 利用 某 些 算法 生成 的 。Perlin 噪 声 

(https://en.wikipedia.org/wiki/Perlin_noise) 和 Worley 噪 声 
(https://en.wikipedia.org/wiki/Worley_noise) 是 两 种 最 常 使 用 的 噪声 类 
型 ， 例 如 我 们 在 15.3 节 中 使 用 的 噪声 纹理 由 Perlin 噪 声 生 成 而 来 。Perlin 


噪声 可 以 用 于 生成 更 目 然 的 噪声 纹理 ， 而 Worley 噪 声 则 通 利 用 于 模拟 
诸如 石头 、 水 、 纸 张 等 多 孔 噪 声 。 现 代 的 图 像 编辑 软件 ， 如 Photoshop 
等 ， 往 往 提 供 了 类 似 的 功能 或 插件 ， 以 帮助 美术 人 员 生 成 需要 的 噪声 
纹理 ， 但 如 有 果 读 者 想 要 更 加 自由 地 控制 噪声 纹理 的 生成 ， 可 能 就 需要 
了 解 它们 的 生成 原理 。 读 者 可 以 在 这 个 博客 

(http://flafla2.github.io/2014/08/09/perlinnoise.html) 中 找到 一 篇 关于 理 
解 Perlin 噪 声 的 非常 好 的 文章 ， 在 文章 的 最 后 ， 作 者 还 给 出 了 很 多 其 他 
出 色 的 参考 链接 。 天 于 Worley 噪 声 ， 读 者 可 以 在 作者 Worley1998 年 发 表 
的 论文 出 中 找到 它 的 算法 和 实现 细节 。 在 另 一 个 非常 好 的 博客 

(http://scrawkblog.com/category/procedural-noise/) 中 ， 博 主 给 出 了 很 
多 程序 噪声 在 Unity 中 的 实现 ， 并 包含 了 实现 源码 。 


15.5 参考 文献 


[1] Worley S. A _ cellular texture basis function[C]/Proceedings of the 
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第 16 章 ”Unity 中 的 演 染 优化 技术 


程序 优化 的 第 一 条 准则 : 不 要 优化 。 程 序 优 化 的 第 二 条 准则 〈 仅 
针对 专家 ! ) : 不 要 优化 。 


Michael A. Jackson 


在 进行 程序 优化 的 时 候 ， 人 们 经 常会 引用 英国 的 计算 机 科学 家 
Michael A. Jackson 在 1988 年 的 优化 准则 。Jackson 是 想 借 此 强调 ， 对 问 
题 认识 不 清 以 及 过 度 优化 往往 会 让 事情 变 得 更 加 复杂 ， 产 生 更 多 的 程 
序 错误 。 


然而 ， 如 果 我 们 在 游戏 开发 过 程 中 从 来 都 没有 考虑 优化 ， 那 么 结 
果 往 往 是 惨不忍睹 的 。 一 个 正确 的 做 法 是 ， 从 一 开始 束 把 优化 当成 是 
游戏 设计 中 的 一 部 分 。 正 在 阅读 本 书 的 读者 ， 有 可 能 是 移动 游戏 的 开 
发 者 。 和 PC 相 比 ， 移 动 设备 上 的 GPU 有 着 完全 不 同 的 架构 设计 ， 它 能 
使 用 的 带宽 、 功 能 和 其 他 资源 都 非常 有 限 。 这 要 求 我 们 需要 时 刻 把 优 
化 章 记 在 心 ， 才 可 以 避免 等 到 项 目 完 成 时 才 发 现 游戏 根本 无 法 在 移动 
设备 上 流畅 运行 的 结果 。 


在 本 章 ， 我 们 将 会 阐述 一 些 Unity 中 常见 的 优化 技术 。 这 些 优化 技 
术 都 是 和 泻 染 相关 的 ， 例 如 ， 使 用 批 处 理 、LOD (Level of Detail) 技 
术 等 。 在 本 章 最 后 的 扩展 阅读 部 分 ， 我 们 给 出 一 些 非常 有 价值 的 参考 
质料 ， 在 那里 读者 可 以 学 习 到 更 多 真实 项 目 中 的 优化 技术 。 


在 开始 学 习 之 前 ， 我 们 硕 望 读者 能 够 理解 ， 游 戏 优化 不 仅 是 程序 
员 的 工作 ， 更 需要 美工 人 员 在 游戏 的 美术 上 进行 一 定 的 权衡 ， 例 如 ， 
避免 使 用 全 屏 的 屏幕 特效 ， 避 人 免 使 用 计算 复 洒 的 shader， 减 少 透明 混合 
造成 的 overdraw 等 。 也 束 是 说 ， 这 是 由 程序 员 和 美工 人 员 等 各 个 部 分 人 
员 共 同 参与 的 工作 。 


16.1 移动 平台 的 特 挟 
和 PC 平台 相 比 ， 移 动 平台 上 的 GPU 架构 有 很 大 的 不 同 。 由 于 处 理 


资源 等 条 件 的 限制 ， 移 动 设备 上 的 GPU 架构 专注 于 尽 可 能 使 用 更 小 的 
带宽 和 功能 ， 也 由 此 市 来 了 许多 和 PC 平台 完全 不 同 的 现象 


例如 ， 为 了 尽 可 能 移 除 那些 隐藏 的 表面 ， 减 少 overdraw 〈 即 一 个 像 
素 被 绘制 多 次 ) ，PowerVR 心 厂 (通常 用 于 iOS 设 备 和 某 些 Android 设 
备 ) 使 用 了 基于 瓦 片 的 延迟 泻 染 (Tiled-based Deferred Rendering， 
TBDR) 架构 ， 把 所 有 的 泻 染 图 像 装 入 一 个 个 瓦 片 (tile) 中 ， 再 由 硬 
件 找到 可 见 的 片 元， 而 只 有 这 些 可 见 片 元 才 会 执行 片 元 着 色 嚣 。 男 一 
些 基于 瓦 片 的 GPU 架 构 ， 如 Adreno (高 通 的 芯片 ， 和 Mali (ARM 的 忌 
请) 则 会 使 用 Early-Z 或 相似 的 技术 进行 一 个 低 精度 的 的 深度 检测 ， 来 
别 除 那些 不 需要 泻 染 的 片 元 。 还 有 一 些 GPU， 如 Tegra 〈 瑞 伟 达 的 心 
片 ) ， 则 使 用 了 传统 的 架构 设计 ， 因 此 在 这 些 设 备 上 ，overdraw 更 可 能 
造成 性 能 的 瓶颈 。 


由 于 这 些 必 片 架 构造 成 的 不 同 ， 一 些 游戏 往往 需要 针对 不 同 的 心 
片 发 布 不 同 的 版 本 ， 以 便 对 每 个 心 片 进行 更 有 和 针对 性 的 优化 。 尤 其 是 
在 Android 平 台 上 ， 不 同 设备 使 用 的 硬件 ， 如 图 形 必 片 、 屏 幕 分 辨 率 


等 ， 大 相 径 庭 ， 这 对 图 形 优 化 提出 了 更 高 的 挑战 。 相 比 与 Android 平 
台 ，iOS 平 台 的 硬件 条 件 则 相对 统一 。 读 者 可 以 在 Unity 手 册 的 iOS 硬 件 
指南 (http://docs.unity3d.com/Manual/ iphone-Hardware.html) 中 找到 相 
天 的 资料 。 


16.2 影 啊 性 能 的 因素 


首先 ， 在 学 习 如 何 优化 之 前 ， 我 们 得 了 解 影响 游戏 性 能 的 因素 有 
哪些 ， 才 能 对 症 下 药 。 对 于 一 个 游戏 来 说 ， 它 主要 需要 使 用 两 种 计算 
资源 : CPU 和 GPU 。 它 们 会 互相 合作 ， 来 让 我 们 的 游戏 可 以 在 预期 的 
帧 率 和 分 辨 率 下 工作 。 其 中 ，CPU 主 要 负责 保证 帧 率 ，GPU 主 要 负责 
分 辨 率 相关 的 一 些 处 理 。 


据 此 ， 我 们 可 以 把 造成 游戏 性 能 瓶 令 的 主要 原因 分 成 以 下 几 个 方 
面 。 


(1) CPU 。 


。 过 多 的 draw call 。 
复杂 


杂 的 脚本 或 者 物理 模拟 。 
(2) GPU。 

。 顶点 处 理 。 

o 过 多 的 顶点 。 


o 过 多 的 逐 顶 点 计算 。 
。 厂 元 处 理 。 


o 过 多 的 片 元 〈 既 可 能 是 由 于 分 辨 率 造 成 的 ， 也 可 能 是 由 于 
overdraw 造 成 的 ) 。 


。 过 多 的 逐 片 元 计算 。 


全 


i 


(3) 带 


。 使 用 了 尺寸 很 大 且 未 压缩 的 纹理 。 
。 分 辩 率 过 高 的 帧 缓存 。 


对 于 CPU 来 说 ， 限 制 它 的 主要 是 每 一 帧 中 draw call 的 数目 。 我 们 曾 

在 2.2 节 和 2.4.3 方 中 介绍 过 draw call 的 相关 概念 和 原理 。 人 简单 来 说 ， 就 
是 CPU 在 每 次 通知 GPU 进 行 泻 染 之 前 ， 都 需要 提前 准备 好 顶点 数据 

(如 位 置 、 法 线 、 颜 色 、 纹 理 坐 标 等 ) ， 然 后 调用 一 系列 API 把 它们 放 
到 GPU 可 以 访问 到 的 指定 位 置 ， 最 后 ， 调 用 一 个 绘制 命令 ， 来 告诉 
GPU,“ 嘿 ， 我 把 东西 都 准备 好 了 ， 你 赶紧 出 来 干 活 〈 演 染 ) 吧 ! ”。 
而 调用 绘制 命令 的 时 候 ， 束 会 产生 一 个 draw call。 过 多 的 draw call 会 造 
成 CPU 的 性 能 瓶 贷 ， 这 是 因为 每 次 调用 draw call 时 ，CPU 人 往往 都 需要 改 
变 很 多 泻 染 状态 的 设置 ， 而 这 些 操作 是 非常 耗 时 的 。 如 果 一 帧 中 需要 
的 draw call 数 目 过 多 的 话 ， 就 会 导致 CPU 把 大 部 分 时 间 都 花费 在 提交 
draw call 的 工作 上 面 了 。 当 然 ， 其 他 原因 也 可 能 造成 CPU 瓶 贷 ， 例 如 物 
理 、 布 料 模拟 、 花 上 度 、 粒 子 模拟 等 ， 这 些 都 是 计算 量 很 大 的 操作 ， 但 
由 于 本 书 主要 讨论 Shader 方 面 的 相关 技术 ， 因 此 ， 这 些 内 容 不 在 本 书 的 
讨论 范围 内 。 


而 对 于 GPU 来 说 ， 它 负责 整个 浑 染 流水 线 。 它 从 处 理 CPU 传 递 过 
来 的 模型 数据 开始 ， 进 行 顶点 着 色 器 、 片 元 着 色 强 等 一 系列 工作 ， 最 
后 输出 屏 磋 上 的 每 个 像素 。 因 此 ，GPU 的 性 能 瓶 代 和 需要 处 理 的 顶点 


数目 、 屏 幕 分 辨 率 、 显 存 等 因素 有 关 。 而 相关 的 优化 策略 可 以 从 减少 
处 理 的 数据 规模 “包括 顶点 数目 和 片 元 数目 ) 、 减 少 运算 复杂 度 等 方 
面 入 手 。 


在 了 解 了 上 面 基 本 的 内 容 后 ， 本 章 后 续 章 节 会 涉及 的 优化 技术 
i 


(1) CPU 优 化 。 
。 使 用 批 处 理 技术 减少 draw call 数 目 。 
(2) GPU 优 化 。 


。 减少 需 要 处 理 的 顶点 数目 。 
o 优化 几何 体 。 
o 使 用 模型 的 LOD (Level of Detail) 技术 。 
o 使 用 遮挡 剔除 (Occlusion Culling) 技术 。 
。 减少 需要 处 理 的 族 元 数目 。 
o 控制 绘制 顺序 。 
o 和 警惕 透明 物体 。 
o 减少 实时 光照 。 
。 减少 计 算 复 杂 度 。 
o 使 用 Shader 的 LOD (Level of Detail) 技术 。 
o 代码 方面 的 优化 。 


(3) 市 省 内 存 带 蜗 。 


。 减 少 纹理 大 小 。 


。 利用 分 辩 率 缩放 。 


在 开始 优化 之 前 ， 我 们 首 移 需 要 知道 是 哪个 步骤 造成 了 性 能 瓶 
贷 。 而 这 可 以 利用 Unity 提 供 的 一 些 泻 染 分 析 工 具 来 实现 。 


16.3 Unity 中 的 泻 染 分 析 工 具 


Unity 内 置 了 一 些 工具 ， 来 帮助 我 们 方便 地 得 看 和 演 染 相关 的 各 个 
统计 数据 。 这 些 数 据 可 以 帮助 我 们 分 析 游 戏 泻 染 性 能 ， 从 而 更 有 和 针对 
性 地 进行 优化 。 在 Unity 5 中 ， 这 些 工 具 包 括 了 泻 染 统计 窗口 

(Rendering Statistics Window) 、 性 能 分 析 器 (Profiler) ， 以 及 帧 调试 
器 (Frame Debugger) 。 需 要 注意 的 是 ， 在 不 同 的 目标 平台 上 上， 这些 工 
有 具 中 显示 的 数据 也 会 发 生变 化 。 


16.3.1 ”认识 Unity 5 的 演 染 统计 窗口 


Unity 5 提供 了 一 个 全 新 的 窗口 ， 即 泻 染 统计 窗口 (Rendering 
Statistics Window) 来 显示 当前 游戏 的 各 个 泻 染 统计 变量 ， 我 们 可 以 通 
过 在 Game 视 图 右上 方 的 菜单 中 单 击 Stats 按 钮 来 打开 它 ， 如 图 16.1 所 
示 。 从 图 16.1 中 可 以 看 出 ， 演 染 统计 窗口 主要 包含 了 3 个 方面 的 信息 : 


音频 (Audio) 、 图 像 《Graphics) 和 网 络 (Network) 。 我 们 这 里 只 关 
注 第 二 个 方面 ， 即 图 像 相 天 的 泻 染 统计 结 


和 图 16.1 Unity 5 的 泻 染 统 计 窗 口 


演 染 统计 窗口 中 显示 了 很 多 重要 的 渲染 数据 ， 例 如 FPS、 批 处 理 数 
目 、 顶 点 和 三 角 网 格 的 数目 等 。 表 16.1 列 出 了 演 染 统计 窗口 中 显示 的 各 


信息 名 称 


每 帧 的 时 间 和 | 在 Graphic 的 右 侧 显示 ， 给 出 了 处 理 和 渲染 一 帧 所 需 的 时 间 ， 以 及 


表 16.1 


一 帧 中 需要 进行 的 批 处 理 数目 


合并 的 批 处 理 数 目 ， 这 个 数字 表明 了 批 处 理 为 我 们 节省 了 多 少 draw 


call 


Tris 和 Verts 需要 绘制 的 三 角 面 片 和 顶点 数目 


er 以 及 它 占 用 的 内 存 大 小 


人 泻 染 使 用 的 Pass 的 数目 ， 每 个 Pass 都 需要 Unity 的 runtime 来 绑 定 一 个 
etPass 中 A 
新 的 Shader， 这 可 能 造成 CPU 的 瓶颈 


泻 染 的 蒙 皮 网 格 的 数目 


播放 的 动画 数目 


Unity 5 的 渲染 统计 窗口 相 较 于 之 前 版 本 中 的 有 了 一 些 变 化 ， 最 明 


显 的 区 别 之 一 就 是 去 挥 了 draw call 数 目的 显示 ， 而 添加 了 批 处 理 数 目的 
显示 。Batches 和 Saved by batching 更 容易 让 开发 者 理解 批 处 理 的 优化 结 
果 。 当 然 ， 如 果 我 们 想 要 查看 draw call 的 数目 等 其 他 更 加 详细 的 数据 ， 
可 以 通过 Unity 编 辑 絮 的 性 能 分 析 絮 来 查看 。 


16.3.2 ”性 能 分 析 器 的 泻 染 区 域 


我 们 可 以 通过 单 击 Window -> Profiler 来 打开 Unity 的 性 能 分 析 器 
(Profiler) 。 人 性 能 分 析 器 中 的 泻 染 区 域 (Rendering Area) 提供 了 更 多 
关于 泻 染 的 统计 人 信息， 图 16.2 给 出 了 对 图 16.1 中 场景 的 泻 染 分 析 结 
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Serpass Calls:§ OrawCalls: 10 Total Basches: 10 Tris- 3.2k Verts: 2.4k 
{Dynamik Batc hing) 和 和 iched Draw Calls: 11 ~ Baxhes 4 Tris: 132 Werts: 264 
Sorx Barching) Eatched Draw Calls- 0 Barches: 0 Trs:0 Verss:0 
Used Textures: 7 ~ 73 MB 
RenderTextures: 9 - 27.3 MS 
Screen' 557x411 ~- 2.6 MG 
WRAM usage: 29.9 MB to 37.6 M8 (of 1 .00 OE) 
A 


A 图 16.2 ”使 用 Unity 的 性 能 分 析 器 中 的 泻 染 区 域 来 查看 更 多 关于 泻 染 的 统计 信息 
性 能 分 析 器 显示 了 绝 大 部 分 在 演 染 统计 窗口 中 提供 的 信息 ， 例 


如 ， 绿 线 显示 了 批 处 理 数目 、 监 线 显 示 了 Pass 数 目 等 ， 同 时 还 给 出 了 许 
多 其 他 非常 有 用 的 信息 ， 例 如 ，draw call 数 目 、 动 态 批 处 理 /静态 批 处 
理 的 数目 、 洽 染 纹 理 的 数目 和 内 存 占用 等 。 


结合 渲染 统计 窗口 和 性 能 分 析 器 ， 我 们 可 以 查看 与 渲染 相关 的 绝 
大 多 数 重要 的 数据 。 一 个 值得 注意 的 现象 是 ， 性 能 分 析 器 给 出 的 draw 
call 数 目 和 批 处 理 数目 、Pass 数 目 并 不 相等 ， 并 且 看 起 来 好 像 要 大 于 我 
们 估算 的 数目 ， 这 是 因为 Unity 在 背后 需要 进行 很 多 工作 ， 例 如， 初始 
化 各 个 缓存 、 为 阴影 更 新 深度 纹理 和 阴影 映射 纹理 等 ， 因 此 需要 人 花费 
比 “ 预 期 * 更 多 的 draw cal。 一 个 好 消息 是 ，Unity 5 引入 了 一 个 新 的 工具 
来 帮助 我 们 查看 每 一 个 draw call 的 工作 ， 这 个 工具 就 是 帆 调 试 器 。 


16.3.3 ”再 谈 帧 调试 器 


我 们 已 经 在 之 前 的 章节 中 多 次 看 到 帧 调试 器 (Frame Debugger) 
的 应 用 ， 例 如 5.5.3 广 中 解释 了 如 何 使 用 帧 调试 颖 来 对 Shader 进 行 调 试 。 
我 们 可 以 通过 Window -> Frame Debugger 来 打开 它 。 在 这 个 窗口 中 ， 我 
们 可 以 清楚 地 看 到 每 一 个 draw call 的 工作 和 结果 ， 如 图 16.3 所 示 。 
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4 图 16.3 ”使 用 帧 调试 器 来 查看 单独 的 draw call 的 绘制 结果 


帧 调试 器 的 调试 面板 上 显示 了 渲染 这 一 帧 所 需要 的 所 有 的 演 染 事 
件 ， 在 本 例 中 ， 事 件数 目 为 14， 而 其 中 包含 了 10 个 draw call 事 件 (其 他 
泻 染 事件 多 为 清空 缓存 等 ) 。 通 过 单 击 面板 上 的 每 个 事件 ， 我 们 可 以 
在 Game 视 图 查看 该 事件 的 绘制 结果 ， 同 时 渲染 统计 面板 上 的 数据 也 会 
显示 成 截止 到 当前 事件 为 止 的 各 个 泻 染 统计 数据 。 以 本 例 为 例 (场景 
如 图 16.1 所 示 ) ， 要 演 染 一 帧 共 需 要 人 花费 10 个 draw call， 其 中 4 个 draw 
call 用 于 更 新 深度 纹理 (对 应 UpdateDepthTexture) ，4 个 draw call 用 于 
泻 染 平行 光 的 阴影 映射 纹理 ，1 个 draw call 用 于 绘制 动态 批 处 理 后 的 3 个 
立方 体 模型 ，1 个 draw call 用 于 绘制 球体 。 


在 Unity 的 痊 染 统计 窗口、 分 析 器 和 帧 调试 器 这 3 个 利 絮 的 帮助 下 ， 
我 们 可 以 获得 很 多 有 用 的 优化 信息 。 但 是 ， 很 多 诸如 洽 染 时 间 这 样 的 
数据 是 基于 当前 的 开发 平台 得 到 的 ， 而 非 真 机 上 的 结果 。 事 实 上 ， 
Unity 正 在 和 硬件 生产 商 合 作 ， 来 首先 让 使 用 英 伟 达 图 害 (Tegra) 的 设 
钾 可 以 出 现在 Unity 的 性 能 分 析 右 中 。 我 们 有 理由 相信 ， 在 后 续 的 Unity 
版 本 中 ， 直 接 在 Unity 中 对 移动 设备 进行 性 能 分 析 不 再 是 梦想 。 然 而 ， 
在 这 个 梦想 实现 之 前 ， 我 们 仍然 需要 一 些 外 部 的 性 能 分 析 工 具 的 帮 
Ee 


16.3.4 ”其 他 性 能 分 析 工 具 


对 于 移动 平台 上 的 游戏 来 说 ， 我 们 更 布 望 得 到 在 真 机 上 运行 游戏 
时 的 性 能 数据 。 这 时 ，Unity 目 前 提供 的 各 个 工具 可 能 束 不 再 能 满足 我 
们 的 需求 了 。 


对 于 Android 平 台 来 说 ， 高 通 的 Adreno 分 析 工 具 可 以 对 不 同 的 测试 
机 进行 详细 的 性 能 分 析 。 英 伟 达 提供 了 NVPerfHUD 工 具 来 帮助 我 们 得 
到 几乎 所 有 需要 的 性 能 分 析 数 据 ， 例 如 ， 每 个 draw call 的 GPU 时 间 ， 
个 shader 化 费 的 cycle 数 目 等 。 


对 于 iOS 平 台 来 说 ，Unity 内 置 的 分 析 絮 可 以 得 到 整个 场景 花费 的 
GPU 时 间 。PowerVRAM 的 PVRUniSCo shader 分 析 器 也 可 以 给 出 一 个 大 
致 的 性 能 评估 。Xcode 中 的 OpenGL ES Driver Instruments 可 以 给 出 一 些 
宏观 上 的 性 能 信息 例如， 设备 利用 率 、 泻 染 器 利用 率 等 。 但 相对 于 
Android 平 台 ， 对 iOS 的 性 能 分 析 更 加 困难 (工具 较 少 ) 。 而 且 PowerVR 
心 片 采 用 了 基于 瓦 片 的 延迟 洽 染 如 ， 因 此 ， 想 要 得 到 每 个 draw call 人 花费 


的 GPU 时 间 十 几乎 不 可 能 的 。 这 时 ， 一 些 安 观 上 的 统计 数据 可 能 更 有 
参考 价值 。 


一 些 其 他 的 性 能 分 析 工 具 可 以 在 Unity 的 官方 手册 
(http://docs.unity3d.com/Manual/ MobileProfiling.html) 中 找到 。 当 找 
到 了 性 能 上 瓶 氏 后 ， 我 们 瓯 可 以 针对 这 些 方面 进行 特定 的 优化 。 


16.4 减少 draw call 数 目 


读者 最 常 看 到 的 优化 技术 大 概 就 是 批 处 理 (batching) 了 。 批 处 理 
的 实现 原理 就 是 为 了 减少 每 一 帧 需要 的 draw call 数 目 。 为 了 把 一 个 对 象 
泻 染 到 屏幕 上 ，CPU 需 要 检查 哪些 光源 影响 了 该 物体 ， 绑 定 shader 并 设 
置 它 的 参数 ， 再 把 泻 染 命令 发 送 给 GPU。 当 场景 中 包含 了 大 量 对 象 
时 ， 这 些 操作 就 会 非常 耗 时 。 一 个 极端 的 例子 是 ， 如 果 我 们 需要 演 染 
一 千 个 三 角形 ， 把 它们 按 一 干 个 单独 的 网 格 进行 渲染 所 花费 的 时 间 要 
远 远大 于 演 染 一 个 包含 了 一 千 个 三 角形 的 网 格 。 在 这 两 种 情况 下 ， 
GPU 的 性 能 消耗 其 实 并 没有 多 大 的 区 别 ， 但 CPU 的 draw call 数 目 就 会 成 
为 性 能 瓶 贷 。 因 此 ， 批 处 理 的 思想 很 简单 ， 就 是 在 每 次 调用 draw call 时 
尽 可 能 多 地 处 理 多 个 物体 。 我 们 已 经 在 2.2 节 和 2.4.3 节 中 详细 地 讲述 了 
draw call 和 批 处 理 之 间 的 联系 ， 本 节 则 在 介绍 如 何在 Unity 中 利用 批 处 
理 技术 来 优化 泻 染 。 


那么 ， 什 么 样 的 物体 可 以 一 起 处 理 呢 ? 答案 就 是 使 用 同一 个 材质 
的 物体 。 这 是 因为 ， 对 于 使 用 同一 个 材质 的 物体 ， 它 们 之 间 的 不 同 仅 
仅 在 于 顶点 数据 的 差别 。 我 们 可 以 把 这 些 顶 点 数据 合并 在 一 起 ， 再 一 
起 发 送 给 GPU， 束 可 以 完成 一 次 批 处 理 。 


Unity 中 文 持 两 种 批 处 理 方 式 : 一 种 十 动态 批 处 理 ， 男 一 种 是 静态 
批 处 理 。 对 于 动态 批 处 理 来 说 ， 优 点 是 一 切 处 理 部 是 Unity 目 动 完成 
的 ， 不 需要 我 们 目 己 做 任何 操作 ， 而 且 物 体 是 可 以 移动 的 ， 但 缺点 
古 ， 限 制 很 多 ， 可 能 一 不 小 心 束 会 破坏 了 这 种 机 制 ， 导 致 Unity 无 法 动 
仿 批 处 理 一 些 使 用 了 相同 材质 的 物体 。 而 对 于 静态 批 处 理 来 说 ， 它 的 
优点 是 自由 度 很 高 ， 限 制 很 少 ， 但 缺点 是 可 能 会 占用 更 多 的 内 存 ， 而 
且 经 过 静态 批 处 理 后 的 所 有 物体 都 不 可 以 再 移动 了 《即便 在 脚本 中 稳 
试 改变 物体 的 位 置 也 是 无 效 的 ) 。 


16.4.1 动态 批 处 理 


如 采 场 景 中 有 一 些 模 型 共享 了 同一 个 材质 并 满足 一 些 条 件 ，Unity 
就 可 以 目 动 把 它们 进行 批 处 理 ， 从 而 只 需要 花费 一 个 draw call 束 可 以 泻 
染 所 有 的 模型 。 动 仿 批 处 理 的 基本 原理 是 ， 每 一 帆 把 可 以 进行 批 处 理 
的 模型 网 格 进行 合并 ， 再 把 合并 后 模型 数据 传递 给 GPU， 然 后 使 用 同 
一 个 材质 对 其 渔 染 。 除 了 实现 方便 ， 动 态 批 处 理 的 男 一 个 好 处 古 ， 经 
过 批 处 理 的 物体 仍然 可 以 移动 ， 这 是 由 于 在 处 理 每 帧 时 Unity 都 会 重新 
合并 一 次 网 格 。 


虽然 Unity 的 动态 批 处 理 不 需要 我 们 进行 任何 额外 工作 ， 但 只 有 满 
足 条 件 的 模型 和 材质 才 可 以 被 动态 批 处 理 。 需 要 注意 的 是 ， 随 着 Unity 
版 本 的 变化 ， 这 些 条 件 也 有 一 些 改变 。 在 本 节 中 ， 我 们 给 出 一 些 主要 
的 条 件 限 制 。 


。 能够 进行 动态 批 处 理 的 网 格 的 项 点 属性 规模 要 小 于 900。 例 如 ， 如 
果 shader 中 需要 使 用 顶点 位 置 、 法 线 和 纹理 坐标 这 3 个 顶点 属性 ， 
那么 要 想 让 模型 能 够 被 动态 批 处 理 ， 它 的 顶点 数目 不 能 超过 300 。 


需要 注意 的 是 ， 这 个 数字 在 未 来 有 可 能 会 发 生变 化 ， 因 此 不 要 依 
赖 这 个 数据 。 

一 般 来 说 ， 所 有 对 象 都 需要 使 用 同一 个 缩放 尺度 (可 以 是 (1, 1， 
1)、(1, 2, 3)、(1.5, 1.4, 1.3) 等 ， 但 必须 都 一 样 ) 。 一 个 例外 情况 
是 ， 如 采 所 有 的 物体 都 使 用 了 不 同 风 非 统一 缩放 ， 那 么 它们 也 是 
可 以 被 动态 批 处 理 的 。 但 在 Unity 5 中 ， 这 种 对 模型 缩放 的 限制 已 
经 不 存在 了 。 

使 用 光照 纹理 (lightmap) 的 物体 需要 小 心 处 理 。 这 些 物体 需要 额 
外 的 泻 染 参数 ， 例 如 ， 在 光照 纹理 上 的 索引 、 偏 移 量 和 缩放 信息 
等 。 因 此 ， 为 了 让 这 些 物 体 可 以 被 动态 批 处 理 ， 我 们 需要 保证 它 
们 指向 光照 纹理 中 的 同一 个 位 置 。 

多 Pass 的 shader 会 中 断 批 处 理 。 在 前 向 泻 染 中 ， 我 们 有 时 需要 使 用 
额外 的 Pass 来 为 模型 添加 更 多 的 光照 效果 ， 但 这 样 一 来 模型 就 不 会 
被 动态 批 处 理 了 。 


在 本 书 资源 的 Scene_16_3_1 场 景 中 ， 我 们 给 出 了 这 样 一 个 场景 。 
场景 中 包含 了 3 个 了 立方体， 它们 使 用 同一 个 材质 ， 同 时 还 包含 了 一 个 使 
用 其 他 材质 的 球体 。 场 景 中 还 包 售 了 一 个 平行 光 ， 但 我 们 关闭 了 它 的 
阴影 效果 ， 以 避免 阴影 计算 对 批 处 理 数目 的 影响 。 这 样 一 个 场景 的 泻 
染 统 计数 据 如 图 16.4 所 示 。 


从 图 16.4 中 可 以 看 出 ， 要 泻 染 这 样 一 个 包含 了 4 个 物体 的 场景 共 需 
要 两 个 批 处 理 。 其 中 ， 一 个 批 处 理 用 于 绘制 经 过 动态 批 处 理 合 并 后 的 3 
个 立方 体 网 格 ， 另 一 个 批 处理 用 于 绘制 球体 。 我 们 可 以 从 Save by 
batching 看 出 批 处 理 帮 我 们 节省 了 两 个 draw call 。 


现在 ， 我 们 再 向 场景 中 添加 一 个 点 光源 ， 并 调整 它 的 位 置 使 它 可 
以 照 亮 场景 中 的 4 个 物体 。 由 于 场景 中 的 物体 都 使 用 了 多 个 Pass 的 
shader， 因 此 ， 点 光源 会 对 它们 产生 光照 影响 。 图 16.5 给 出 了 添加 点 光 
源 后 的 泻 染 统计 数据 。 
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A 图 16.4 动态 批 处 理 


A 图 16.5 多 光源 对 动态 批 处 理 的 影响 结 采 


从 图 16.5 中 可 以 看 出 ， 演 染 一 帧 所 需 的 批 处 理 数目 增 大 到 了 8， 而 
Save by batching 的 数目 也 变 成 了 0。 这 是 因为 ， 使 用 了 多 个 Pass 的 


shader 在 需要 应 用 多 个 光照 的 情况 下 ， 破 坏 了 动态 批 处 理 的 机 制 ， 导 致 
Unity 不 能 对 这 些 物体 进行 动态 批 处 理 。 而 由 于 平行 光 和 点 光源 需要 对 4 
个 物体 分 别 产 生 影 响 ， 因 此 ， 需 要 2x4 个 批 处 理 操 作 。 需 要 注意 的 是 ， 
只 有 物体 在 点 光源 的 影响 范围 内 ，Unity 才 会 调用 额外 的 Pass 来 处 理 
它 。 因 此 ， 如 琳 场 景 中 后 光源 距离 物体 很 还 ， 那 么 它们 仍然 会 被 动态 
批 处 理 的 。 


动态 批 处 理 的 限制 条 件 比 较 多 ， 例 如 很 多 时 候 ， 我 们 的 模型 数据 
往往 会 超过 900 的 顶点 属性 限制 。 这 种 时 候 依赖 动态 批 处 理 来 减少 draw 
call 显 然 已 经 不 能 够 满足 我 们 的 需求 了 。 这 时 ， 我 们 可 以 使 用 Unity 的 静 
态 批 处 理 技术 。 


16.4.2 ”静态 批 处 理 


Unity 提 供 了 为 一 种 批 处 理 方式 ， 即 静态 批 处 理 。 相 比 于 动态 批 处 
理 来 说 ， 静 态 批 处 理 适 用 于 任何 大 小 的 几何 模型 。 它 的 实现 原理 走 ， 
只 在 运行 开始 阶段 ， 把 需要 进行 静态 批 处 理 的 模型 合并 到 一 个 新 的 网 
格 结构 中 ， 这 意味 着 这 些 模 型 不 可 以 在 运行 时 刻 被 移动 。 但 由 于 它 只 
需要 进行 一 次 合并 操作 ， 因 此 ， 比 动态 批 处 理 更 加 高 效 。 静 态 批 处 理 
的 男 一 个 缺点 在 于 ， 它 往往 需要 占用 更 多 的 内 存 来 存储 合并 后 的 几何 
结构 。 这 是 因为 ， 如 果 在 静态 批 处 理 前 一 些 物体 共享 了 相同 的 网 格 ， 
那么 在 内 存 中 每 一 个 物体 都 会 对 应 一 个 该 网 格 的 复制 品 ， 即 一 个 网 格 
会 变 成 多 个 网 格 再 发 送 给 GPU。 如 果 这 类 使 用 同一 网 格 的 对 象 很 多 ， 
那么 这 就 会 成 为 一 个 性 能 瓶 贷 了 。 例 如 ， 如 琳 在 一 个 使 用 了 1 000 个 相 
同 树 模 型 的 森林 中 使 用 静态 批 处 理 ， 那 么 ， 就 会 多 使 用 1 000 倍 的 内 
存 ， 这 会 造成 挛 重 的 内 存 影响 。 这 种 时 候 ， 解 决 方法 要 么 仿 受 这 种 牺 
牲 内 存 换 取 性 能 的 方法 ， 要 么 不 要 使 用 静态 批 处 理 ， 而 使 用 动态 批 处 


理 技术 〈 但 要 小 心 控制 模型 的 顶点 属性 数目 ) ， 或 者 自己 编写 批 处 理 
的 方法 3 


在 本 书 资源 的 Scene_16_3_2 场 景 中 ， 我 们 给 出 了 一 个 测试 静态 批 
处 理 的 场景 。 场 景 中 包含 了 3 个 Teapot 模 型 ， 它 们 使 用 同一 个 材质 ， 同 
时 还 包含 了 一 个 使 用 不 同 材质 的 立方 体 。 场 景 中 还 包含 了 一 个 平行 
光 ， 但 我 们 关闭 了 它 的 阴影 效果 ， 以 避免 阴影 计算 对 批 处 理 数目 的 影 
响 。 在 运行 前 ， 这 样 一 个 场景 的 泻 染 统 计数 据 如 图 16.6 所 示 。 


从 图 16.6 中 可 以 看 出 ， 尽 管 3 个 Teapot 模 型 使 用 了 相同 的 材质 ， 但 
它们 仍然 没有 被动 态 批 处 理 。 这 是 因为 ，Teapot 模 型 包含 的 顶 斥 数 目 是 
393， 而 它们 使 用 的 shader 中 需要 使 用 4 个 顶点 属性 (顶点 位 置 、 法 线 方 
向 、 切 线 方向 和 纹理 坐标 ) ， 超 过 了 动态 批 处 理 中 限定 的 900 限 制 。 此 
时 ， 要 想 减 少 draw call 束 需要 使 用 静态 批 处 理 。 


静态 批 处 理 的 实现 非常 简单 ， 只 需要 把 物体 面板 上 的 Static 复 选 框 
勾 选 上 即 可 (实际 上 我 们 只 需要 勾 选 Batching Static 即 可 ) ， 如 图 16.7 
所 示 。 


这 时 ， 我 们 再 观察 泻 染 统计 窗口 中 的 批 处 理 数目 ， 还 是 没有 变 
化 。 但 是 不 要 急 ， 运 行程 序 后， 变化 就 出 现 了 ， 如 图 16.8 所 示 。 


> 


图 16.6 ”静态 批 处 理 前 的 演 染 统计 数据 


Tag | untagoed 站 Layer Doll 


appm 


入 Transform [mE 
Position X -L87 YI-L5 |ZIQ97 


Rotation X270 Y 331307 Z 0 
和 ae XxX2 Y2 


A 图 16.7 把 物体 标志 为 Static 


从 图 16.2 中 可 以 看 出 ， 现 在 的 批 处 理 数目 变 成 了 2， 而 Save by 
batching 数 目 也 显示 为 2。 此 时 ， 如 采 我 们 在 运行 时 查看 每 个 模型 使 用 
的 网 格 ， 会 发 现 它 们 都 变 成 了 一 个 名 为 Combined Mesh (roo: scene) 的 东 
西 ， 如 图 16.9 所 示 。 这 个 网 格 是 Unity 合 并 了 所 有 被 标识 为 “Static” 的 物 
体 的 结果 ， 在 我 们 的 例子 里 ， 就 是 3 个 Teapot 和 一 个 立方 体 。 读 者 可 能 
会 有 一 个 疑问 ， 这 4 个 对 象 明 明 不 是 都 使 用 了 一 个 材质 ， 为 什么 可 以 合 
并 成 一 个 呢 ? 如 果 你 仔细 观看 图 16.9 的 结果 ， 会 发 现在 图 16.9 的 右 下 方 
标明 了 “4 submeshes”， 世 就 是 说 ， 这 个 合并 后 的 网 格 其 实 包 仿 了 4 个 子 
网 格 ， 即 场景 中 的 4 个 对 象 。 对 于 合并 后 的 网 格 ，Unity 会 判断 其 中 使 用 
同一 个 材质 的 子 网 格 ， 然 后 对 它们 进行 批 处 理 。 


和 图 16.8 静态 批 处 理 


Combined Mesh (root. scene) 


8 tris, 4 subme 


A 图 16.9 ”静态 批 处 理 中 Unity 会 合并 所 有 被 标识 为 “Static” 的 物体 


在 内 部 实现 上 ，Unity 自 先 把 这 些 静 态 物 体 变 换 到 世界 空间 下 ， 然 
后 为 它们 构建 一 个 更 大 的 顶点 和 索引 缓存 。 对 于 使 用 了 同一 材质 的 物 
体 ，Unity 只 需要 调用 一 个 draw call 就 可 以 绘制 全 部 物体 。 而 对 于 使 用 
了 不 同 材质 的 物体 ， 静 态 批 处 理 同样 可 以 提升 泻 染 性 能 。 尺 管 这 些 物 
体 仍 然 需要 调用 多 个 draw call， 但 静态 批 处 理 可 以 减少 这 些 draw call 之 
间 的 状态 切换 ， 而 这 些 切 换 往往 是 费时 的 操作 。 从 合并 后 的 网 格 结构 
中 我 们 还 可 以 发 现 ， 尽 管 3 个 Teapot 对 象 使 用 了 同一 个 网 格 ， 但 合并 后 
却 变 成 了 3 个 独立 网 格 。 而 且 ， 我 们 可 以 从 Unity 的 分 析 器 中 观察 到 在 应 
用 静态 批 处 理 前 后 VBO total 的 变化 ， 从 图 16.10 所 示 中 可 以 看 出 ，VBO 
(Vertex Buffer Object， 顶 点 缓冲 对 象 ) 的 数目 变 大 了 “。 这 正 是 因为 静 
态 批 处 理会 占用 更 多 内 存 的 缘故 ， 正 如 本 市 一 开头 所 讲 ， 欧 态 批 处 理 
需要 占用 更 多 的 内 存 来 存储 合并 后 的 几何 结构 ， 如 果 一 些 物体 共享 了 
相同 的 网 格 ， 那 么 在 内 存 中 每 一 个 物体 都 会 对 应 一 个 该 网 格 的 复制 


HH ” 


A 图 16.10 ”静态 批 处 理会 占用 更 多 的 内 存 。 左 边 : 静态 批 处 理 前 的 泻 染 统计 数据 ， 右 边 : 静 


态 批 处 理 后 的 泻 染 统计 数据 


如 条 场景 中 包含 了 除了 平行 光 以 外 的 其 他 交 源 ， 并 且 在 shader 中 有 定 
义 了 额外 的 Pass 来 处 理 它们 ， 这 些 额 外 的 Pass 部 分 是 不 会 被 批 处 理 的 。 
图 16.11 显 示 了 在 场景 中 添加 了 一 个 会 影响 4 个 物体 的 后 光源 之 后 ， 泻 染 
统计 窗口 的 数据 变化 。 


A 图 16.11 处 理 其 他 逐 像素 光 的 Pass 不 会 被 静态 批 处 理 


但 是 ， 处 理 平行 光 的 Base Pass 部 分 仍然 会 被 静态 批 处 理 ， 因 此 ， 
我 们 仍然 可 以 市 省 两 个 draw call。 


16.4.3 ”共享 材质 

从 之 前 的 内 容 可 以 看 出 ， 无 论 是 动态 批 处 理 还 是 静态 批 处 理 ， 都 
要 求 模型 之 间 需 要 共享 同一 个 材质 。 但 不 同 的 模型 之 间 总 会 需要 有 不 
同 的 演 染 属性 ， 例 如 ， 使 用 不 同 的 纹理 、 颜 色 等 。 这 时 ， 我 们 需要 一 
些 策 略 来 尽 可 能 地 合并 材质 。 


如 果 两 个 材质 之 间 只 有 使 用 的 纹理 不 同 ， 我 们 可 以 把 这 些 纹理 合 
并 到 一 张 更 大 的 纹理 中 ， 这 张 更 大 的 纹理 被 称 为 是 一 张 图 集 (atlas) 。 
一 旦 使 用 了 同一 张 纹理 ， 我 们 就 可 以 使 用 同一 个 材质 ， 再 使 用 不 同 的 
采样 坐标 对 纹理 采样 即 可 。 


但 有 时 ， 除 了 纹理 不 同 外 ,不同 的 物体 在 材质 上 还 有 一 些微 小 的 
参数 变化 ， 例 如 ， 颜 色 不 同 、 某 些 浮 点 属性 不 同 。 但 是 ， 不 管 是 动态 
批 处 理 还 是 静态 批 处 理 ， 它 们 的 前 提 都 是 要 使 用 同一 个 材质 。 是 同一 


个 ， 而 不 古 使 用 了 同一 种 Shader 的 材质 ， 也 就 是 说 它们 指向 的 材质 必须 
苹 同 一 个 实体 。 这 意味 着 ， 只 要 我 们 调整 了 参数 ， 束 会 影响 到 所 有 使 
用 这 个 材质 的 对 象 。 那 么 想 要 微小 的 调整 怎么 办 呢 ? 一 种 利用 的 方法 
就 是 使 用 网 格 的 顶点 数据 〈 最 币 见 的 就 是 顶点 颜色 数据 ) 来 存储 这 些 


参数 。 


前 面 说 过 ， 经 过 批 处 理 后 的 物体 会 被 处 理 成 更 大 的 VBO 发 送 给 
GPU，VBO 中 的 数据 可 以 作为 输入 传递 给 顶点 着 色 器 ， 因 此 ， 我 们 可 
以 巧妙 地 对 VBO 中 的 数据 进行 控制 ， 从 而 达到 不 同 效 果 的 目的 。 一 个 
例子 是 ， 和 森林 场景 中 所 有 的 树 使 用 了 同一 种 材质 ， 我 们 希望 它们 可 以 
通过 批 处 理 来 减少 draw call， 但 不 同 树 的 颜色 可 能 不 同 。 这 时 ， 我 们 可 
以 利用 网 格 的 顶点 的 颜色 数据 来 调整 。 


需要 注意 的 是 ， 如 果 我 们 需要 在 脚本 中 访问 共享 材质 ， 应 该 使 用 
Renderer.sharedMaterial 来 保证 修改 的 是 和 其 他 物体 共享 的 材质 ， 但 这 意 
味 着 修改 会 应 用 到 所 有 使 用 该 材质 的 物体 上 。 另 一 个 类 似 的 API 是 
Renderermaterial ， 如 果 使 用 Renderer.material 来 修改 材质 ，Unity 会 创 
建 一 个 该 材质 的 复制 品 ， 从 而 破坏 批 处 理 在 该 物体 上 的 应 用 ， 这 可 能 
并 不 是 我 们 希望 看 到 的 。 


16.4.4” 批 处 理 的 注意 事项 
在 选择 使 用 动态 批 处 理 还 是 静态 批 处 理 时 ， 我 们 有 一 些小 小 的 建 
议 。 


。 尺 可 能 选择 静态 批 处 理 ， 但 得 时 刻 小 心 对 内 存 的 消耗 ， 并 且 记 住 
经 过 静态 批 处 理 的 物体 不 可 以 再 被 移动 。 


。 如 果 无 法 进行 静 仿 批 处 理 ， 而 要 使 用 动态 批 处 理 的 话 ， 那 么 请 小 
心 上 面 提 到 的 各 种 条 件 限制 。 例 如 ， 尽 可 能 让 这 样 的 物体 少 并 且 
尺 可 能 让 这 些 物 体 包含 少量 的 顶点 属 性 和 顶点 数目 。 

。 对 于 游戏 中 的 小 道具 ， 例 如 可 以 捡拾 的 金币 等 ， 可 以 使 用 动态 批 
处 理 。 

。 对 于 包含 动画 的 这 类 物体 ， 我 们 无 法 全 部 使 用 静 仿 批 处 理 ， 但 其 
中 如 果 有 不 动 的 部 分 ， 可 以 把 这 部 分 标识 成 <Static”。 


除了 上 述 提 示 外 ， 在 使 用 批 处 理 时 还 有 一 些 需要 注意 的 地 方 。 由 
于 批 处 理 需 要 把 多 个 模型 变换 到 世界 空间 下 再 合并 它们 ， 因 此 ， 如 果 
shader 中 存在 一 些 基 于 模型 空间 下 的 坐标 的 运算 ， 那 么 往往 会 得 到 错误 
的 结果 。 一 个 解决 方法 是 ， 在 shader 中 使 用 DisableBatching 标 签 来 强制 
使 用 该 Shader 的 材质 不 会 被 批 处 理 。 另 一 个 注意 事项 是 ， 使 用 半 透 明 材 
质 的 物体 通常 需要 使 用 严格 的 从 后 往 前 的 绘制 顺序 来 保证 透明 混合 的 
正确 性 。 对 于 这 些 物体 ，Unity 会 首先 保证 它们 的 绘制 顺序 ， 再 尝试 对 
它们 进行 批 处 理 。 这 意味 着 ， 当 绘制 顺序 无 法 满足 时 ， 批 处 理 无 法 在 
这 些 物体 上 被 成 功 应 用 。 


尽管 在 Unity 5.2 中 ， 只 实现 了 对 一 些 泻 染 部 分 的 批 处 理 。 而 诸如 泻 
染 摄 像 机 的 深度 纹理 等 部 分 ， 还 没有 实现 批 处 理 。 但 我 们 相信 ， 在 后 
续 的 Unity 版 本 中 ， 批 处 理会 应 用 到 越 来 越 多 的 泻 染 部 分 中 。 


16.5 减少 需要 处 理 的 顶 挟 数目 


尽管 draw call 十 一 个 重要 的 性 能 指标 ,但 顶点 数目 同样 有 可 能 成 为 
GPU 的 性 能 瓶 贷 。 在 本 广 中 ， 我 们 将 给 出 3 个 音 用 的 项 后 优化 集 上 略 。 


16.5.1 ”优化 几何 体 


3D 游 戏 制作 通 党 都 是 由 模型 制作 开始 的 。 而 在 建 模 时 ， 有 一 条 规 
则 我 们 需要 记 住 : 尽 可 能 减少 模型 中 三 角 面 片 的 数目 ， 一 些 对 于 模型 
没有 影响 、 或 是 肉眼 非常 难 察觉 到 区 别 的 顶点 都 要 尽 可 能 去 掉 。 为 了 
尽 可 能 减少 模型 中 的 顶点 数目 ， 美 工人 员 往 往 需要 优化 网 格 结构 。 在 
很 多 三 维 建 模 软 件 中 ， 都 有 相应 的 优化 选项 ， 可 以 目 动 优 化 网 格 结 
构 。 


在 Unity 的 泻 染 统计 窗口 中 ， 我 们 可 以 查看 到 渲染 当前 帧 需要 的 三 
角 面 片 数目 和 顶点 数目 。 需 要 注意 的 是 ，Unity 中 显示 的 数目 往往 要 多 
于 建 模 软件 里 显示 的 顶点 数 ， 通 常 Unity 中 显示 的 数目 要 大 很 多 。 谁 才 
是 对 的 呢 ? 其 实 ， 这 征 因 为 在 不 同 的 角度 上 计算 的 ， 都 有 各 目的 道 
理 ， 但 我 们 真正 应 该 关心 的 是 Unity 里 显示 的 数目 。 


我 们 在 这 里 简单 解释 一 下 造成 这 种 不 同 的 原因 。 三 维 软件 更 多 地 
是 站 在 我 们 人 类 的 角度 理解 顶点 的 ， 即 组 成 几何 体 的 每 一 个 点 就 是 一 
个 单独 的 点 。 而 Unity 是 站 在 GPU 的 角度 上 去 计算 顶点 数 的 。 在 GPU 看 
来 ， 有 时 需要 把 一 个 顶点 拆 分 成 两 个 或 更 多 的 顶点 。 这 种 将 顶点 一 分 
为 多 的 原因 主要 有 两 个 ;一 个 是 为 了 分 离 纹理 坐标 (uv splits) ， 另 一 
个 是 为 了 产生 平滑 的 边界 (smoothing splits) 。 它 们 的 本 质 ， 其 实 都 
是 因为 对 于 GPU 来 说 ， 顶 点 的 每 一 个 属性 和 顶点 之 间 必 须 是 一 对 一 的 
关系 。 而 分 离 纹理 坐标 ， 是 因为 建 模 时 一 个 顶点 的 纹理 坐标 有 多 个 。 
例如 ， 对 于 一 个 立方 体 ， 它 的 6 个 面 之 间 虽 然 使 用 了 一 些 相同 的 顶点 ， 
但 在 不 同 面 上 ， 同 一 个 顶点 的 纹理 坐标 可 能 并 不 相同 。 对 于 GPU 来 
说 ， 这 是 不 可 理解 的 ， 因 此 ， 它 必须 把 这 个 顶点 拆 分 成 多 个 具有 不 同 
纹理 坐标 的 顶点 。 而 平 请 边界 也 是 类 似 的 ， 不 同 的 是 ， 此 时 一 个 顶点 


可 能 会 对 应 多 个 法 线 信 息 或 切线 信息 。 这 通常 是 因为 我 们 要 决定 一 个 
边 是 一 条 便 边 (hard edge) 还 是 一 条 平滑 边 (smooth edge) 。 

对 于 GPU 来 说 ， 它 本 质 上 只 天 心 有 和 多少 个 顶点 。 因 此 ， 尽 可 能 减 
少 顶 点 的 数目 其 实 才 是 我 们 真正 需要 关心 的 事情 。 因 此 ， 最 后 一 条 几 
何 体 优化 建议 就 是 : 移 除 不 必要 的 硬 边 以 及 纹理 衔接 ， 避 免 边界 平滑 
和 纹理 分 离 。 


16.5.2 ”模型 的 LOD 技 术 


另 一 个 减少 顶点 数目 的 方法 是 使 用 LOD (Level of Detail) 技术 。 
这 种 技术 的 原理 是 ， 当 一 个 物体 离 摄 像 机 很 远 时 ， 模 型 上 的 很 多 细 市 
古 无 法 被 察 沉 到 的 。 因 此 ，LOD 人 允许 当 对 和 象 逐 渐 远 离 摄 像 机 时 ， 减 少 
模型 上 的 面 片 数量 ， 从 而 提高 性 能 。 


在 Unity 中 ， 我 们 可 以 使 用 LOD Group 组 件 来 为 一 个 物体 构建 一 个 
LOD。 我 们 需要 为 同一 个 对 象 准备 多 个 包含 不 同 细节 程度 的 模型 ， 然 
后 把 它们 赋 给 LOD Group 组 件 中 的 不 同等 级 ，Unity 束 会 目 动 判 断 当 前 
位 置 上 需要 使 用 哪个 等 级 的 模型 。 


16.5.3 ”并 挡 剔除 技术 


我 们 最 后 要 介绍 的 顶点 优化 策略 束 是 遮挡 剔除 (Occlusion 
culling) 技术 。 遮 挡 噜 除 可 以 用 来 消除 那些 在 其 他 物件 后 面 看 不 到 的 物 
件 ， 这 意味 着 资源 不 会 浪费 在 计算 那些 看 不 到 的 顶点 上 ， 进 而 提升 性 


侣 巴 
月 世 “ 


我 们 需要 把 让 挡 吻 除 和 摄像 机 的 视 锥 体 吻 除 (Frustum Culling) 区 
分 开 来 。 视 锥 体 别 除 只 会 剔除 掉 那 些 不 在 摄像 机 的 视野 范围 内 的 对 
象 ， 但 不 会 判断 视野 中 是 否 有 物体 被 其 他 物体 挡住 。 而 遮挡 剔除 会 使 
用 一 个 虚拟 的 摄像 机 来 授 历 场景 ， 从 而 构建 一 个 潜在 可 见 的 对 象 集 合 
的 层级 结构 。 在 运行 时 刻 ， 每 个 摄像 机 将 会 使 用 这 个 数据 来 识别 哪些 
物体 是 可 见 的 ， 而 哪些 被 其 他 物体 挡住 不 可 见 。 使 用 迟 挡 别 除 技术 ， 
不 仅 可 以 减少 处 理 的 顶点 数目 ， 还 可 以 减少 overdraw， 提 高 游戏 性 能 。 


要 在 Unity 中 使 用 遮挡 剔除 技术 ， 我 们 需要 进行 一 系列 额外 的 处 理 
工作 。 有 具体 步骤 可 以 参见 Unity 手 册 的 相关 内 容 
(http://docs.unity3d.com/Manual/OcclusionCulling.html) ， 本 书 不 再 玖 
壕 o 


模型 的 LOD 技 术 和 遮挡 剔除 技术 可 以 同时 减少 CPU 和 GPU 的 负 
荷 。CPU 可 以 提交 更 少 的 draw call， 而 GPU 需要 处 理 的 顶点 和 片 元 数目 
也 减少 了 。 


16.6 减少 需要 处 理 的 片 元 数目 
另 一 个 造成 GPU 瓶颈 的 是 需要 处 理 过 多 的 片 元 。 这 部 分 优化 的 重 


点 在 于 减少 overdraw。 人 简单 来 说 ，overdraw 指 的 束 是 同一 个 像素 被 绘制 
了 多 次 。 


Unity 还 提供 了 查看 overdraw 的 视图 ， 我 们 可 以 在 Scene 视图 左上 方 
的 下 拉 来 单 中 选中 Overdraw 即 可 。 实 际 上 ， 这 里 的 视图 只 是 提供 了 碍 
看 物体 相互 遮挡 的 层 数 ， 并 不 是 真正 的 最 终 屏 幕 绘制 的 overdraw。 也 束 
是 说 ， 可 以 理解 为 它 显 示 的 是 ， 如 果 没 有 使 用 任何 深度 测试 和 其 他 优 


化 策略 时 的 overdraw。 这 种 视图 是 通过 把 所 有 对 象 部 泻 染 成 一 个 通明 的 
轮廓 ， 通 过 查看 透明 颜色 的 款 计 程度 ， 来 判断 物体 之 间 的 遮挡 。 当 
然 ， 我 们 可 以 使 用 一 些 措施 来 防止 这 种 最 坏 情 况 的 出 现 。 


16.6.1 ”控制 绘制 顺序 


为 了 最 大 限度 地 避免 overdraw， 一 个 重要 的 优化 策略 就 是 控制 绘制 
顺序 。 由 于 深度 测试 的 存在 ， 如 果 我 们 可 以 保证 物体 都 是 从 前 往 后 绘 
制 的 ， 那 么 就 可 以 很 大 程度 上 减少 overdraw。 这 是 因为 ， 在 后 面 绘制 的 
物体 由 于 无 法 通过 深度 测试 ， 因 此 ， 就 不 会 再 进行 后 面 的 泻 染 处 理 。 


在 Unity 中 ， 那 些 泻 染 队列 数目 小 于 2 500 
(如 “Background”“Geometry” 和 “AlphaTest”) 的 对 象 都 被 认为 是 不 透明 
(opaque) 的 物体 ， 这 些 物体 总 体 上 是 从 前 往 后 绘制 的 ， 而 使 用 其 他 
的 队列 (如 “Transparent”Overlay” 等 ) 的 物体 ， 则 是 从 后 往 前 绘制 的 。 
这 意味 着 ， 我 们 可 以 尽 可 能 地 把 物体 的 队列 设置 为 不 透明 物体 的 泻 染 
队列 ， 而 尽量 避免 使 用 半 透 明 队列 。 


而 且 ， 我 们 还 可 以 充分 利用 Unity 的 泻 染 队列 来 控制 绘制 顺序 。 例 
如 ， 在 第 一 人 称 射 击 游戏 中 ， 对 于 游戏 中 的 主要 人 物 角色 来 说 ， 他 们 
使 用 的 shader 往 往 比 较 复 洒 ， 但 是 ， 由 于 他 们 通常 会 挡住 屏 医 的 很 大 一 
部 分 区 域 ， 因 此 我 们 可 以 先 绘制 它们 (使 用 更 小 的 泻 染 队列 ) 。 而 对 
于 一 些 敌 方 角色 ， 它 们 通常 会 出 现在 各 种 掩体 后 面 ， 因 此 ， 我 们 可 以 
在 所 有 常规 的 不 透明 物体 后 面 泻 染 它们 (使 用 更 大 的 泻 染 队列 ) 。 而 
对 于 天 空 盒子 来 说 ， 它 几乎 履 盖 了 所 有 的 像素 ， 而 且 我 们 知道 它 永 远 
会 出 现在 所 有 物体 的 后 面 ， 因 此 ， 它 的 队列 可 以 设置 
为 “Geometryt+1”。 这 样 ， 束 可 以 保证 不 会 因为 它 而 造成 overdraw 。 


这 些 排序 的 思想 往往 可 以 节省 掉 很 多 泻 染 时 间 。 
16.6.2 ”时 刻 警 惕 透明 物体 


对 于 半 透 明 对 象 来 说 ， 由 于 它们 没有 开启 深度 写 入 ， 因 此 ， 如 果 
要 得 到 正确 的 泻 染 效果 ， 就 必须 从 后 往 前 浑 染 。 这 意味 着 ， 半 透明 物 
体 几乎 一 定 会 造成 overdraw。 如 采 我 们 不 注意 这 一 点 ， 在 一 些 机 絮 上 可 
能 会 造成 严重 的 性 能 下 降 。 例 如 ， 对 于 GUI 对 和 象 来 说 ， 它 们 大 多 被 设置 
成 了 半 透 明 ， 如 采 屏 幕 中 GUI 占据 的 比例 太 多 ， 而 主 摄像 机 又 没有 进行 
调整 而 是 投影 整个 屏幕 ， 那 么 GUI 束 会 造成 大 量 overdraw 。 


因此 ， 如 果 场 景 中 包含 了 大 面积 的 音 透 明 对 象 ， 或 者 有 很 多 层 相 
互 履 盖 的 半 透 明 对 象 (即便 它们 每 个 的 面积 可 能 都 不 大 ) ， 或 者 是 透 
明 的 粒子 效果 ， 在 移动 设备 上 也 会 造成 大 量 的 overdraw。 这 是 应 该 尽量 
避 储 的 。 


对 于 上 述 GUI 的 这 种 情况 ， 我 们 可 以 尽量 减少 窗口 中 GUI 所 占 的 面 
积 。 如 果实 在 无 能 为 力 ， 我 们 可 以 把 GUI 的 绘制 和 三 维 场景 的 绘制 交 给 
不 同 的 摄像 机 ， 而 其 中 负责 三 维 场景 的 摄像 机 的 视角 范围 尽量 不 要 和 
GUI 的 相互 重 营 。 当 然 ， 这 样 会 对 游戏 的 美观 度 产 生 一 定 影响 ， 因 此 ， 
我 们 可 以 在 代码 中 对 机 器 的 性 能 进行 判断 ， 例 如 ， 首 先天 闭 一 些 耗费 
性 能 的 功能 ， 如 果 发 现 这 个 机 器 表现 非常 良好 ， 再 尝试 开启 一 些 特效 
功能 。 


在 移动 平 全 上， 透明 度 测 试 也 会 影响 游戏 性 能 。 虽 然 透明 度 测 试 
没有 关闭 深度 写 入 ， 但 由 于 它 的 实现 使 用 了 discard 或 clip 操 作 ， 而 这 些 
操作 会 寻 致 一 些 硬件 的 优化 集 略 失效 。 例 如 ， 我 们 之 前 讲 过 PowerVR 


使 用 的 基于 瓦 片 的 延迟 渔 染 技 术 ， 为 了 减少 overdraw 它 会 在 调用 片 元 痢 
色 器 前 就 判断 哪些 瓦 片 被 真正 泻 染 的 。 但 是 ， 由 于 透明 度 测试 在 片 元 
关 色 屁 中 使 用 了 discard 函 数 改 变 了 片 元 是 否 会 被 渔 染 的 结果 ， 因 此 ， 
GPU 束 无 法 使 用 上 述 的 优化 策略 了 。 也 就 是 说 ， 只 有 在 执行 了 所 有 的 
片 元 着 色 硕 后 ，GPU 才 知道 哪些 片 元 会 被 真正 渔 染 到 屏 闪 上 ， 这 样 ， 
原先 那些 可 以 减少 overdraw 的 优化 瑟 都 无 效 了 。 这 种 时 候 ， 使 用 透明 度 
混合 的 性 能 往往 比 使 用 透明 度 测 试 更 好 。 


16.6.3 ”减少 实时 光照 和 阴影 


实时 光照 对 于 移动 平台 是 一 种 非常 昂贵 的 操作 。 如 果 场 景 中 包 合 
丁 过 多 的 点 光源 ， 并 日 使 用 了 多 个 Pass 的 Shader， 那 么 很 有 可 能 会 造成 
性 能 下 降 。 例 如 ， 一 个 场景 里 如 果 包 含 了 3 个 逐 像 素 的 点 光源 ， 而 且 使 
用 了 逐 像素 的 Shader， 那 么 很 有 可 能 将 draw call 数 目 (CPU 的 瓶 贷 ) 提 
高 3 倍 ， 同 时 也 会 增加 overdraw (GPU 的 瓶 贷 ) 。 这 是 因为 ， 对 于 逐 像 


和 是， 无 论 是 静态 批 处 理 还 是 动态 批 处 理 ， 对 于 这 种 额外 的 处 理 逐 像素 
光源 的 Pass 都 无 法 进行 批 处 理 ， 也 就 古 说 ， 它 们 会 中 断 批 处 理 。 


当然 ， 游 戏 场景 还 是 需要 光照 才能 得 到 出 色 的 画面 效果 。 我 们 看 
到 很 多 成 功 的 移动 平台 的 游戏 ， 它 们 的 画面 效 末 看 起 来 好 像 包 售 了 很 
多 光源 ， 但 其 实 这 部 是 锋 人 人 的。 这些 游 戏 往往 使 用 了 烘焙 技术 ， 把 光 
照 提前 烘焙 到 一 张 光照 纹理 (lightmap) 中 ， 然 后 在 运行 时 刻 只 需要 根 
据 纹 理 采 样 得 到 光照 结 琳 即 可 。 男 一 个 模拟 光源 的 方法 是 使 用 God 
Ray。 场 景 中 很 多 小 型 光源 的 效果 都 是 靠 这 种 方法 模拟 的 。 它 们 一 般 并 
不 是 真 的 光源 ， 很 多 情况 是 通过 透明 纹理 模拟 得 到 的 。 更 多 信息 可 以 
参见 本 章 的 扩展 阅读 部 分 。 在 移动 平台 上 ， 一 个 物体 使 用 的 逐 像素 光 


站 


源 数目 应 该 小 于 1 (不 包括 平行 光 ) 。 如 果 一 定 要 使 用 更 多 的 实时 光 ， 
可 以 选择 用 逐 顶点 光照 来 代替 。 


在 游戏 《ShadowGun》 中， 游戏 角色 看 起 来 使 用 了 非常 复杂 高 级 
的 光照 计算 ,但 这 实际 上 是 优化 后 的 结果 。 开 发 者 们 把 复杂 的 光照 计 
算 存 储 到 一 张 查找 纹理 (lookup texture， 也 被 称 为 查找 表 ，lookup 
table，LUT) 中 。 然 后 在 运行 时 刻 ， 我 们 只 需要 使 用 光源 方向 、 视 角 
方 各 、 法 线 方向 等 参数 ， 对 LUT 采 样 得 到 光照 结 采 即 可 。 使 用 这 样 的 
得 找 纹理 ， 不 仅 可 以 让 我 们 使 用 更 出 色 的 光照 模型 ， 例 如 ， 更 加 复杂 
的 BRDF 模 型 ， 还 可 以 利用 查找 纹理 的 大 小 来 进一步 优化 性 能 ， 例 如 ， 
主要 角色 可 以 使 用 更 大 分 辨 率 的 LUT， 而 一 些 NPC 就 使 用 较 小 的 LUT 。 
《ShadowGun》 的 开发 者 开发 了 一 个 LUT 烘 焙 工 具 ， 来 帮助 美工 人 员 
快速 调整 光照 模型 ， 并 把 结果 存储 到 LUT 中 。 


实时 阴影 同样 是 一 个 非常 消耗 性 能 的 效果 。 不 仅 是 CPU 需要 提交 
更 多 的 draw call，GPU 也 需要 进行 更 多 的 处 理 。 因 此 ， 我 们 应 该 尽量 减 
少 实 时 阴影 ， 例 如 ， 使 用 烘焙 把 静态 物体 的 阴影 信息 存储 到 光照 纹理 
中 ， 而 只 对 场景 中 的 动态 物体 使 用 适当 的 实时 阴影 。 


16.7 节省 带宽 


大 量 使 用 未 经 压缩 的 纹理 以 及 使 用 过 大 的 分 辨 率 都 会 造成 由 于 市 
宽 而 引发 的 性 能 瓶 领 。 


16.7.1 ”减少 纹理 大 小 


之 前 提 到 过 ， 使 用 纹理 图 集 可 以 帮助 我 们 减少 draw call 的 数目 ， 而 
这 些 纹理 的 大 小 同样 是 一 个 需要 考虑 的 问题 。 需 要 注意 的 是 ， 所 有 纹 
理 的 长 宽 比 最 好 坪 正 方形， 而且 长 宽 值 最 好 生 2 的 整数 需 。 这 是 因为 有 
很 多 优化 策略 只 有 在 这 种 时 候 才 可 以 发 挥 最 大 效用 。 在 Unity 5 中 ， 即 
便 我 们 导入 的 纹理 长 宽 值 并 不 是 2 的 整数 峰 ，Unity 也 会 目 动 把 长 席 转 换 
到 离 它 最 近 的 2 的 整数 贤 值 。 但 我 们 仍然 应 该 在 制作 美术 资源 时 就 把 这 
条 规则 证 记 在 心 ， 防 止 由 于 放 缩 而 造成 不 好 的 影响 。 


除 此 之 外 ， 我 们 还 应 该 尽 可 能 使 用 多 级 渐 远 纹理 技术 

(mipmapping) 和 纹理 压缩 。 在 Unity 中 ， 我 们 可 以 通过 纹理 导入 面板 
来 查看 纹理 的 各 个 导入 属性 。 通 过 把 纹理 类 型 设置 为 Advanced， 束 可 
以 自 定义 许多 选项 ， 例 如 ， 是 否 生 成 多 级 渐 远 纹理 (mipmaps) ， 如 图 
16.12 所 示 。 当 勾 选 了 Generate Mip Maps 选 项 后 ，Unity 就 会 为 同一 张 
纹理 创建 出 很 多 不 同 大 小 的 小 纹理 ， 构 成 一 个 纹理 金字 塔 。 而 在 游戏 
运行 中 就 可 以 根据 距离 物体 的 远近 ， 来 动态 选择 使 用 哪 一 个 纹理 。 这 
是 因为 ， 在 距离 物体 很 远 的 时 候 ， 束 算 我 们 使 用 了 非常 精细 的 纹理 ， 
但 肉眼 也 是 分 辨 不 出 来 的 。 这 种 时 候 ， 我 们 完全 可 以 使 用 更 小 、 更 模 
糊 的 纹理 来 代 蔡 ， 这 可 以 让 GPU 使 用 分 辨 率 更 小 的 纹理 ， 大 量 市 省 访 
问 鸭 像素 数目 。 在 某 些 设备 上 上， 关闭 多 级 渐 远 纹理 往往 会 造成 严重 的 
性 能 问题 。 因 此 ， 除 非 我 们 确定 该 纹理 不 会 发 生 缩放 ， 例 如 GUI 和 2D 
游戏 中 使 用 的 纹理 等 ， 都 应 该 为 纹理 生成 相应 的 多 级 渐 远 纹理 。 
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图 16.12 ”Unity 的 高 级 纹理 设置 面板 


p> 


纹理 压缩 同样 可 以 节省 带宽 。 但 对 于 像 Android 这 样 的 平台 ， 有 很 
多 不 同 架 构 的 GPU， 纹 理 压缩 束 变 得 有 反复 杂 ， 因 为 不 同 的 GPU 染 构 
有 它 自己 的 纹理 压缩 格式 ， 例 如 ，PowerVRAM 的 PVRTC 格 式 、Tegra 
的 DXT 格 式 、Adreno 的 AIC 格 式 。 所 笠 的 是 ，Unity 可 以 根据 不 同 的 设 
备 选 择 不 同 的 压缩 格式 ， 而 我 们 只 需要 把 纹理 压缩 格式 设置 为 自动 压 
缩 妈 可。 但 是 ，GUI 类 型 的 纹理 同样 是 个 例外 ， 一 些 时 候 由 于 对 画 质 的 
要 求 ， 我 们 不 希望 对 这 些 纹理 进行 压缩 。 


16.7.2 ”利用 分 辨 率 缩放 


过 高 的 屏幕 分 辨 率 也 是 造成 性 能 下 降 的 原因 之 一 ， 尤 其 是 对 于 很 
多 低 端 手机 ， 除 了 分 辨 率 高 其 他 硬件 条 件 并 不 尽 如 人 意 ， 而 这 恰恰 是 
游戏 性 能 的 两 个 瓶颈 : 过 大 的 屏 顺 分 辨 率 和 糟 粽 的 GPU。 因 此 ， 我 们 
可 能 需要 对 于 特定 机 器 进行 分 辩 率 的 放 缩 。 当 然 ， 这样 可 能 会 造成 游 
戏 效果 的 下 降 ， 但 性 能 和 画面 之 间 永 远 是 个 需要 权衡 的 话题 。 


在 Unity 中 设置 屏幕 分 辨 率 可 以 直接 调用 Screen.SetResolution。 实 际 
使 用 中 可 能 会 遇 到 一 些 情 况 ， 雨 从 MOMO 有 一 篇 文章 
(http://www.xuanyusong.com/archives/3205) 详细 讲解 了 如 何 使 用 这 种 
技术 ， 读 者 可 参考 。 


16.8 减少 计算 复杂 度 

计算 复杂 度 同 样 会 影响 游戏 的 演 染 性 能 。 在 本 节 中 ， 我 们 会 介绍 
两 个 方面 的 技术 来 减少 计算 复杂 度 。 
16.8.1 _ Shader 的 LOD 技 术 


和 16.5.2 世 提 到 的 模型 的 LOD 技 术 类 似 ，Shader 上 LOD 技 术 可 以 控 
制 使 用 的 Shader 等 级 。 它 的 原理 是 ， 只 有 Shader 的 LOD 值 小 于 某 个 设 定 
的 值 ， 这 个 Shader 才 会 被 使 用 ， 而 使 用 了 那些 超过 设 定 值 的 Shader 的 物 
体 将 不 会 被 演 染 。 


我 们 通常 会 在 SubShader 中 使 用 类 似 下 面 的 语句 来 指明 该 shader 的 
LOD 值 : 
SubShader { 


Tags { "RenderType"="Opaque" } 
LOD 200 


我 们 也 可 以 在 Unity Shader 的 导入 面板 上 看 到 该 Shader 使 用 的 LOD 
值 。 在 默认 情况 下 ， 人 允许 的 LOD 等 级 是 无 限 大 的 。 这 意味 着 ， 任 何 被 
当前 显卡 支持 的 Shader 都 可 以 被 使 用 。 但 是 ， 在 某 些 情况 下 我 们 可 能 需 
要 去 掉 一 些 使 用 了 复杂 计算 的 Shader 泻 染 。 这 时 ， 我 们 可 以 使 用 
ShadermaximumLOD 或 ShaderglobalMaximumLOD 来 设置 允许 的 最 大 
LOD 值 。 


Unity 内 置 的 Shader 使 用 了 不 同 的 LOD 值 ， 例 如 ，Diffuse 的 LOD 为 
200， 而 Bumped Specular 的 LOD 为 400。 


16.8.2 ”代码 方面 的 优化 


在 实现 游戏 效果 时 ， 我 们 可 以 选择 在 哪里 进行 某 些 特定 的 运算 。 
通常 来 讲 ， 游 戏 需 要 计算 的 对 象 、 顶 点 和 像素 的 数目 排序 是 对 象 数 < 
顶点 数 < 像素 数 。 因 此 ， 我 们 应 该 尽 可 能 地 把 计算 放 在 每 个 对 象 或 逐 
顶点 上 。 例 如 ， 在 第 13 章 实现 高 斯 模糊 和 边缘 检测 时 ， 我 们 把 采样 坐 
标的 计算 放 在 了 顶点 着 色 絮 中， 这 样 的 做 法 远 好 于 把 它们 放 在 片 元 奢 
色 大 中 。 


而 在 具体 的 代码 编写 上， 不同 的 硬件 甚至 需要 不 同 的 处 理 。 
此 ， 一 些 普 遍 的 规则 在 某 些 硬 件 上 可 能 并 不 成 立 。 更 不 幸 的 是 ， 通 和 
Shader 代 码 的 优化 并 不 那么 直观 ， 尤 其 是 一 些 乎 台 上 缺少 相关 的 分 析 
二 ， 例 如 iOS 乎 台 。 尽 管 如 此 ， 在 本 区 我 们 还 是 会 给 出 一 些 被 认为 是 普 
饥 成 立 的 优化 策略 ， 但 读者 如 果 发 现在 某 些 设备 上 性 能 反而 有 所 下 降 
的 话 ， 这 并 不 奇怪 。 


首 移 第 一 点 是 ， 尽 可 能 使 用 低 精 度 的 浮 点 值 进行 运算 。 最 高 精度 
的 floathighp 适 用 于 存储 诸如 顶点 坐标 等 变量 ， 但 它 的 计算 速度 是 最 慢 
的 ， 我 们 应 该 尽量 避免 在 片 元 着 色 器 中 使 用 这 种 精度 进行 计算 。 而 
halfrmediump 适 用 于 一 些 标量 、 纹 理 坐 标 等 变量 ， 它 的 计算 速度 大 约 是 
float 的 两 倍 。 而 fixed/lowp 适 用 于 绝 大 多 数 颜色 变量 和 归 一 化 后 的 方 辐 
矢量 ， 在 进行 一 些 对 精度 要 求 不 高 的 计算 时 ， 我 们 应 该 尽量 使 用 这 种 
精度 的 变量 。 它 的 计算 速度 大 约 是 float 的 4 倍 ， 但 要 避免 对 这 些 低 精 度 
变量 进行 频繁 的 swizzle 操 作 (如 color.xwxw) 。 还 需要 注意 的 是 ， 我 们 
应 当 尽 量 避 免 在 不 同 精度 之 间 的 转换 ， 这 有 可 能 会 造成 一 定 的 性 能 


降 。 


对 于 绝 大 多 数 GPU 来 说 ， 在 使 用 插值 寄存 器 把 数据 从 顶点 着色 需 
传递 给 下 一 个 阶段 时 ， 我 们 应 该 使 用 尽 可 能 少 的 插值 变量 。 例 如 ， 如 
果 需 要 对 两 个 纹理 坐标 进行 插值 ， 我 们 通常 会 把 它们 打包 在 同一 个 
float4 类 型 的 变量 中 ， 两 个 纹理 坐标 分 别 对 应 了 xy 分 量 和 zw 分 量 。 然 
而 ， 对 于 PowerVR 平 台 来 说 ， 这 种 插值 变量 是 非常 廉价 的 ， 直 接 把 不 
同 的 纹理 坐标 存储 在 不 同 的 插值 变量 中 ， 有 时 反而 性 能 更 好 。 尤 其 
是 ， 如 果 在 PowerVR 上 使 用 类 似 tex2D(_MainTex, uv.zw) 这 样 的 语句 来 
进行 纹理 采样 ，GPU 束 无 法 进行 一 些 纹理 的 预 恋 取 ， 因 为 它 会 认为 这 
些 纹理 采样 是 需要 依赖 其 他 数据 的 。 因 此 ， 如 果 我 们 特别 关心 游戏 在 
PowerVR 上 的 性 能 ， 束 不 应 该 把 两 个 纹理 坐标 打包 在 同一 个 四 维 变量 
中 o 


尽 可 能 不 要 使 用 全 屏 的 屏幕 后 处 理 效 果 。 如 果 美 术 风 格 实在 是 需 
要 使 用 类 似 Bloom、 热 扰动 这 样 的 屏幕 特效 ， 我 们 应 该 尽量 使 用 
fixed/lowp 进 行 低 精 度 运算 (纹理 坐标 除外 ， 可 以 使 用 


half/mediump) 。 那 些 高 精度 的 运算 可 以 使 用 查找 表 (LUT) 或 者 转移 
到 顶点 着 色 器 中 进行 处 理 。 除 此 之 外 ， 尽 量 把 多 个 特效 合并 到 一 个 
Shader 中 。 例 如 ， 我 们 可 以 把 颜色 校正 和 添加 噪声 等 屏幕 特效 在 Bloom 
特效 的 最 后 一 个 Pass 中 进行 合成 。 还 有 一 个 方法 就 是 使 用 16.8.3 节 中 介 
绍 的 缩放 思想 ， 来 选择 性 地 开启 特效 。 


还 有 一 些 读 着 经 常会 昕 到 的 代码 优化 规则 。 


。 尽 可 能 不 要 使 用 分 文 语句 和 循环 语句 。 

。 尽 可 能 避免 使 用 类 似 sin、tan、pow、log 等 较为 复杂 的 数学 运算 。 
我 们 可 以 使 用 得 找 表 来 作为 奉 代 。 

。 尺 可 能 不 要 使 用 discard 操 作 ， 因 为 这 会 影响 硬件 的 某 些 优化 。 


16.8.3 ”根据 硬件 条 件 进 行 缩放 


诸如 iOS 和 Android 这 样 的 移动 平台 ， 不 同 设备 之 间 的 性 能 千 莽 万 
别 。 我 们 很 容易 可 以 找到 一 台 手 机 的 渲染 性 能 是 为 一 台 手 机 的 10 信 。 
那么 ， 如 何 确 保 游 戏 可 以 同时 流畅 地 运行 在 不 同性 能 的 移动 设备 上 
呢 ? 一 个 非常 简单 且 实 用 的 方式 是 使 用 所 谓 的 放 缩 (scaling) 思想 。 我 
们 首先 保证 游戏 最 基本 的 配置 可 以 在 所 有 的 平台 上 运行 恨 好 ， 而 对 于 
一 些 具 有 更 高 表现 能 力 的 设备 ， 我 们 可 以 开启 一 些 更 “有 养眼 ”的 效 有 果 ， 
比如 使 用 更 高 的 分 辨 率 ， 开 局 屏幕 后 处 理 特 效 ， 开 局 粒子 效果 等 。 


16.9 扩展 阅读 


Unity 官 方 手册 的 移动 平台 优化 实践 指南 


(http://docs.unity3d.com/Manual/MobileOptimization 


PracticalGuide.html) 一 文 给 出 了 一 些 针 对 移动 平台 的 优化 技术 ， 包 括 
痊 染 和 图 形 方面 的 优化 ， 以 及 脚本 优化 等 。 手 册 中 为 一 个 针对 图 像 性 
能 优化 的 文档 是 优化 图 像 性 能 (http://docs.unity3d.com/ 
Manual/OptimizingGraphicsPerformance.html) 一 文 ， 在 这 个 文档 中 ， 
Unity 给 出 了 篆 见 的 性 能 瓶颈 以 及 一 些 相应 的 优化 技术 。 除 此 之 外 ,， 文 
档 列 出 了 一 个 清单 ， 包 含 了 优化 游戏 性 能 的 各 见 做 法 和 约束 。 


在 SIGGRAPH 2011 上 ，Unity 进 行 了 一 个 关于 移动 平台 上 Shader 优 
化 的 演讲 (http://blogs. unity3d.com/2011/08/18/fast-mobile-shaders-talk- 
at-siggraph/) 。 在 这 个 演讲 中 ， 作 者 给 出 了 各 个 主流 移动 GPU 的 架构 特 
点 ， 并 给 出 了 相应 的 shader 优 化 细 市 ， 还 结合 了 真实 的 Unity 游 戏 项 目 
来 进行 实例 学 习 。 在 Unite 2013 会 议 上 ，Unity 嘻 现 了 一 个 名 为 针对 移动 
平台 优化 Unity 游 戏 的 演讲 ， 在 这 个 简短 的 演讲 中 ， 作 者 对 造成 性 能 瓶 
有 颂 的 原因 进行 了 分 类 ， 并 给 出 了 一 些 常见 的 优化 技术 。 在 GDC 2014 
上 ，Unity 展 示 了 如 何 使 用 内 置 的 分 析 絮 分 析 移 动 平台 的 游戏 性 能 ， 读 
者 可 以 在 Youtube 上 找到 相应 的 视频 。 在 最 近 的 SIGGRAPH 2015 会 议 
上 ，Unity 进 行 了 一 系列 演讲 和 课程 。 在 Unity 和 来 自 高 通 、ARM 等 公司 
的 开发 人 员 共同 呈现 的 名 为 Moving Mobile Graphics 的 课程 中 ， 来 上 自 
Unity 的 Renaldas Zioma 讲 解 了 移动 平台 上 PBR 的 优化 技术 。 更 多 Unity 
在 SIGGRAPH 2015 上 的 演讲 ， 读 者 可 以 参见 Unity 的 博客 。 


除了 手册 和 濠 讲 资料 外 ， 成 功 的 移动 平台 中 的 游戏 同样 是 非常 好 
的 学 习 资 料 。《ShadowGun》 是 由 MadFinger 在 2011 年 发 布 的 一 款 移动 
平台 的 第 三 人 称 射击 游戏 ， 使 用 的 开发 工具 正 是 Unity。 在 Unite 2011 
上 ， 该 游戏 的 开发 者 给 出 了 《ShadowGun》 中 使 用 的 渲染 和 优化 技 
术 ， 读 者 可 以 在 Youtube 上 面 找到 这 个 视频 。 更 难 能 可 贯 的 是 ， 在 2012 


年 ，《ShadowGun》 的 开发 者 放出 了 示例 场景 ， 来 让 更 多 的 开发 者 学 
习 如 何 优 化 移动 平台 上 的 shader。 男 一 个 非常 好 的 游戏 优化 实例 是 
Unity 目 带 的 项 目 《Angry Bots》， 读 者 可 以 直接 在 Unity 资 源 商店 下 载 
到 完整 的 项 目 源 代码 。 


第 5 篇 扩展 篇 


扩展 篇 旨 在 进一步 扩展 读者 的 视野 。 本 篇 将 会 介绍 Unity 的 表面 着 
色 器 的 实现 机 制 ， 并 介绍 基于 物理 演 染 的 相关 内 容 。 最 后 ， 我 们 给 出 
了 更 多 的 关于 学 习 泻 染 的 资料 。 


第 17 章 Unity 的 表面 着 色 人 右 探 秘 


本 章 将 会 介绍 这 些 表面 着 色 器 是 如 何 实现 的 ， 以 及 我 们 如 何 使 用 
这 些 表面 着 色 器 来 实现 泻 染 。 


第 18 草 基于 物理 的 泻 染 


这 一 革 将 介绍 基于 物理 泻 染 的 理论 基础 ， 并 解释 Unity 是 如 何 实现 
基于 物理 演 染 的 。 


第 19 章 Unity 5 更 新 了 什么 


本 章 将 给 出 Unity 5 中 一 些 重要 的 更 新 ， 来 帮助 读者 解决 在 升级 
Unity 5 时 所 面 对 的 各 种 问题 。 


第 20 章 还 有 更 多 内 容 吗 


在 最 后 一 章 中 ， 我 们 将 给 出 许多 非常 有 价值 的 学 习 和 资料， 来 帮助 
读者 进行 更 深入 的 学 习 。 


第 17 章 ”Unity 的 表面 着 色 器 探秘 


在 2009 年 的 时 候 (当时 Unity 的 版 本 是 2.x) ，Unity 的 泻 染 工程 师 
Aras 〈 吏 是 经 常 活 跃 在 论坛 和 各 种 会 议 上 的 ， 大 名 风电 的 Aras 
Pranckevitius) 连续 发 表 了 3 篇 名 为 《Shaders must die》 的 博客 。 在 这 
些 博客 里 ，Aras 认 为 ， 把 泻 染 流程 分 为 顶点 和 像素 的 抽象 层面 是 错误 
的 ， 是 一 种 不 易 理解 的 抽象 。 目 前 ， 这 种 在 顶点 /几何 / 片 元 着 色 句 上 的 
操作 是 对 硬件 友好 的 一 种 方式 ， 但 不 符合 我 们 人 类 的 思考 方式 。 相 
反 ， 他 认为 ， 应 该 划分 成 表面 着 色 器 、 光 照 模 型 和 光照 着 色 器 这 样 的 
屋面。 其中， 表面 着 色 器 定义 了 模型 表面 的 反射 率 、 法 线 和 高 光 等 ， 
光照 模型 则 选择 是 使 用 兰 伯 特 还 是 Blinn-Phong 等 模型 。 而 光照 着 色 器 
负责 计算 光照 衰减 、 阴 影 等 。 这 样 ， 绝 大 部 分 时 间 我 们 只 需要 和 表面 
着 色 器 打交道 ， 例 如 ， 混 合 纹 理 和 颜色 等 。 光 照 模型 可 以 是 提前 定义 
好 的 ， 我 们 只 需要 选择 哪 种 预定 义 的 光照 模型 即 可 。 而 光照 着 色 器 一 
且 由 系统 实现 后 ， 更 不 会 被 轻易 改动 ， 从 而 大 大 减轻 了 Shader 编 写 者 的 
工作 量 。 有 了 这 样 的 想法 ，Aras 在 随后 的 文章 中 开始 尝试 把 表面 着 色 
句 整 合 天 Unity 中 。 最 终 ， 在 2010 年 的 Unity 3 中 ，Surface Shader 被 加 
入 到 Unity 的 大 家 族 中 了 。 


虽然 Unity 换 了 一 个 新 的 “马甲 >»， 但 表面 着 色 器 (Surface Shader) 
实际 上 就 是 在 顶点 / 片 元 着 色 器 之 上 义 添加 了 一 层 抽 象 。 按 Aras 的 话 来 
解释 就 是 ， 顶 点 /几何 / 片 元 奢 色 鳃 是 人 硬件 能 “理解 ”的 泻 染 方式 ， 而 开发 
者 应 该 使 用 一 种 更 容易 理解 的 方式 。 很 多 时 候 ， 使 用 表面 着色 器 ， 我 
们 只 需要 告诉 Shader: “ 嘿 ， 使 用 这 些 纹理 去 填充 颜色 ， 使 用 这 个 法 线 


纹理 去 填充 表面 法 线 ， 使 用 兰 伯 特 光 照 模 型 ， 其 他 的 就 不 要 来 烦 我 
了 1! "我们 不 需要 考虑 是 使 用 前 向 演 染 路 径 还 是 延迟 演 染 路 径 ， 场 景 中 
有 多 少 光源 ， 它 们 的 类 型 是 什么 ， 怎 样 处 理 这 些 光 源 ， 每 个 Pass 需 要 处 
理 多 少 个 光源 等 问题 ( 正 是 因为 有 这 些 事情 ， 人 们 总 会 抱怨 写 一 个 
Shader 是 多 和 勾 的 磋 烦 ..…...…. ) 。 这 时 ，Unity 说 : “不 要 急 ， 我 来 干 ! ” 


那么 ， 表 面 着 色 融 到 撒 长 什么 样 呢 ? 它们 又 是 如 何 工作 的 呢 ? 这 
正 是 本 章 要 学 习 的 内 容 。 


17.1 表面 着 色 器 的 一 个 例子 


在 学 习 原 理 之 前 ， 我 们 首 移 来 看 一 下 一 个 表面 独 色 万 长 什么 样 
子 。 为 此 ， 我 们 需要 做 如 下 的 准备 工作 。 


(1) 在 Unity 中 新 创建 一 个 场景 。 在 本 书 资源 中 ， 该 场景 名 为 
Scene_17_1。 在 Unity 5.2 中 ， 默 认 情 况 下 场景 将 包含 一 个 摄像 机 和 一 个 
平行 光 ， 并 且 使 用 了 内 置 的 天 空 盒子 。 在 Window 一 Lighting -~ Skybox 
中 去 掉 场 景 中 的 天 空 盒子 。 


(2) 新 创建 一 个 材质 。 在 本 书 资源 中 ， 该 材质 名 为 
BumpedSpecularMat ° 


(3) 新 创建 一 个 Unity Shader。 在 本 书 资源 中 ， 该 Unity Shader 名 
为 Chapter17-BumpedDiffuse。 把 新 的 Unity Shader 赋 给 第 2 步 中 创建 的 材 
质 o 


(4) 在 场景 中 创建 一 个 胶 宫 体 (capsule) ， 并 把 第 2 步 中 的 材质 
赋 给 该 胶 宫 体 。 


(5) 保存 场景 。 


我 们 将 使 用 表面 着 色 器 来 实现 一 个 使 用 了 法 线 纹理 的 温 反 射 效 
果 。 这 可 以 参考 Unity 内 置 的 “Legacy Shaders/Bumped Diffuse” 的 代码 实 
现 〈 可 以 在 官方 网 站 的 内 置 Shader 包 中 找到 ) 。 打 开 Chapter17- 
BumpedDiffuse， 删 除 原 有 的 代码 ， 把 下 面 的 代码 粘贴 进去 : 


Shader "Unity Shaders Book/Chapter 17/Bumped Diffuse" { 
Properties { 
_Color ("Main Color", Color) = (1,1,1,1) 
_MainTex ("Base (RGB)", 2D) = "white" {} 
_BumpMap ("Normalmap", 2D) = "bump" {} 


} 

SubShader { 
Tags { "RenderType"="Opaque" } 
LOD 300 


CGPROGRAM 
#pragma surface surf Lambert 
#pragma target 3.0 


sampler2D _MainTex; 
sampler2D _BumpMap; 
fixed4 _Color; 


struct Input { 
float2 uv_MainTex; 
float2 uv_BumpMap; 
}; 


void surf (Input IN, inout SurfaceOutput 0) { 
fixed4 tex = tex2D(_MainTex, IN.uv_MainTex); 
0.Albedo = tex.rgb * _Color.rgb; 
0.Alpha = tex.a * _Color.a; 
oOo.Normal = UnpackNormal(tex2D(_BumpMap, 
IN.uv_BumpMap ) ); 
} 


ENDCG 


FallBack "Legacy Shaders/Diffuse" 
} 


保存 程序 后 ， 返 回 Unity 中 查看 。 在 BumpedDiffuseMat 的 面板 上 ， 
我 们 把 本 书 资 源 中 的 Assets/Textures/Chapter17/Mud_Diffuse.tif 和 
Assets/Textures/Chapter17/Mud_Normal.tif 分 别 拖 忠 到 _MainTex 和 和 
_BumpMap 属 性 上 ， 就 可 以 得 到 类 似 图 17.1 中 左 图 的 结果 。 我 们 还 可 以 
回 场 景 中 添加 一 些 点 光源 和 聚光灯 ， 并 改变 它们 的 颜色 ， 就 可 以 得 到 
类 似 图 17.1 中 右 图 的 结果 。 注 意 ， 在 这 个 过 程 中 ， 我 们 不 需要 对 代码 做 
任何 改动 。 


图 17.1 表面 着 色 器 的 例子 左边 :在 一 个 平行 光 下 的 效果 。 右边 : 添加 了 一 个 点 光源 ( 蓝 
色 ) 和 一 个 聚光灯 (紫色 ) 后 的 效果 


> 


从 上 面 的 例子 可 以 看 出 ， 相 比 之 前 所 学 的 顶点 / 片 元 着 色 器 技术 ， 
表面 着 色 妖 的 代码 量 很 少 (只 需要 三 十 多 行 ) ， 如 果 我 们 使 用 顶点 / 片 
元 着 色 器 来 实现 上 述 的 功能 ， 大 概 需 要 150 多 行 代码 (参考 本 书 资源 中 


的 “Unity Shaders Book/Common/Bumped Diffuse”) ! 而 且 ， 我 们 可 以 
非常 轻松 地 实现 常见 的 光照 模型 ， 其 至 不 需要 和 任何 光照 变量 打 交 
道 ，Unity 就 帮 我 们 处 理 好 了 每 个 光源 的 光照 结果 。 


读者 可 以 在 Unity 官 方 手册 的 表面 着 色 器 的 例子 一 文 
(http://docs.unity3d.com/Manual/SL- SurfaceShaderExamples.html) 中 找 
到 更 多 的 示例 程序 。 下 面 ， 我 们 将 具体 学 习 表 面 着 色 器 的 特点 和 工作 
原理 。 


和 顶点 / 片 元 着 色 器 需要 包含 到 一 个 特定 的 Pass 块 中 不 同 ， 表 面 着 
色 器 的 CG 代码 是 直接 而 且 也 必须 写 在 SubShader 块 中 ，Unity 会 在 背后 
为 我 们 生成 多 个 Pass。 当 然 ， 可 以 在 SubShader 一 开始 处 使 用 Tags 来 设 
置 该 表面 厦 色 器 使 用 的 标签 。 在 Chapter17-BumpedDiffuse 中 ， 我 们 还 使 
用 LOD 命 令 设置 了 该 表面 着 色 器 的 LOD 值 ( 详 见 16.8.1 节 ) 。 然 后 ， 我 
们 使 用 CGPROGRAM 和 ENDCG 定 义 了 表面 着 色 器 的 具体 代码 。 


一 个 表面 着 色 器 中 最 重要 的 部 分 是 两 个 结构 体 以 及 它 的 编译 指 
令 。 其 中 ， 两 个 结构 体 是 表面 着 色 器 中 不 同 函 数 之 间 信 息 传 递 的 桥 
梁 ， 而 编译 指令 是 我 们 和 Unity 沟 通 的 重要 手段 。 


17.2 编译 指令 


我 们 首先 来 看 一 下 表面 着 色 右 的 编译 指令 。 编 详 指 令 是 我 们 和 
Unity 沟 通 的 重要 方式 ， 通 过 它 可 以 告诉 Unity: “器 ， 用 这 个 表面 钞 数 
设置 表面 属性 ， 用 这 个 光照 模型 模拟 光照 ， 我 不 要 阴影 和 环境 光 ， 不 
要 筋 效 ! ”只 需要 一 句 人 代码， 我们 就 可 以 完成 这 么 多 事情 | 


编译 指令 最 重要 的 作用 是 指明 该 表面 着 色 峰 使 用 的 表面 函数 和 光 
照 画 数 ， 并 设置 一 些 可 选 参数 。 表 面 着 色 器 的 CG 块 中 的 第 一 句 代 码 往 
往 就 是 它 的 编译 指令 。 编 译 指令 的 一 般 格 式 如 下 : 


#pragma surface surfaceFunction lightModel [optionalparams] 


其 中 ， 加 ragma surface 用 于 指明 该 编译 指令 是 用 于 定义 表面 着 色 
器 的 ， 在 它 的 后 面 需要 指明 使 用 的 表面 函数 (surfaceFunction) 和 光照 
模型 (lightModel) ， 同 时 ， 还 可 以 使 用 一 些 可 选 参数 来 控制 表面 着 色 
怖 的 一 些 行 为 。 


17.2.1 表面 函数 


我 们 之 前 说 过 ， 表 面 着 色 器 的 优点 在 于 抽象 出 了 “表面 ”这 一 概 
念 。 与 之 前 过 到 的 顶点 / 片 元 抽象 层 不 同 ， 一 个 对 象 的 表面 属性 定义 了 
它 的 反射 率 、 光 滑 度 、 透 明度 等 值 。 而 编译 指令 中 的 surfaceFunction 残 
用 于 定义 这 些 表 面 属性 。surfaceFunction 通 常 就 是 名 为 surf 的 函数 ( 函 
数 名 可 以 是 任意 的 ) ， 它 的 函数 格式 是 固定 的 : 


void surf (Input IN, inout SurfaceOutput 0o) 
void surf (Input IN, inout SurfaceoutputStandard 0o) 
void surf (Input IN, inout SurfaceoutputStandardSpecular o0) 


其 中 ， 后 两 个 是 Unity 5 中 由 于 引入 了 基于 物理 的 泻 染 而 新 添加 的 
两 种 结构 体 。SurfaceOutput、SurfaceOutputStandard 和 
SurfaceOutputStandardSpecular 都 是 Unity 内 置 的 结构 体 ， 它 们 需要 配 
合 不 同 的 光照 模型 使 用 ， 我 们 会 在 下 一 节 进 行 更 详细 地 解释 。 


在 表面 函数 中 ， 会 使 用 输入 结构 体 Input IN 来 设置 各 种 表面 属性 ， 
并 把 这 些 属性 存储 在 输出 结构 体 SurfaceOutput、SurfaceOutputStandard 


或 SurfaceOutputStandardSpecular 中 ， 再 传递 给 光照 函数 计算 光照 结 
读者 可 以 在 Unity 手 册 中 的 表面 着 色 器 的 例子 一 文 

(http://docs.unity3d.com/ Manual/SL-SurfaceShaderExamples.html) 中 找 
到 更 多 的 示例 表面 函数 。 


17.2.2 ”光照 函数 


除了 表面 函数 ， 我 们 还 需要 指定 另 一 个 非常 重要 的 函数 一 一 光照 
函数 。 光 照 画 数 会 使 用 表面 函数 中 设置 的 各 种 表面 属性 ， 来 应 用 某 些 
光照 模型 ， 进 而 模拟 物体 表面 的 光照 效果 。Unity 内 置 了 基于 物理 的 光 
照 模型 函数 Standard 和 StandardSpecular (在 UnityPBSLighting.cginc 文 
件 中 被 定义 ) ， 以 及 简单 的 非 基 于 物理 的 光照 模型 贸 数 Lambert 和 
BlinnPhong 《在 Lighting.cginc 文 件 中 被 定义 ) 。 例 如 ， 在 Chapter17- 
BumpedDiffuse 中 ， 我 们 就 指定 了 使 用 Lambert 光 照 玉 数 。 


当然 ， 我 们 也 可 以 定义 目 己 的 光照 贸 数 。 例 如 ， 可 以 使 用 下 面 的 
函数 来 定义 用 于 前 同 浑 染 中 的 光照 函数 : 


3 于 不 依赖 视角 的 光照 模型 ， 例 如 漫 反射 
Lighting<Name> (SurfaceOutput s, half3 lightDir, half atten) 
于 依赖 视角 的 光照 模型 ， 例 如 高 光 反 射 
half4 Lighting<Name> (SurfaceOutput s, half3 lightDir, half3 
viewDir, half atten); 


读者 可 以 在 Unity 手 册 的 表面 着 色 器 中 的 自 定 义 光 照 模型 一 文 
(http://docs.unity3d.com/ Manual/SL-SurfaceShaderLighting.html) 中 找 


到 更 全 面 的 自 定义 光照 模型 的 介绍 。 而 一 些 例子 可 以 参见 手册 中 的 表 
面 着 色 器 的 光照 例子 一 文 (http://docs.unity3d.com/Manual/SL- 
SurfaceShader LightingExamples.html) ， 这 篇 文档 展示 了 如 何 使 用 表面 


着 色 吉 来 目 定 义 稼 见 的 漫 反射 、 高 区 反射 、 基 于 光照 纹理 等 种 用 的 光 
照 模型 。 


17.2.3 ”其 他 可 选 参数 


在 编译 指令 的 最 后 ， 我 们 还 可 以 设置 一 些 可 选 参数 
(optionalparams) 。 这 些 可 选 参数 包含 了 很 多 非常 有 用 的 指令 类 型 ， 
例如 ， 开 启 /设置 透明 度 混合 /透明 度 测试 ， 指 明 目 定义 的 顶点 和 颜色 修 
改 函 数 ， 欣 制 生成 的 代码 等 。 下 面 ， 我 们 选取 了 一 些 比较 重要 和 第 用 
的 参数 进行 更 深入 地 说 明 。 读 者 可 以 在 Unity 官 方 手 册 的 编写 表面 着 色 
器 一 文 (http://docs.unity3d.com/Manual/SL-SurfaceShaders.html) 中 找 

到 更 加 详细 的 参数 和 设置 说 明 。 


。 目 定义 的 修改 范 数 。 除 了 表面 钞 数 和 光照 模型 外 ， 表 面 大 色 器 还 
可 以 支持 其 他 两 种 自 定义 的 函数 : 顶点 修改 本 数 
(vertex:VertexFunction) 和 最 后 的 颜色 修改 本 数 
(finalcolor:ColorFunction) 。 顶 点 修改 函数 允许 我 们 自 定义 一 些 
顶点 属性 ， 例 如 ， 把 顶点 颜 色 传 递 给 表面 贸 数 ， 或 是 修改 顶点 位 
置 ， 实 现 某 些 顶点 动画 等 。 最 后 的 颜色 修改 函数 则 可 以 在 颜色 绘 
制 到 屏幕 衣 ， 最 后 一 次 修改 颜色 值 ， 例 如 实现 目 定义 的 筋 效 等 。 
阴影 。 我 们 可 以 通过 一 些 指 令 来 控制 和 阴影 相关 的 代码 。 例 如 ， 
addshadow 参 数 会 为 表面 着 色 絮 生成 一 个 阴影 投 冉 的 Pass。 通 常情 
况 下 ，Unity 可 以 直接 在 FallBack 中 找到 通用 的 光照 模式 为 
ShadowCaster 的 Pass， 从 而 将 物体 正确 地 泻 染 到 深度 和 阴影 纹理 中 
( 详 见 9.4 节 ) 。 但 对 于 一 些 进行 了 顶点 动画 、 透 明度 测试 的 物 
体 ， 我 们 就 需要 对 阴影 的 投射 进行 特殊 人 处理， 来 为 它们 产生 正确 
的 阴影 ， 正 如 我 们 在 11.3.3 广 中 看 到 的 一 样 。fullforwardshadows 


参数 则 可 以 在 前 癌 泻 染 路 径 中 支持 所 有 光源 类 型 的 阴影 。 默 认 情 
况 下 ，Unity 只 支持 最 重要 的 平行 光 的 阴影 效果 。 如 果 我 们 需要 让 
点 光源 或 聚光灯 在 前 回 演 染 中 也 可 以 有 阴影 ， 丈 可 以 添加 这 个 参 
数 。 相 反 地 ， 如 果 我 们 不 想 对 使 用 这 个 Shader 的 物体 进行 任何 阴影 
计算 ， 就 可 以 使 用 noshadow 参 数 来 禁用 阴影 。 

透明 度 混合 和 透明 度 测 试 。 我 们 可 以 通过 alpha 和 alphatest 指 令 来 
控制 透明 度 混合 和 透明 度 测 试 。 例 如 ，alphatest:VariableName 指 
令 会 使 用 名 为 VariableName 的 变量 来 别 除 不 满足 条 件 的 户 元 。 此 
时 ， 我 们 可 能 还 需要 使 用 上 面 提 到 的 addshadow 参 数 来 生成 正确 的 
阴影 投射 的 Pass 。 

光照 。 一 些 指令 可 以 控制 光照 对 物体 的 影响 ， 例 如 ，noambient 参 
数 会 告诉 Unity 不 要 应 用 任何 环境 光照 或 光照 探 针 (ight probe) 
novertexjlights 参 数 告诉 Unity 不 要 应 用 任何 逐 顶 点 光照 。 
noforwardadd 会 去 掉 所 有 前 问 泻 染 中 的 额外 的 Pass。 也 就 是 说 ， 

这 个 Shader 只 会 文 持 一 个 逐 像 素 的 平行 光 ， 而 其 他 的 光源 会 按照 逐 
顶点 或 SH 的 方法 来 计算 光照 影响 。 这 个 参数 通常 会 用 于 移动 平台 
版 本 的 表面 春色 硕 中 。 还 有 一 些 用 于 控制 光照 烘焙 、 筋 效 模拟 的 
参数 ， 如 nolightmap、nofog 等 。 

控制 代码 的 生成 。 一 些 指令 还 可 以 控制 由 表面 着 色 器 自动 生成 的 
代码 ， 默 认 情 况 下 ，Unity 会 为 一 个 表面 着 色 器 生成 相应 的 前 向 渔 
染 路 径 、 延 迟 演 染 路 径 使 用 的 Pass， 这 会 导致 生成 的 Shader 文 件 比 
较 大 。 如 果 我 们 确定 该 表面 着 色 器 只 会 在 某 些 泻 染 路 径 中 使 用 ， 
就 可 以 exclude_path:deferred 、exclude_path:forward 和 
exclude_path:prepass 来 告诉 Unity 不 需要 为 某 些 泻 染 路 径 生 成 代 
码 。 


从 上 述 可 以 看 出 ， 表 面 看 色 需 文 择 的 编译 指令 参数 很 多 ， 为 我 们 
编写 表面 着 色 咒 提供 了 很 大 的 方便 。 之 前 在 顶点 / 片 元 着 色 器 中 需要 耗 
费 大 量 代码 来 完成 的 工作 ， 在 表面 着 色 右 中 可 能 只 需要 一 个 参数 就 可 
以 了 。 当 然 ， 相 比 与 项 感 / 片 元 着 色 右 ， 表 面 着色 同 也 有 它 目 身 的 限 
制 ， 我 们 会 在 17.6 节 中 对 比 它们 的 优 缺 点 。 


17.3 两 个 结构 体 
在 上 一 节 我 们 已 经 讲 过 ， 表 面 着 色 器 支持 最 多 自 定 义 4 种 关键 的 画 
数 ， 表 面 画 数 (用 于 设置 各 种 表面 性 质 ， 如 反射 率 、 法 线 等 ) ， 光 照 


函数 (定义 表面 使 用 的 光照 模型 ，， 顶 点 修改 函数 (修改 或 传递 顶点 
属性 ) ， 最 后 的 颜色 修改 函数 〈 对 最 后 的 颜色 进行 修改 ) 。 那 么 ， 这 
些 函 数 之 间 的 信息 传递 是 怎么 实现 的 呢 ? 例如， 我 们 想 把 顶点 闫 色 传 
递 给 表面 钞 数 ， 添 加 到 表面 反 喘 率 的 计算 中 ， 要 怎么 做 呢 ? 这 束 古 两 
个 结构 体 的 工作 。 


个 表面 着 色 器 需要 使 用 两 个 结构 体 ， 表面 函数 的 输入 结构 体 
Input， 以 及 存储 了 表面 属性 的 结构 体 SurfaceOutput (Unity 5 新 引入 了 
另外 两 个 同 种 的 结构 体 SurfaceOutputStandard 和 
SurfaceOutputStandardSpecular) 。 


17.3.1 数据 来 源 : Input 结 构 体 


Input 结 构 体 包含 了 许多 表面 属性 的 数据 来 源 ， 因 此 ， 它 会 作为 表 
面 函 数 的 输入 结构 体 “如 果 上 自 定 义 了 顶点 修改 函数 ， 它 还 会 是 顶点 修 
改 函 数 的 输出 结构 体 ) 。Input 文 持 很 多 内 置 的 变量 名 ， 通 过 这 
名 ， 我 们 告诉 Unity 需 要 使 用 的 数据 信息 。 例 如 ， 在 Chapter17- 


| 医 
) 翌 
类 


BumpedDiffuse 中 ，Input 结 构 体 中 包含 了 主 纹理 和 法 线 纹理 的 采样 坐标 
uv_MainTex 和 uv_BumpMap。 这 些 采 样 坐标 必须 以 “uv” 为 前 级 (实际 上 
也 可 用 “uv2” 为 前 级 ， 表 明 使 用 次 纹理 从 标 集合 ， 后 面 紧 跟 纹 理 名 

称 。 以 主 纹理 _MainTex 为 例 ， 如 果 需 要 使 用 它 的 采样 坐标 ， 怠 需要 在 
Input 结 构 体 中 声明 float2 uv_MainTex 来 对 应 它 的 采样 坐标 。 表 17.1 列 出 
了 Input 结 构 体 中 内 置 的 其 他 变量 。 


jCOLOR 语 义 
es 


民间 的 时 可 以 有 了 反对 


表 17.1 


包含 了 插值 后 的 逐 顶 点 颜色 


float3 worldPos 包含 了 世界 空间 下 的 位 置 


世界 空间 下 的 反射 方向 。 前 提 是 没有 修改 表面 法 线 


float3 worldRefl 


修改 了 表面 法 线 o.Normal， 需 要 使 用 该 变量 告诉 Unity 要 基 
float3 worldRefl， 于 修改 后 的 法 线 计算 世界 空间 下 的 反射 方向 。 在 表面 函数 中 ， 
INTERNAL_DATA | 我 们 需要 使 用 WorldReflectionVector(IN, o.Normal) 来 得 到 世界 空 


间 下 的 反射 方向 


包含 了 世界 空间 的 法 线 方向 。 前 提 是 没有 修改 表 轿 
float3 worldNormal 
o.Normal 


如 果 修 改 了 表面 法 线 o.Normal， 需 要 使 用 该 变量 告诉 Unity 要 基 
于 修改 后 的 法 线 计算 世界 空间 下 的 法 线 方向 。 在 表面 函数 中 ， 
我 们 需要 使 用 WorldNormalVector(IN, o.Normal) 来 得 到 世界 空间 
下 的 法 线 方向 


float3 
worldNormal; 
INTERNAL DATA 


需要 注意 的 是 ， 我 们 并 不 需要 自己 计算 上 述 的 各 个 变量 ， 而 只 需 
要 在 Imput 结 构 体 中 按 上 述 名 称 产 格 声明 这 些 变量 即 可 ，Unity 会 在 至 后 
为 我 们 准备 好 这 些 数据 ， 而 我 们 只 需要 在 表面 函数 中 直接 使 用 它们 即 
可 。 一 个 例外 情况 是 ， 我 们 目 定义 了 顶点 修改 函数 ， 并 需要 问 表 面 国 
数 中 传递 一 些 目 定 义 的 数据 。 例 如 ， 为 了 自 定 义 筋 效 ， 我 们 可 能 需要 
在 顶点 修改 国 数 中 根据 顶点 在 视角 空间 下 的 位 置信 息 计 算 筋 效 袍 合 系 
数 ， 这 样 我 们 束 可 以 在 mput 结 构 体 中 定义 一 个 名 为 half fog 的 变量 ， 把 
计算 结 有 果 人 存储 在 该 变量 后 进行 输出 。 


17.3.2 ”表面 属性 : SurfaceOutput 结 构 体 


有 了 input 结构 体 来 提供 所 需要 的 数据 后 ， 我 们 就 可 以 据 此 计算 各 
种 表面 属性 。 因 此 ， 男 一 个 结构 体 就 是 用 于 存储 这 些 表面 属性 的 结构 
体 ， 即 SurfaceOutput、SurfaceOutputStandard 和 
SurfaceOutputStandardSpecular ， 它 会 作为 表面 函数 的 输出 ， 随 后 会 
作为 光照 函数 的 输入 来 进行 各 种 光照 计算 。 相 比 与 Input 结 构 体 的 目 由 
性 ， 这 个 结构 体 里面 的 变量 十 提前 就 声明 好 的 ， 不 可 以 增加 也 不 会 减 


少 (如 果 没 有 对 某 些 变量 赋值 ， 束 会 使 用 默认 值 ) 。SurfaceOutput 的 声 
明 可 以 在 Lighting.cginc 文 件 中 找到 : 


struct SurfaceOutput { 
fixed3 Albedo; 
fixed3 Normal; 
fixed3 Emission; 


half Specular; 
fixed Gloss; 
fixed Alpha; 


而 SurfaceOutputStandard 和 SurfaceOutputStandardSpecular 的 声 
明 可 以 在 UnityPBSLighting.cginc 中 找到 : 


struct SurfaceOutputStandard 


fixed3 Albedo; // base (diffuse or specular) color 
fixed3 Normal; // tangent space normal, if written 
half3 Emission; 

half Metallic; // 0=non-metal, 1=metal 

half Smoothness; // 0=rough, 1=smooth 

half Occlusion; // occlusion (default 1) 

fixed Alpha; // alpha for transparencies 


}; 


struct SurfaceOutputStandardSpecular 
{ 


fixed3 Albedo; // diffuse color 

fixed3 Specular; // specular color 

fixed3 Normal; // tangent space normal, if written 
half3 Emission; 

half Smoothness,; // 0=rough, 1=smooth 

half Occlusion; // occlusion (default 1) 

fixed Alpha; // alpha for transparencies 


在 一 个 表面 着 色 器 中 ， 只 需要 选择 上 述 三 者 中 的 其 一 即 可 ， 这 取 
决 于 我 们 选择 使 用 的 光照 模型 。Unity 内 置 的 光照 模型 有 两 种 ， 一 种 是 
Unity 5 之 前 的 、 人 简单 的 、 非 基于 物理 的 光照 模型 ， 包 括 了 Lambert 和 
BlinnPhong; 另 一 种 是 Unity 5 添加 的 、 基 于 物理 的 区 照 模型 ， 包 丘 


Standard 和 StandardSpecular， 这 种 模型 会 更 加 符合 物理 规律 ， 但 计算 

会 复杂 很 多 。 如 果 使 用 了 非 基 于 物理 的 光照 模型 ， 我 们 通常 会 使 用 
SurfaceOutput 结 构 体 ， 而 如 采 使 用 了 基于 物理 的 光照 模型 Standard 或 
StandardSpecular， 我 们 会 分 别 使 用 SurfaceOutputStandard 或 
SurfaceOutput StandardSpecular 结 构 体 。 其 中 ，SurfaceOutputStandard 
结构 体 用 于 默认 的 金属 工作 流程 (Metallic Workflow) ， 对 应 了 
Standard 光 照 范 数 ， 而 SurfaceOutputStandardSpecular 结 构 体 用 于 高 光 工 
作 流 程 (Specular Workflow) ， 对 应 了 StandardSpecular 光 照 丽 数 。 更 多 
天 于 基于 物理 的 泻 染 内 容 ， 我 们 会 在 第 18 章 中 讲 到 。 


在 本 节 ， 我 们 着 重 介绍 一 下 SurfaceOutput 结 构 体 中 的 变量 和 含义 。 
在 表面 函数 中 ， 我 们 需要 根据 mput 结 构 体 传递 的 各 个 变量 计算 表面 属 
性 。 在 SurfaceOutput 结 构 体 ， 这 些 表 面 属性 包括 了 。 


。 fixed3 Albedo: 对 区 源 的 反射 率 。 通 单 由 纹理 采样 和 颜色 属性 的 乘 
积 计算 而 得 。 
。 fixed3 Normal: 表面 法 线 方向 。 
。 fixed3 Emission: 上 自发 光 。Unity 通 常会 在 片 元 着 色 器 最 后 输出 前 
(并 在 最 后 的 顶点 函数 被 调用 前 ， 如 果 定 义 了 的 话 ) ， 使 用 类 似 
下 面 的 语句 进行 稍 单 的 颜色 县 加 : 


c.rgb += o.Emission; 


。 half Specular: 高 光 反 射 中 的 指数 部 分 的 系数 ， 影 响 高 光 反 射 的 计 
算 。 例 如 ， 如 果 使 用 了 内 置 的 BlinnPhong 光 照 画 数 ， 它 会 使 用 如 下 
语句 计算 高 光 反 射 的 强度 : 


float spec = pow (nh, s.Specular*128.0) * s.Gloss; 


。 fixed Gloss: 高 光 反 射 中 的 强度 系数 。 和 上 面 的 Specular 类 似 ， 计 
算 公式 见 上 面 的 代码 。 一 般 在 包含 了 高 光 反 射 的 光照 模型 里 使 
用 。 

。 fixed Alpha: 透明 通道 。 如 果 开 局 了 透明 度 的 话 ， 会 使 用 该 值 进 行 
颜色 混合 。 


尽管 表面 着 色 况 极 大 地 减少 了 我 们 的 工作 量 ， 但 它 融 来 的 一 个 问 
题 是 ， 我 们 经 常 不 知道 为 什么 会 得 到 这 样 的 泻 染 结 果 。 如 果 你 不 是 一 
个 “好 奇 宝宝 ”的 话 ， 你 可 以 高 高 兴 兴 地 使 用 表面 着 色 器 来 方便 地 实现 
一 些 不 错 的 洽 染 效果 。 但 是 ， 一 些 好 奇 的 初学 者 往往 会 提出 这 样 的 问 
题 :“ 为 什么 我 的 场景 里 没有 灯光 ， 但 物体 不 是 全 黑 的 呢 ? 为 什么 我 把 
光源 的 颜色 调 成 黑色 ， 物 体 还 是 有 一 些 泻 染 闫 色 呢 ? ”这些 问 题 都 源 于 
表面 着 色 圳 对 我 们 隐藏 了 实现 细节。 而 想 要 更 加 得 心 应 手 地 使 用 表面 
着 色 器 ， 我 们 就 需要 学 习 它 的 工作 流水 线 ， 并 了 解 Unity 是 如 何 为 一 个 
表面 着 色 器 生成 对 应 的 顶点 / 片 元 着 色 器 的 (时刻 记 着 ， 表 面 着 色 器 本 
质 上 就 是 包含 了 很 多 Pass 的 顶点 / 片 元 着 色 器 ) 。 


17.4 Unity 背 后 做 了 什么 


在 前 面 的 内 容 中 ， 我 们 已 经 了 解 到 如 何 利 用 编译 指令 、 目 定义 图 
数 (表面 画 数 、 光 照 画 数 ， 以 及 可 选 的 顶点 修改 画 数 和 最 后 的 颜色 修 
改 函 数 ) 和 两 个 结构 体 来 实现 一 个 表面 着 色 器 。 我 们 一 直 强 调 ，Unity 
实际 会 在 背后 为 表面 着 色 句 生成 真正 的 顶点 / 片 元 着 色 器 。 那 么 ， 表 面 
着 色 器 中 的 各 个 函数 、 编 译 指令 和 结构 体 与 顶点 / 片 元 着 色 器 之 间 有 什 
么 关系 呢 ? 这 正 是 本 世 要 学 习 的 内 容 。 


我 们 之 前 说 过 ，Unity 在 背后 会 根据 表面 着 色 锅 生成 一 个 包含 了 很 
多 Pass 的 顶点 / 片 元 着 色 器 。 这 些 Pass 有 些 是 为 了 针对 不 同 的 泻 染 路 径 ， 
例如 ， 默 认 情 况 下 Unity 会 为 前 癌 泻 染 路 公 生 成 LightMode 为 
ForwardBase 和 ForwardAdd 的 Pass， 为 Unity 5 之 前 的 延迟 演 染 路 径 生 
成 LightMode 为 PrePassBase 和 PrePassFinal 的 Pass， 为 Unity 5 之 后 的 延 
述 演 染 路 径 生 成 LightMode 为 Deferred 的 Pass。 还 有 一 些 Pass 是 用 于 产 
生 和 额外 的 信息 ， 例 如 ， 为 了 给 光照 映射 和 动态 全 局 光照 提取 表面 信 
息 ，Unity 会 生成 一 个 LightMode 为 Meta 的 Pass。 有 些 表 面 着 色 问 由 于 
修改 了 顶点 位 置 ， 因 此 ， 我 们 可 以 利用 adddshadow 编 译 指令 为 它 生 成 
相应 的 LightMode 为 ShadowCaster 的 阴影 投 叶 Pass。 这 些 Pass 的 生成 都 
是 基于 我 们 在 表面 奢 色 器 中 的 编译 指令 和 目 定 义 的 画 数 ， 这 是 有 规律 
可 循 的 。Unity 提 供 了 一 个 功能 ， 让 那些 “好 奇 宝宝 ”可 以 对 表面 大 色 器 
自动 生成 的 代码 一 探究 竞 : 在 每 个 编译 完成 的 表面 着 色 器 的 面板 上 ， 
都 有 一 个 “Show generated code” 的 按钮 ， 如 图 17.2 所 示 ， 我 们 只 需要 单 
击 一 下 它 就 可 以 看 到 Unity 为 这 个 表面 着 色 器 生成 的 所 有 顶点 / 片 元 着 色 
器 o 


ColorT Color: Color Tint 
MamT Texture Base (NCO 
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图 17.2 ”查看 表面 着 色 器 生成 的 代码 


区 


通过 查看 这 些 代码 ， 我 们 就 可 以 了 解 到 Unity 到 奔 是 如 何 根据 表面 
着 色 器 生成 各 个 Pass 的 。 以 Unity 生 成 的 LightMode 为 ForwardBase 的 
Pass (用 于 前 向 泻 染 ) 为 例 ， 它 的 泻 染 计算 流水 线 如 图 17.3 所 示 。 从 图 
17.3 中 我 们 可 以 看 出 ，4 个 允许 自 定 义 的 函数 在 流水 线 中 的 位 置 。 


Unity 对 该 Pass 的 目 动 生成 过 程 大 致 如 下 。 


(1) 直接 将 表面 着 色 器 中 CGPROGRAM 和 ENDCG 之 间 的 代码 复 
制 过 来 ， 这 些 代码 包括 了 我 们 对 Input 结 构 体 、 表 面 函 数 、 光 照 画 数 
(如 果 自 定 了 的 话 ) 等 变量 和 画 数 的 定义 。 这 些 画 数 和 变量 会 在 之 后 
的 处 理 过 程 中 被 当成 正常 的 结构 体 和 函数 进行 调用 。 


顶点 着 色 器 : v2f_surf vert_surf (appdata_full v} 
根据 Input 的 
需要 计算 变量 ， 并 
存储 到 v2f_surf 
结构 体 中 


片 元 着 色 器 : fixed4 frag_surf (v2f_surf IN) 


顶点 数据 一 一 > struct v2f_surf 


一 > 输出 颜色 


和 图 17.3 表面 着 色 器 的 溶 染 计算 流水 线 。 黄 色 ， 可 以 自 定义 的 画 数 。 灰 色 Unity 自 动 生成 的 
计算 步 又 


(2) Unity 会 分 析 上 述 代 码 ， 并 据 此 生成 顶点 着 色 器 的 输出 一 一 
v2f_surf 结 构 体 ， 用 于 在 顶点 着 色 器 和 上 刻 元 着 色 器 之 间 进 行 数据 传递 。 
Unity 会 分 析 我 们 在 自 定义 函数 中 所 使 用 的 变量 ， 例 如 ， 纹 理 坐 标 、 视 


角 方 向 、 反 射 方向 等 。 如 果 需 要 ， 它 就 会 在 v2f_surf 中 生成 相应 的 变 
量 。 而 且 ， 即 便 有 时 我 们 在 mput 中 定义 了 某 些 变量 《如 某 些 纹理 坐 
， 但 Unity 在 分 析 后 续 代 码 时 发 现 我 们 并 没有 使 用 这 些 变量 ， 那 么 
变量 实际 上 十 不 会 在 v2f_surf 中 生成 的 。 这 也 殉 是 说 ，Unity 做 了 一 
些 优化 。v2f_surf 中 还 包含 了 一 些 其 他 需要 的 变量 ， 例 如 阴影 纹理 坐 
标 、 光 照 纹理 坐标 、 逐 顶点 光照 等 。 


i 查 


这 
| 


» 


| 


人 


Re 


la 


(3) 接着 ， 生 成 顶点 着 色 器 。 


@ 如 果 我 们 自 定义 了 顶点 修改 瑟 数 ，Unity 会 首先 调用 顶点 修改 函 
数 来 修改 顶点 数据 ， 或 填充 目 定 义 的 mput 结 构 体 中 的 变量 。 然 后 ， 
Unity 会 分 析 顶 点 修改 函数 中 修改 的 数据 ， 在 需要 时 通过 Input 结 构 体 将 
修改 结果 存储 到 v2f_surf 相 应 的 变量 中 。 


@ 计算 v2f_surf 中 其 他 生成 的 变量 值 。 这 主要 包括 了 顶点 位 置 、 纹 
理 坐 标 、 法 线 方向 、 逐 顶点 光照 、 光 照 纹理 的 采样 坐标 等 。 当 然 ， 我 
们 可 以 通过 编译 指令 来 控制 某 些 变量 是 否 需 要 计算 。 


@ 最 后 ， 将 v2f_surf 传 递 给 接 下 来 的 片 元 着 色 器 。 
(4) 生成 片 元 着 色 器 。 


@ 使 用 v2f_surf 中 的 对 应 变量 填充 Input 结 构 体 ， 例 如 ， 纹 理 坐 标 、 
视角 方 同等 。 


@ 调用 我 们 自 定 义 的 表面 函数 填充 SurfaceOutput 结 构 体 。 


@ 调用 光照 函数 得 到 初始 的 颜色 值 。 如 果 使 用 的 是 内 置 的 Lambert 
或 BlinnPhong 光 照 画 数 ，Unity 还 会 计算 动态 全 局 光照 ， 并 添加 到 光照 
模型 的 计算 中 。 


@ 进行 其 他 的 颜色 县 加 。 例 如 ， 如 果 没 有 使 用 光照 烘焙 ， 还 会 添 
加 逐 顶 点 光照 的 影响 。 


@ 最 后 ， 如 果 自 定义 了 最 后 的 颜色 修改 画 数 ，Unity 就 会 调用 它 进 
行 最 后 的 颜色 修改 。 


其 他 Pass 的 生成 过 程 和 上 面 类 似 ， 在 此 不 再 玖 述 。 


17.5 表面 着 色 器 实例 分 析 


为 了 帮助 读者 更 加 深入 地 理解 表面 着 色 絮 背后 的 原理 ， 我 们 在 本 
世 以 一 个 表面 着 色 吉 为 例 ， 分 析 Unity 为 它 生 成 的 代码 。 


读者 可 以 在 本 书 资源 中 的 Scene_17 4 中 找到 相应 的 测试 场景 。 
实现 的 效果 是 对 模型 进行 膨胀 ， 如 图 17.4 所 示 。 


A 图 17.4 治 顶 点 法 线 对 模型 进行 膨胀 左边 : 膨胀 前 ， 右 边 : 膨胀 


Th 


这 种 效果 的 实现 非常 和 侧 单 ， 残 是 在 顶点 修改 函数 中 治 厦 顶点 法 线 
方向 扩张 顶点 位 置 。 为 了 分 析 表 面 着 色 器 中 4 个 可 目 定 义 函 数 (顶点 修 
改 函 数 、 表 面 函数 、 光 照 函 数 和 最 后 的 颜色 修改 函数 ) 的 原理 ， 在 本 
例 中 我 们 对 这 4 个 函数 全 部 采用 了 目 定 义 的 实现 。 读 者 可 以 在 
Chapter17-NormalExtrusion 文 件 中 找到 该 表面 着 色 器 ， 它 的 代码 如 下 : 


Shader "Unity Shaders Book/Chapter 17/Normal Extrusion" { 
Properties { 
_ColorTint ("Color Tint", Color) = (1,1,1,1) 
_MainTex ("Base (RGB)", 2D) = "white" {} 
_BumpMap ("Normalmap", 2D) = "bump" {} 
_Amount ("Extrusion Amount", Range(-0.5, 0.5)) = 0.1 


} 

SubShader { 
Tags { "RenderType"="Opaque" } 
LOD 300 


CGPROGRAM 


// surf - which surface function. 

// CustomLambert - which lighting model to use. 

// vertex:myvert - use custom vertex modification function. 

// finalcolor:mycolor - use custom final color modification 
function. 

// addshadow - generate a shadow caster pass. Because we 
modify the vertex position, 

// the shder needs special shadows handling. 

// exclude_ path:deferred/exclude_path:prepas - do not 
generate passes for 

//deferred/legacy deferred rendering path. 

// nometa - do not generate a "meta" pass (that’s used by 
lightmapping & dynamic 

//global illumination to extract surface information). 

#pragma surface surf CustomLambert vertex:myvert 
finalcolor:mycolor addshadow 

exclude_path:deferred exclude_path:prepass nometa 

#pragma target 3.0 


fixed4 _ColorTint; 
sampler2D _MainTex; 
sampler2D _BumpMap; 
half _Amount; 


struct Input { 
float2 uv_MainTex; 
float2 uv_BumpMap; 
}; 


void myvert (inout appdata full v) { 
V.vertex.xyz += Vv.normal * _Amount; 
} 


void surf (Input IN, inout SurfaceOutput 0) { 
fixed4 tex = tex2D(_MainTex, IN.uv_MainTex); 
0.Albedo = tex.rgb; 
0.Alpha = tex.a; 
o.Normal = UnpackNormal(tex2D(_BumpMap, 
IN.uv_BumpMap ) ); 
} 


half4 LightingCustomLambert (SurfaceOutput s, half3 
lightDir, half atten) { 
half NdotL = dot(s.Normal, lightDir); 
half4 c; 
c.rgb = s.Albedo * _LightColorO.rgb * (NdotL * atten); 
c.a = S.Alpha; 
return c; 


} 


void mycolor (Input IN, SurfaceOutput o, inout fixed4 
color) { 
color *= _ColorTint ， 


} 


ENDCG 


FallBack "Legacy Shaders/Diffuse" 


在 顶点 修改 函数 中 ， 我 们 使 用 顶点 法 线 对 顶点 位 置 进行 膨胀 ， 表 
面 函 数 使 用 主 纹理 设置 了 表面 属性 中 的 反射 率 ， 并 使 用 法 线 纹理 设置 
了 表面 法 线 方 回 ， 光 照 男 数 实现 了 人 徐 单 的 兰 伯 特 漫 反 射 光 照 模 型 ， 在 
最 后 的 颜色 修改 函数 中 ， 我 们 人 答 单 地 使 用 了 颜色 参数 对 和 输出 闫 色 进 行 
调整 。 注 意 ， 除 了 4 个 函数 外 ， 我 们 在 元 ragma surface 的 编译 指令 一 行 
中 还 指定 了 一 些 额 外 的 参数 。 由 于 我 们 修改 了 顶点 位 置 ， 因 此 ， 要 对 


其 他 物体 产生 正确 的 阴影 效果 并 不 能 直接 依赖 FallBack 中 找到 的 阴影 投 
射 Pass，addshadow 参 数 可 以 告诉 Unity 要 生成 一 个 该 表面 着 色 属 对 应 
的 阴影 投射 Pass。 默 认 情况 下 ，Unity 会 为 所 有 支持 的 泻 染 路 径 生 成 相 
应 的 Pass， 为 了 缩小 目 动 生成 的 代码 量 ， 我 们 使 用 
exclude_path:deferred 和 exclude_path:prepass 来 告诉 Unity 不 要 为 延迟 
泻 染 路 径 生成 相应 的 Pass。 最 后 ， 我 们 使 用 nometa 参 数 取消 对 提取 元 
数据 的 Pass 的 生成 。 


当 在 该 表面 着 色 絮 的 导入 面板 中 单 击 “Show generated code” 按 钮 
后 ， 我 们 就 可 以 看 到 Unity 生 成 的 顶点 / 片 元 着 色 器 了 。 由 于 代码 比较 
多 ， 为 了 节省 篇 幅 我 们 不 再 把 全 部 代码 粘贴 到 这 里 。 因 此 ， 在 往 下 阅 
读 之 前 ， 请 读者 和 完 打开 生成 的 代码 文件 ， 以 便 明 日 我 们 接 下 来 的 分 
析 。 


在 这 个 将 近 600 行 代码 的 文件 中 ，Unity 一 共 为 该 表面 着 色 器 生成 了 
3 个 Pass， 它 们 的 LightMode 分 别 是 ForwardBase、ForwardAdd 和 和 
ShadowCaster， 分 别 对 应 了 前 癌 泻 染 路 径 中 的 处 理 逐 像素 平行 光 的 
Pass、 处 理 其 他 膛 像 素 光 的 Pass、 处 理 阴影 投 冉 的 Pass。 这 些 Pass 的 原 
理 可 以 回顾 9.1.1 方 和 9.4 节 中 的 相 天 内 容 。 读 者 可 以 在 这 些 代码 中 看 到 
大 量 的 ##fdef 和 #if 语 句 ， 这 些 语句 可 以 判断 一 些 泻 染 条 件 ， 例 如 ， 是 否 
使 用 了 动态 光照 纹理 、 是 否 使 用 了 逐 顶 点 光照 、 是 否 使 用 了 屏幕 空间 
的 阴影 等 ，Unity 会 根据 这 些 条 件 来 进行 不 同 的 光照 计算 ， 这 正 是 表面 
着 色 需 的 魅力 之 一 一 -把 这 些 烦人 的 光照 计算 交 给 Unity 来 做 ! 


需要 注意 的 是 ， 不 同 的 Unity 版 本 可 能 生成 的 代码 有 少许 不 同 。 在 
本 书 中 ， 我 们 以 Unity 5.2.1 中 的 结果 为 准 。 下 面 ， 我 们 来 分 析 Unity 生 成 


的 ForwardBase Pass。 


(1) Unity 首 先 指明 了 一 些 编译 指令 : 


// ---- forward rendering base pass: 
Pass { 

Name "FORWARD" 

Tags { "LightMode" = "ForwardBase" } 


CGPROGRAM 

// compile directives 

#pragma vertex vert_surf 

#pragma fragment frag_surf 

#pragma target 3.0 

#pragma multi_compile_fwdbase 
#include "HLSLSupport.cginc" 

#include "UnityShaderVvariables.cginc" 


顶点 着 色 器 vert_surf 和 片 元 着 色 絮 frag_surf 都 是 目 动 生成 的 。 


(2) 之 后 出 现 的 是 一 些 自动 生成 的 注释 : 


// Surface shader code generated based on: 
vertex modifier: 'myvert' 
writes to per-pixel normal: YES 
writes to emission: no 
needs world space reflection vector: no 
needs world space normal vector: no 
needs screen space position: no 
needs world space position: no 
needs view direction: no 
needs world space view direction: no 
needs world space position for lighting: no 
needs world space view direction for lighting: no 
needs world space view direction for lightmaps: no 
needs vertex color: no 
needs VFACE: no 
passes tangent-to-world matrix to pixel shader: YES 
reads from normal: no 
2 texcoords actually used 
float2 _MainTex 
float2 _BumpMap 


尽管 这 些 对 渔 染 结果 没有 影响， 但 我 们 可 以 从 这 些 注释 中 理解 到 
Unity 的 分 析 过 程 和 它 的 分 析 结 果 。 


(3) 随后 ，Unity 定 义 了 一 些 宏 来 辅助 计算 : 


#define INTERNAL_DATA half3 internalSurfaceTtow0; half3 
internalSurfaceTtowi; half3 internalSurfaceTtow2; 

#define WorldReflectionVector(data,normal) reflect (data.worldRef], 
half3(dot(data. internalSsurfaceTtoWwO,normal), 
dot(data.internalSurfaceTtowi1,normal), dot(data. 


internalSurfaceTtow2, normal) ) ) 

#define WorldNormalVector(data,normal) 
fixed3(dot(data.internalSurfaceTtoWwo0, normal), 
dot(data.internalSurfaceTtoWw1,normal), 
dot(data.internalSurfaceTtow2, normal)) 


实际 上 ， 在 本 例 中 上 述 安 并 没有 被 用 到 。 这 些 宏 是 为 了 在 修改 了 
铺 助 计算 得 到 世界 至 间 下 的 反射 方向 和 法 线 方 
， 与 之 对 应 的 是 mput 结 构 体 中 的 一 些 变量 《可 参见 17.3.1T) 。 


(4) 接着 ，Unity 把 我 们 在 表面 着 色 器 中 编写 的 CG 代码 复制 过 
来 ， 作 为 Pass 的 一 部 分 ， 以 便 后 续 调用 。 


(5) 然后 ，Unity 定 义 了 顶点 着 色 器 到 片 元 着 色 器 的 插值 结构 体 
( 即 顶 点 着 色 器 的 输出 结构 体 ) v2f_surf。 在 定义 之 前 ，Unity 使 用 
##fdef 语 句 来 判断 是 否 使 用 了 光照 纹理 ， 并 为 不 同 的 情况 生成 不 同 的 结 
构 体 。 主 要 的 区 别 是 ， 如 果 没 有 使 用 光照 纹理 ， 就 需要 定义 一 个 存储 
未 顶点 和 SH 光照 的 变量 。 


// vertex-to-fragment interpolation data 

// no lightmaps: 

#ifdef LIGHTMAP_OFF 

struct v2f_surf { 
float4 pos : SV_POSITION; 
float4 pack0 : TEXCOORDO; // _MainTex _BumpMap 
fixed3 tSpace0 : TEXCOORD1; 


fixed3 tSpace1 : TEXCOORD2 

fixed3 tSpace2 : TEXCOORD3 

fixed3 vlight : TEXCOORD4; // ambient/SH/vertexlights 
SHADOW_COORDS(5) 

#if SHADER_TARGET >= 30 

float4 lmap : TEXCOORD6; 

#endif 


// with lightmaps: 
#ifndef LIGHTMAP_OFF 
struct v2f_surf { 
float4 pos : SV_POSITION; 
float4 pack© : TEXCOORDO; // _MainTex _BumpMap 
fixed3 tSpace0 : TEXCOORD1; 
fixed3 tSpace1 : TEXCOORD2; 
fixed3 tSpace2 : TEXCOORD3; 
float4 lmap : TEXCOORD4; 
SHADOW_COORDS(5) 


上 面 很 多 变量 名 看 起 来 很 陌生 ， 但 实际 上 大 部 分 变量 的 含义 我 们 
在 之 前 都 碰 到 过 ， 只 是 这 里 使 用 了 不 同 的 名 称 而 已 。 例 如 ， 在 下 面 我 
们 会 看 到 ，pack0 中 实际 上 存储 的 殉 是 主 纹理 和 法 线 纹理 的 采样 坐标 ， 
而 tfSpace0、tSpace1 和 tSpace2 存 储 了 从 切线 空间 到 世界 空间 的 变换 矩 
阵 。 一 个 比较 陌生 的 变量 是 vlight，Unity 会 把 逐 顶 点 和 SH 光 照 的 结 
存储 到 该 变量 里 ， 并 在 片 元 着 色 器 中 和 原 光照 结果 进行 营 加 (如 果 需 
要 的 话 ) 。 


(6) 随后 ，Unity 定 义 了 真正 的 顶点 着 色 器 。 顶 点 着 色 器 首先 会 调 
用 我 们 目 定义 的 顶点 修改 函数 来 修改 一 些 顶点 属性 ; 
// vertex Shader 


v2f_surf vert_surf (appdata full v) { 
v2f_surf 0o; 


UNITY_INITIALIZE _ OUTPUT(Vv2f_surf, 0o); 
myvert (v); 


在 我 们 的 实现 中 ， 只 对 顶点 坐标 进行 了 修改 ， 而 不 需要 向 Input 结 
构 体 中 添加 并 存储 新 的 变量 。 也 可 以 使 用 为 一 个 版 本 的 函数 声明 来 把 
顶点 修改 玉 数 中 的 某 些 计算 结果 存储 到 Input 结 构 体 中 : 


void vert(inout appdata_ full v, out Input o0); 


之 后 的 代码 是 用 于 计算 v2f_surf 中 各 个 变量 的 值 。 例 如 ， 计 算 经 过 
MVP 和 矩阵 变换 后 的 顶点 坐标 ， 使 用 TRANSFORM_TEX 内 置 宏 计 算 两 个 
纹理 的 采样 坐标 ， 并 分 别 存储 在 o.pack0 的 xy 分 量 和 zw 分 量 中 ， 计 算 从 
切线 空间 到 世界 空间 的 变换 矩 阵 ， 并 把 矩阵 的 每 一 行 分 别 存 储 在 
o.tSpace0、o.tSpace1 和 o.tSpace2 变 量 中 ; 判断 是 否 使 用 了 光照 映射 和 动 
态 光 照 映射 ， 并 在 需要 时 把 两 种 光照 纹理 的 采样 坐标 计算 结果 存储 在 
o.Imap.xy 和 o.Imap.zw 分 量 中 ; 判断 是 否 使 用 了 光照 映射 ， 如 果 没 有 的 
话 就 计算 该 顶点 的 SH 光 照 (一 种 快速 计算 光照 的 方法 ) ， 把 结果 存储 
到 o.vlight 中 ;判断 是 否 开 司 了 逐 顶 点 光照 ， 如 采 是 丈 计 算 最 重要 的 4 个 
逐 顶 点 光照 的 光照 结果 ， 把 结果 车 加 a 到 o.vlight 中 。 这 部 分 代码 读者 可 
以 在 生成 的 文件 中 找到 ， 这 里 不 再 粘贴 出 来 。 


最 后 ， 计 算 阴 影 坐 标 并 传递 给 片 元 厦 色 硕 : 


TRANSFER_SHADOW(0); // pass shadow coordinates to pixel shader 
return o; 


} 


(7) 在 Pass 的 最 后 ，Unity 定 义 了 真正 的 片 元 着 色 器 。Unity 首 先 利 
用 插值 后 的 结构 体 v2f_surf 来 初始 化 input 结构 体 中 的 变量 : 


// fragment Shader 

fixed4 frag_surf (v2f_surf IN) : SV_Target { 
// prepare and unpack data 
Input surfIN; 


UNITY_INITIALIZE_OUTPUT(Input, SurfIN ) ， 
surfIN.uv_MainTex = IN.packO.xy; 
surfIN.uv_BumpMap = IN.pack0.zw， 


随后 ，Unity 声 明了 一 个 SurfaceOutput 结 构 体 的 变量 ， 并 对 其 中 的 
表面 属性 进行 了 初始 化 ， 再 调用 了 表面 函数 ; 


#ifdef UNITY_COMPILER_HLSL 
SurfaceOutput o = (SurfaceoOutput )0 
#else 
SurfaceOutput o; 

#endif 
0.Albedo = 
,Emission 


// call surface function 
surf (surfIN, 0o); 


在 上 面 的 代码 中 ，Unity 还 使 用 ##fdef 语 句 判 断 当 前 的 编译 语言 类 型 
征 否 是 HLSL， 如 采 是 束 使 用 更 挛 格 的 声明 方式 来 声明 SurfaceOutput 结 
构 体 (因为 DirectX 平 台 往往 有 更 加 严格 的 语义 要 求 ) 。 当 对 各 个 表面 
属性 进行 初始 化 后 ，Unity 调 用 了 表面 钞 数 surf 来 填充 这 些 表面 属性 。 


之 后 ，Unity 进 行 了 真正 的 光照 计算 。 首 和 完 ， 计 算得 到 了 光照 衰减 
和 世界 空间 下 的 法 线 方向 : 


// compute lighting & shadowing factor 
UNITY_LIGHT_ATTENUATION(atten, IN, worldPos) 
fixed4 c = 0; 

fixed3 worldN; 

dot(IN.tSpace0.xyz, o.Normal); 
dot(IN.tSpacel1.xyz, o.Normal); 
dot(IN.tSpace2.xyz, o.Normal); 
worldN; 


其 中 ， 变 量 c 用 于 存储 最 终 的 输出 颜色 ， 此 时 被 初始 化 为 0° 随 
后 ，Unity 判 晰 生 否 关闭 了 光照 映 出 ， 如 采 关 财 了 ， 束 把 逐 顶 点 的 光照 
结 朱 县 加 到 和 输出 颜色 中 : 


#ifdef LIGHTMAP_OFF 
c.rgb += 0.Albedo * IN.vlight; 


#endif // LIGHTMAP_OFF 


而 如 果 需 要 使 用 光照 映射 ，Unity 就 会 使 用 之 前 计算 的 光照 纹理 采 
样 坐 标 ， 对 光照 纹理 进行 采样 并 解码 ， 得 到 光照 纹理 中 的 光照 结果 。 
这 部 分 代码 读者 可 以 在 生成 的 代码 中 找到 ， 这 里 不 再 粘贴 过 来 。 


如 果 没 有 使 用 光照 映射 ， 意 味 着 我 们 需要 使 用 目 定 义 的 光照 模型 
计算 光照 结 米 : 


// realtime lighting: call lighting function 
#ifdef LIGHTMAP_OFF 


c += LightingCustomLambert (o, lightDir, atten); 
#else 

c.a = 0.Alpha; 
#endif 


而 如 果 使 用 了 光照 映射 的 话 ，Unity 会 根据 之 前 由 光照 纹理 得 到 的 
结 朱 得 到 颜色 值 ， 并 县 加 到 输出 颜色 c 中 。 如 条 还 开局 了 动态 光照 映 
射 ，Unity 还 会 计算 对 动态 光照 纹理 的 采样 结果 ， 同 样 把 结果 县 加 到 和 输 
出 颜色 c 中 。 这 部 分 代码 读者 可 以 在 生成 的 代码 中 找到 ， 这 里 不 再 粘贴 
过 来 沁 


最 后 ，Unity 调 用 日 定义 的 闫 色 修 改 钞 数 ， 对 输出 颜色 c 进 行 最 后 的 
修改 : 


mycolor (surfIN, o, c); 
UNITY_OPAQUE_ALPHA(c .a); 


return c; 
} 


在 上 面 的 代码 中 ，Unity 还 使 用 了 内 置 宏 UNITY_OPAQUE_ALPHA 
(在 UnityCG.cginc 里 被 定义 ) 来 重 置 片 元 的 透明 通道 。 在 默认 情况 
下 ， 所 有 不 透明 类 型 的 表面 着 色 器 的 透明 通道 都 会 被 重 置 为 1.0， 而 不 
管 我 们 是 否 在 光照 函数 中 改变 了 它 ， 如 上 所 示 。 如 果 我 们 想 要 保留 它 
的 透明 通道 的 话 ， 可 以 在 表面 着 色 器 的 编译 指令 中 添加 keepalpha 参 
ei o 


至 此 ，ForwardBase Pass 束 结束 了 。 拉 下 来 的 ForwardAdd Pass 和 上 
面 的 ForwardBase Pass 基 本 类 似 ， 只 是 代码 更 加 简单 了 ，Unity 去 掉 了 对 
未 顶点 光照 和 各 种 判断 是 否 使 用 了 光照 映射 的 代码 ， 因 为 这 些 额 外 的 
Pass 不 需要 考虑 这 些 。 


最 后 一 个 重要 的 Pass 是 ShadowCaster Pass。 相 比 于 之 前 的 两 个 
Pass， 它 的 代码 比较 简单 短小 。 它 的 生成 原理 很 简单 ， 就 是 通过 调用 自 
定义 的 顶点 修改 函数 来 保证 计算 阴影 时 使 用 的 是 和 之 前 一 致 的 顶点 坐 
标 。 正 如 我 们 在 11.3.3 节 和 15.1 节 中 看 到 的 一 样 ， 这 个 目 定义 的 阴影 投 
射 的 Pass 同 样 使 用 了 内 置 的 V2F_SHADOW_CASTER、 
TRANSFER_SHADOW_CASTER_NORMALOFFSET 和 
SHADOW_CASTER_FRAGMENT 来 计算 阴影 投射 ， 这 部 分 代码 也 不 再 
粘贴 到 本 书 中 。 


17.6 Surface Shader 的 缺点 


从 上 面 的 内 容 中 我 们 可 以 看 出 ， 表 面 着 色 右 给 我 们 带 来 了 很 大 的 
便利 。 那 么 ， 我 们 之 前 为 什么 还 要 人 花 那 么 久 的 时 间 学 习 顶 点 / 片 元 着 色 
名 ? 直接 写 表 面 者 色 万 加 好 了 嘛 。 


正如 我 们 一 直 强 调 的 那样 ， 表 面 着 色 右 只 是 Unity 在 顶点 / 片 元 着 色 
器 上 面 提供 的 一 种 封装 ， 征 一 种 更 高 层 的 抽象 。 但 任何 在 表面 着 色 央 
中 完成 的 事情 ， 我 们 都 可 以 在 顶点 / 片 元 着 色 器 中 重 现 。 但 不 幸 的 是 ， 
这 句 话 反 过 来 并 不 成 立 。 


这 世上 任何 事情 都 是 有 代价 的 ， 如 果 我 们 想 要 得 到 便利 ， 残 需要 
以 牺牲 自由 度 为 代价 。 表 面 着 色 器 虽然 可 以 快速 实现 各 种 光照 效果 ， 
但 我 们 失去 了 对 各 种 优化 和 各 种 特效 实现 的 控制 。 因 此 ， 使 用 表面 着 
色 器 往往 会 对 性 能 造成 一 定 的 影响 ， 而 内 置 的 Shader， 例 如 Diffuse 、 
Bumped Specular 等 都 是 使 用 表面 着 色 器 编写 的 。 尺 管 Unity 提 供 了 移动 
平台 的 相应 版 本 ， 例 如 Mobile/Diffuse 和 Mobile/Bumped Specular 等 ， 但 
这 些 版 本 的 Shader 往 往 只 是 去 掉 了 额外 的 逐 像素 Pass、 不 计算 全 局 光照 
和 其 他 一 些 光照 计算 上 的 优化 。 但 要 想 进 行 更 多 深层 的 优化 ， 表 面 着 
色 句 就 不 能 满足 我 们 的 需求 了 。 


除了 性 能 比较 差 以 外 ， 表 面 着 色 器 还 无 法 完成 一 些 自 定 义 的 泻 染 
效 订 ， 例 如 10.2.2 下 中 透明 玻璃 的 效 末 。 表 面 看 色 融 的 这 些 缺 点 让 很 多 
人 更 愿意 使 用 目 由 的 顶点 / 片 元 着 色 器 来 实现 各 种 效果 ， 尽 管 处 理光 照 
时 这 可 能 难度 更 大 些 。 


因此 ， 我 们 给 出 一 些 建 议 供 读者 参考 。 


。 如 采 你 需要 和 各 种 光源 打交道 ， 尤 其 是 想 要 使 用 Unity 中 的 全 局 光 
照 的 话 ， 你 可 能 更 喜欢 使 用 表面 着 色 器 ， 但 要 时 刻 小 心 它 的 性 
能 ; 

。 如 采 你 需要 处 理 的 光源 数目 非常 少 ， 例 如 只 有 一 个 平行 光 ， 那 么 
使 用 顶点 / 片 元 着 色 需 是 一 个 更 好 的 选择 ; 

。 了 最 重要 的 是 ， 如 条 你 有 很 多 目 定义 的 演 染 效果 ， 那 么 请 选择 顶点 / 
片 元 着 色 器 。 


第 18 章 ”基于 物理 的 演 染 


在 之 前 的 章节 中 ， 我 们 学 习 了 Lambert 光 照 模 型 、Phong 光 照 模型 
和 Blinn-Phong 光 照 模型 。 但 这 些 光 照 模型 的 缺点 在 于 ， 它 们 部 是 经 验 
模型 。 如 果 我 们 需要 演 染 更 高 质量 的 画面 ， 这 些 经 验 模型 就 显得 不 再 
能 满足 我 们 的 要 求 了 。 


近年 来 ， 基 于 物理 的 渲染 技术 (Physically Based Shading, PBS) 
被 逐渐 应 用 于 实时 泻 染 中 。 总 体 来 说 ，PBS 是 为 了 对 光 和 材质 之 间 的 行 
为 进行 更 加 真实 的 建 模 。PBS 早 已 被 广泛 应 用 到 电影 行业 中 ， 但 游戏 中 
的 PBS 是 近年 来 才 逐 渐 流 行 起 来 的 。Unity 最 早 在 2012 年 的 《蝴蝶 效 
应 》 (英文 名 : Butterfly Effect) 的 demo 中 大 量 使 用 了 PBS， 并 在 Unity 
5 中 正式 将 PBS 引 入 到 引擎 泻 染 中 。Unity 5 引入 了 一 个 名 为 Standard 
Shader 的 可 在 不 同 材质 之 间 通 用 的 着 色 器 ， 而 该 着 色 峰 就 是 使 用 了 基于 
物理 的 光照 模型 。 需 要 注意 的 是 ，PBS 并 不 意味 着 泻 染 出 来 的 画面 一 定 
是 像 照片 一 样 真 实 的 ， 例 如 ，Pixar 和 Disney 尺 管 长 期 使 用 PBS 泻 染 电 影 
画面 ， 但 它们 得 到 的 风格 是 非常 有 特色 的 忆 术 风格 。 相 信 很 多 读者 或 
多 或 少 看 到 过 使 用 PBS 泻 染 出 来 的 画面 是 多 么 的 酷 炫 ， 并 很 想 了 解 这 背 
后 的 技术 原理 。 如 果 你 是 一 个 程序 员 ， 可 能 有 很 大 的 冲动 想 要 自己 实 
现 一 个 PBS 洽 染 框 架 ， 但 往往 走 到 后 面 会 发 现 有 很 多 看 不 懂 的 名 词 以 及 
一 大 堆 与 之 相关 的 论文 ， 如果 你 是 一 个 美工 人 员 ， 你 可 能 会 找到 很 多 
关于 如 何 制 作 PBS 中 使 用 的 纹理 教程 ， 但 你 大 概 也 了 解 ， 想 要 使 用 PBS 
实现 出 色 的 演 染 效 末 ， 并 不 是 纹理 + 一 个 Shader 这 么 简单 的 问题 。 


现在 ， 我 们 有 一 个 好 消 轧 和 一 个 坏 消 轧 要 告诉 大 家 。 先 说 好 请 
轧 ，Unity 5 引入 的 基于 物理 的 泻 染 不 需要 我 们 过 多 地 了 解 PBS 是 如 何 实 
现 的 ， 束 能 利用 各 种 内 置 工具 来 实现 一 个 不 销 的 泻 染 效 末 。 人 然而 坏 消 
思 生 ， 我 们 很 难 通过 短 短 儿 万 文字 来 非常 详细 地 告诉 读者 这 些 泻 染 到 
故 是 如 何 实 现 的 ， 因 为 这 其 中 需要 牵扯 许多 复杂 的 光照 模型 ， 如 果 要 
完全 理解 每 一 种 模型 的 话 ， 大 概 还 要 讲 很 多 论文 和 其 他 参考 文献 。 不 
过 还 有 一 个 好 消息 是 ， 我 们 相信 读者 在 学 完 本 章 后 可 以 了 解 一 些 PBS 的 
原理 ， 如 果 你 对 PBS 有 着 浓厚 的 兴趣 ， 想 要 演 试 目 己 构建 一 个 PBS 的 泻 
染 框 架 ， 可 以 在 本 章 的 扩展 阅读 部 分 找到 许多 非常 有 价值 的 参考 资 
料 。 


在 本 章 中 ， 我 们 首先 会 讲解 PBS 的 基本 原理 ， 让 读者 了 解 它 们 与 我 
们 之 前 所 学 的 洽 染 方式 到 的 有 哪些 不 同 。 尺 管 本 书 的 定位 并 不 是 “ 教 你 
如 何 使 用 Unity”， 但 我 们 决定 花 一 点 时 间 来 告诉 读者 Unity 5 引入 的 
Standard Shader 是 如 何 工 作 的 ， 以 及 如 何在 Unity 5 中 使 用 它 和 其 他 工具 
来 泻 染 一 个 场景 ， 我 们 和 希望 通过 这 些 内 容 来 让 读者 明日 PBS 中 的 一 些 天 
键 因素 。 尺 管 PBS 在 手机 上 的 应 用 并 不 十 分 广 沁 ,但 我 们 相信 这 是 未 来 
的 发 展 趋势 ， 硕 望 本 章 可 以 为 读者 打开 PBS 的 大 门 。 


18.1 PBS 的 理论 和 数学 基础 


在 学 习 如 何 实现 PBS 之 前 ， 我 们 非常 有 必要 来 了 解 基 于 物理 的 演 染 
所 基于 的 理论 和 数学 基础 。 我 们 不 会 过 多 地 牵扯 一 些 论文 贷 料 ， 但 如 
果 在 阅读 过 程 中 读 首 发 现 无 法 理解 一 些 光照 模型 的 实现 原理 ， 这 可 能 
意味 着 你 需要 阅读 更 多 的 参考 文献 。 本 下 主要 参考 了 Naty Hoffman 在 


SIGGRAPH 2013 上 做 的 名 为 Background: Physics and Math of Shading 
的 演讲 [1] 。 


18.1.1 光 是 什么 


尽管 我 们 之 前 一 直 讲 光照 模型 ， 但 要 问 读 者 ， 光 到 底 是 什么 ， 可 
能 没有 多 少 人 可 以 解释 清楚 。 在 物理 学 中 ， 光 是 一 种 电磁 波 。 首 先 ， 
光 由 太阳 或 其 他 光源 中 被 发 射出 来 ， 然 后 与 场景 中 的 对 象 相交 ， 一 些 
光线 被 吸收 (absorption) ， 而 另 一 些 则 被 散射 (scattering) ， 最 后 光 
线 被 一 个 感应 器 (例如 我 们 的 眼睛 ) 吸收 成 像 。 


通过 上 面 的 过 程 ， 我 们 知道 材质 和 光线 相交 会 发 生 两 种 物理 现 
象 : 散射 和 吸收 (其 实 还 有 自发 光 现 象 ，。 光 线 会 被 吸收 是 由 于 光 被 
转化 成 了 其 他 能 量 ， 但 吸收 并 不 会 改变 光 的 传播 方向 。 相 反 的 ， 散 射 
则 不 会 改变 光 的 能 量 ， 但 会 改变 它 的 传播 方向 。 在 光 的 传播 过 程 中 ， 
影响 光 的 一 个 重要 的 特性 是 材质 的 折射 率 (refractive index) 。 我 们 知 
道 ， 在 均匀 的 介质 中 ， 光 是 沿 直线 传播 的 。 但 如 果 光 在 传播 时 介质 的 
折射 率 发 生 了 变化 ， 光 的 传播 方向 就 会 发 生变 化 。 特 别 是 ， 如 果 折 里 
率 是 突变 的 ， 就 会 发 生 光 的 散射 现象 。 


实际 上 ， 在 现实 生活 中 ， 光 和 物体 之 间 的 交互 过 程 是 非常 复 洒 
的 ， 大 多 数 情 况 下 并 不 存在 一 种 可 分 析 的 解决 方法 。 但 为 了 在 洽 染 中 
对 光照 进行 建 模 ， 我 们 往往 只 考虑 一 种 特殊 情况 ， 即 只 考虑 两 个 介质 
的 边界 是 无 限 大 并 且 是 光学 平滑 (optically flat) 的 。 尽 管 真实 物体 的 
表面 并 不 是 无 限 延 伸 的 ， 也 不 是 绝对 光滑 的 ， 但 和 光 的 波长 相 比 ， 它 
们 的 大 小 可 以 被 近似 认为 是 无 限 大 以 及 光学 平滑 的 。 在 这 样 的 前 提 
下 ， 光 在 不 同 介质 的 边 弄 会 被 分 割 成 两 个 方向 : 反射 方 器 和 折 蜀 方 


向 。 而 有 多 少 百分比 的 光 会 被 反射 〈 另 一 部 分 就 是 被 折射 了 ) 则 是 由 
菲 涅 耳 等 式 (Fresnel equations) 来 描述 的 ， 如 图 18.1 所 示 。 


反射 光线 入 射 光 线 


? 驳 


———y 
菲 涅 耳 等 式 


A 图 18.1 在 理想 的 边界 处 ， 折 射 率 的 突变 会 把 光线 分 成 两 个 方 问 


但 是 ， 这 些 与 光线 的 交界 处 真 的 是 像 镜 子 一 样 平 坦 吗 ? 尽管 在 上 
面 我 们 已 经 说 过 ， 相 对 于 光 的 波长 来 说 ， 它 们 的 确 可 以 被 认为 古 光 学 
平坦 的 。 但 是 ， 如 果 想 象 我 们 有 一 个 高 倍 放 大 镜 ， 去 放大 这 些 被 照 亮 
的 物体 表面 ， 束 会 发 现 有 很 多 之 前 肉眼 不 可 见 的 止 吓 不平 的 平面 。 在 
这 种 情况 下 ， 物 体 的 表面 和 六 照 发 生 的 各 种 行为 ， 更 像 是 一 系列 微小 
的 光学 平 清平 面 和 光 交 互 的 结果 ， 其 中 每 个 小 平面 会 把 光 分 割 成 不 同 
的 方向 。 


这 种 建立 在 微 表 面 的 模型 更 容易 解释 为 什么 有 些 物 体 看 起 来 粗 
糙 ， 而 有 些 看 起 来 就 平滑 ， 如 图 18.2 所 示 。 想 象 我 们 用 一 个 放大 镜 去 观 


察 一 个 光滑 物体 的 表面 ， 尽 管 它 的 表面 仍然 由 许多 四 是 不 平 的 微 表面 


构成 ， 但 这 些微 表面 的 法 线 方向 变化 角度 小 ， 因 此 ， 由 这 些 表面 反射 


的 光线 方向 变化 也 比较 小 ， 如 图 18.2 左 图 所 示 ， 这 使 得 物体 的 高 光 反 射 
更 加 清晰 。 而 图 18.2 右 图 所 示 的 粗粮 表面 则 相反 ， 由 此 得 到 的 高 光 反 里 


效果 更 模糊 。 


WW NW 


4 图 18.2 左边: 光滑 表面 的 微 平面 的 法 线 变化 较 小 ， 反 射 光 线 的 方向 变化 也 更 小 。 石 边 : 
糙 表 面 的 微 平 面 的 法 线 变 化 较 大 ， 反 射 光 线 的 方向 变化 也 更 大 


在 上 面 的 内 容 中 ， 我 们 并 没有 讨论 那些 被 微 表 面 折射 的 光 。 这 些 
光 被 折射 到 物体 的 内 部 ， 一 部 分 被 介质 吸收 ， 一 部 分 又 被 散射 到 外 
部 。 人 金属 材质 具有 很 高 的 吸收 系数 ， 因 此 ， 所 有 被 折射 的 光 往 往 会 被 
立刻 吸收 ， 被 金属 内 部 的 自由 电子 转化 成 其 他 形式 的 能 量 。 而 非 金属 
材质 则 会 同时 表现 出 吸收 和 散射 两 种 现象 ， 这 些 被 散射 出 去 的 沧 又 被 


粗 


称 为 次 表面 散射 光 (subsurface-scattered light) 。 在 图 18.3 中 ， 我 们 给 
出 了 一 条 由 微 表 面 折射 的 光 的 传播 路 径 (如 图 18.3 所 示 的 蓝 线 ， 读 者 可 


参考 作者 给 出 的 彩 图 ) 。 


和 图 18.3 ” 微 表 面 对 光 的 折射 。 这 些 被 折射 的 光 中 一 部 分 被 吸收 ， 一 部 分 又 被 散射 到 外 部 


现在 ， 我 们 把 放大 镜 从 物体 表面 拿 开 ， 继 续 从 泻 染 的 层级 大 小 上 
考虑 区 与 表面 一 点 的 交互 行为 。 那 么 ， 由 微 表 面 反 射 的 论 可 以 被 认为 
苹 该 后 上 一 些 方向 变化 不 大 的 反射 光 ， 如 图 18.4 中 的 黄 线 所 示 。 而 折 映 
光线 ( 蓝 线 ， 则 需要 更 多 的 考虑 。 那 些 次 表面 散射 光 会 从 不 同 于 入 射 
点 的 位 置 从 物体 内 部 再 次 射出 ， 如 图 18.4 左 图 所 示 “。 而 这 些 离 人 射 点 的 
距离 值 和 像素 大 小 之 间 的 关系 会 产生 两 种 建 模 结果 。 如 果 像 素 要 大 于 
这 些 散 射 距离 的 话 ， 意 味 着 这 些 次 表面 散射 产生 的 距离 可 以 被 忽略 ， 
那 我 们 的 泻 染 束 可 以 在 局 部 进行 ， 如 图 18.4 右 图 所 示 。 如 有 果 像 素 要 小 于 
这 些 散 射 距 离 ， 我 们 束 不 可 以 选择 忽略 它们 了 ， 要 实现 更 真实 的 次 表 
面 散射 效果 ， 我 们 需要 使 用 特殊 的 泻 染 模型 ， 也 束 古 所 请 的 次 表面 散 
别 泻 染 技 术 。 


A 图 18.4 次 表面 散射 。 左 边 : 次 表面 散射 的 光线 会 从 不 同 于 入 射 点 的 位 置 射出 。 如 果 这 些 距 
离 值 小 于 需要 被 着 色 的 像素 大 小 ， 那 么 演 染 就 可 以 完全 在 局 部 完成 (右边) 。 否 则 ， 就 需要 使 
用 次 表面 散射 浑 染 技术 


我 们 下 面 的 内 容 均 建立 在 不 考虑 次 表面 散射 的 距离 ， 而 完全 使 用 
局 部 着 色 泻 染 的 前 提 下 。 


18.1.2 ”双向 反射 分 布 范 数 (BRDE) 


在 了 解 了 上 面 的 理论 基础 后 ， 我 们 现在 来 学 习 如 何 用 数学 表达 式 
来 表示 上 面 的 光照 模型 。 这 意味 着 ， 我 们 要 对 光 这 个 看 似 抽 象 的 概念 
进行 量化 。 

我 们 可 以 用 辐射 率 (radiance) 来 量化 光 。 和 辐射 率 是 单位 面积 、 单 
位 方向 上 光源 的 辐射 通 量 ， 通 常用 来 表示 ， 被 认为 是 对 单一 光线 的 亮 
度 和 颜色 评估 。 在 泻 染 中 ， 我 们 通常 会 基于 表面 的 入 射 光 线 的 入 射 辐 
射 率 L; 来 计算 出 射 辐射 率 L,，， 这 个 过 程 也 往往 被 称 为 是 着 色 

(shading) 过 程 。 


而 要 得 到 出 射 辐射 率 L,，， 我 们 需要 知道 物体 表面 一 点 是 如 何 和 光 
进行 交互 的 。 而 这 个 过 程 就 可 以 使 用 BRDF (Bidirectional Reflectance 


Distribution Function ， 中 文 名称 为 双向 反射 分 布 函 数 ) 来 定量 分 析 。 
大 多 数 情 况 下 ，BRDEF 可 以 用 jw 来 表示 ， 其 中 [为 入 射 方向 和 v 为 观 守 
方向 〈 双 向 的 含义 ) 。 这 种 情况 下 ， 绕 着 表面 法 线 旋 转 入 射 方向 或 观 
察 方向 并 不 会 影响 BRDF 的 结果 ， 这 种 BRDF 被 称 为 是 各 项 同性 
(isotropic) 的 BRDF。 与 之 对 应 的 则 是 各 向 异性 (anisotropic) 的 
BRDF ° 


那么 ，BRDEF 到 底 表 示 的 含义 是 什么 呢 ? BRDF 有 两 种 理解 方式 
一 一 第 一 种 理解 是 ， 当 给 定 入 射 角度 后 ，BRDF 可 以 给 出 所 有 出 射 方向 
上 的 反射 和 散射 光线 的 相对 分 布 情况 ;第 二 种 理解 是 ， 当 给 定 观 察 方 
向 〈 即 出 射 方向 ) 后 ，BRDF 可 以 给 出 从 所 有 入 射 方向 到 该 出 射 方向 的 
光线 分 布 。 一 个 更 直观 的 理解 是 ， 当 一 上 束 光线 沿 着 入 射 方向 1 到达 表面 
某 点 时 ，fl1,v) 表 示 了 有 多 少 部 分 的 能 量 被 反射 到 了 观察 方向 vy 上。 


据 此 ， 我 们 给 出 基于 物理 泻 染 的 技术 中 ， 第 一 个 重要 的 等 式 一 一 
反射 等 式 (reflection equation) : 


Lo(y) = / fl,v) x Li(Dan: Ddoi 
2 


反射 等 式 实际 上 是 泻 染 方程 的 一 个 特殊 情况 ， 但 它 是 基于 物理 基 
础 的 。 尽 管 上 面 的 式 子 看 起 来 有 些 复杂 ， 但 很 好 理解 ， 即 给 定 观 察 视 
角 v， 该 方向 上 的 出 射 辐射 率 [{{L}_{o}}(w] 等 于 所 有 入 射 方 癌 的 辐射 率 
积分 乘 以 它 的 BRDF 值 fl,v)， 再 乘 以 一 个 余弦 值 [(n\cdot D]。 如 果 积 分 
的 概念 对 某 些 读者 来 说 难以 理解 ， 我 们 使 用 更 简单 的 方式 来 理解 。 想 
象 我 们 现在 要 计算 表面 上 某 点 的 出 射 辐射 率 ， 我 们 已 知 到 该 点 的 观察 
方 各 ， 该 点 的 出 射 辐射 率 是 由 从 许多 不 同方 回 的 入 射 辐射 率 琶 加 后 的 


结果 。 其 中 ，BRDF 表 示 了 不 同方 向 的 入 射 光 在 该 观察 方向 上 的 权重 分 
布 。 我 们 把 这 些 不 同方 向 的 光 辐 射 率 (Li(1 ) 部 分 ) 乘 以 观察 方向 上 所 
占 的 权重 (flLv) 部 分 ) ， 再 乘 以 它们 在 该 表面 的 投影 结果 ([(n\cdot TD] 
部 分 ) ， 最 后 再 把 这 些 值 加 起 来 〈 即 做 积分 ) 就 是 最 后 的 出 射 辐射 
珍 o 


在 游戏 泻 染 中 ， 我 们 通常 是 和 一 些 精 确 光 源 (punctual light 
sources) 打交道 的 ， 而 不 是 计算 所 有 入 射 光 线 在 半球 面 上 的 积分 。 精 
确 光 源 指 的 是 那些 方向 确定 、 大 小 为 无 线 小 的 光源 ， 例 如 ， 和 常见 的 所 
光源 、 皮 光 灯 等 。 我 们 使 用 1 来 表示 它 的 方 辐 ， 使 用 cjioh 表 示 它 的 颜 
色 。 使 用 精确 光源 的 最 大 的 好 处 在 于 ， 我 们 可 以 大 大 简化 上 面 的 反射 
等 式 。 这 里 省 略 推导 过 程 (有 兴趣 的 读者 可 以 阅读 参考 文献 [1]) ， 直 
接 给 出 结论 ， 即 对 于 一 个 精确 光源 ， 我 们 可 以 使 用 下 面 的 等 式 来 计算 
它 在 某 个 观察 方向 v 上 的 出 射 罚 射 率 : 


Lo(v) = zf (le,») X Clight (n :Le) 


和 之 前 使 用 积分 形式 的 原始 反射 等 式 相 比 ， 上 面 的 式 子 使 用 一 个 
等 定 的 BRDF 值 来 代 奉 积分 操作 ， 这 大 大 简化 了 计算 。 如 时 场 景 中 包 合 
了 多 个 精确 光源 ， 我 们 可 以 把 它们 分 别 代 入 上 面 的 式 子 进行 计算 ， 然 
后 把 它们 的 结 采 相 加 即 可 。 


下 面 ， 我 们 来 看 一 下 反射 等 式 中 的 重要 组 成 部 分 一 -BRDF 是 如 何 
得 到 的 。 可 以 看 出 ，BRDF 决 定 了 铸 色 过 程 是 否 是 基于 物理 的 。 这 可 以 
由 BRDF 是 否 满足 两 个 特性 来 判断 : 它 是 否 满 足 交换 律 (reciprocity) 
和 能 量 守 恒 (energy conservation) 。 


交换 律 要 求 当 交换 1 和 v 的 值 后 ，BRDF 的 值 不 变 ， 即 
fl,v) = 0 


而 能 量 守恒 则 要 求 表面 反射 的 能 量 不 能 超过 入 射 的 区 能 ， 即 
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基于 这 些 理论 ，BRDF 可 以 用 于 描述 两 种 不 同 的 物理 现象 ， 表 面 反 
射 和 次 表面 散射 。 针 对 每 种 现象 ，BRDF 通 常会 包含 一 个 单独 的 部 分 来 
描述 它们 一 一 用 于 描述 表面 反射 的 部 分 被 称 为 高 光 反 射 项 (specular 
term) ， 以 及 用 于 描述 次 表面 散射 的 漫 反 射 项 (diffuse term) ， 如 图 
18.5 所 示 。 


漫 反射 


高 光 反 射 


A 图 18.5 BRDF 描 述 的 两 种 现象 。 高 光 反 射 部 分 用 于 描述 反射 ， 漫 反射 部 分 用 于 描述 次 表面 
散射 


18.1.3” 漫 反射 项 


我 们 之 前 所 学 习 的 Lambert 模 型 就 是 最 人 简单、 也 是 应 用 最 广泛 的 漫 
反射 BRDF。 准 确 的 Lambertian BRDF 的 表示 为 : 


Cadiff 
ravientls v) = Re 


其 中 ，cgiy 表 示 漫 反射 光线 所 占 的 比例 ， 它 也 通常 被 称 为 是 漫 反射 
颜色 (diffuse color) 。 与 我 们 之 前 讲 过 的 Lambert 光 照 模 型 不 太一 样 的 
是 ， 上 面 的 式 子 实际 上 是 一 个 定 值 ， 我 们 常见 到 的 余弦 ( 即 (n:D) 因子 
部 分 实际 是 反射 等 式 的 一 部 分 ， 而 不 是 BRDF 的 部 分 。 上面 的 式 子 之 所 
以 要 除 以 rz， 是 因为 我 们 假设 漫 反 射 在 所 有 方向 上 的 强度 都 是 相同 的 ， 
而 BRDF 要 求 在 半球 内 的 积分 值 为 1。 因 此 ， 给 定 入 射 方向 上 的 光源 在 表 
面 某 点 的 出 射 漫 反射 辐射 率 为 : 


Cdiff 
A 


Lair 一 xL; (Dn . 有 

Lambert 模 型 虽然 简单 ， 但 很 多 基于 物理 的 泻 染 选 择 使 用 了 更 复杂 
的 漫 反 射 项 来 模拟 次 表面 散射 的 结果 。 例 如 ， 在 Disney 使 用 的 BRDF2] 
中 ， 它 的 漫 反 射 项 为 : 


baseColor 
A 


fasr ll,») = (1+(Fpeo — D(1 —n:D + (Fp 一 DG —n.v)’) 


其 中 ,Fpo90 = 0.3 + 2roughness(h: 六 


在 Disney 的 实现 中 ，baseColor 是 表面 颜色 ， 通 党 由 纹理 采样 得 
到 ，roughness 是 表面 的 粗糙 度 。 上 面 的 漫 反 射 项 既 考 虑 了 在 掠 射 角 
(glancing angles) 漫 反 射 项 的 能 量变 化 ， 还 考虑 了 表面 的 粗糙 度 对 漫 
反映 的 影响 。 而 上 面 的 式 子 也 正 是 Unity 5 内 部 使 用 的 漫 反射 项 。 


18.1.4 高 光 反 射 项 


在 现实 生活 中 ， 几 乎 所 有 的 物体 都 或 多 或 少 有 高 光 反 射 现象 。 
John Hable 在 他 的 文章 中 就 强调 了 Everything is Shiny。 但 在 许多 传统 
的 Shader 中 ， 很 多 材质 只 考虑 了 漫 反 射 效 果 ， 而 并 没有 添加 高 光 反 射 ， 
这 使 得 泻 染 出 来 的 画面 并 不 那么 真实 可 信 。 在 基于 物理 的 泻 染 中 ， 
BDRF 中 的 高 光 反 射 项 大 多 数 都 是 建立 在 微 面 元 理论 (microfacet 
theory) 的 假设 上 的 。 微 面 元 理论 认为 ， 物 体 表 面 实际 是 由 许多 人 眼看 
不 到 的 微 面 元 组 成 的 ， 虽 然 物体 表面 并 不 是 光学 平滑 的 ， 但 这 些微 面 
元 可 以 被 认为 是 光学 平滑 的 ， 也 就 是 说 它们 具有 完美 的 高 光 反 射 。 当 
光线 和 物体 表面 一 点 相交 时 ， 实 际 上 是 和 一 系列 微 面 元 交互 的 结果 。 
正如 我 们 在 18.1.1 广 中 看 到 的 ， 当 光 和 这 些微 面 元 相交 时 ， 光 线 会 被 分 
割 成 两 个 方向 反射 方向 和 折射 方向 。 这 里 我 们 只 需要 考虑 被 反射 
的 光线 ， 而 折射 光线 已 经 在 之 前 的 得 反 映 项 中 考虑 过 了 。 当 然 ， 微 面 
元 理论 也 仅仅 是 真实 世界 的 散射 的 一 种 近似 理论 ， 它 也 有 目 寻 的 缺 
陷 ， 仍 然 有 一 些 材质 是 无 法 使 用 微 面 元 理论 来 换 述 的 。 


假设 表面 法 线 为 mn， 这 些微 面 元 的 法 线 mm 并 不 都 等 mn， 因此 ， 不 
同 的 微 面 元 会 把 同一 入 射 方 向 的 光线 反射 到 不 同 的 方向 上 。 而 当 我 们 
计算 BRDF 时 ， 入 射 方向 1 和 观察 方向 v 都 会 被 给 定 ， 这 意味 着 只 有 一 部 
分 微 面 元 反射 的 光线 才 会 进入 到 我 们 的 眼睛 中 ， 这 部 分 微 面 元 会 恰好 
把 光线 反映 到 方 同 v 上 ， 即 它们 的 法 线 m 等 于 Iv 的 一 半 ， 也 就 是 我 们 


一 直 看 到 的 半角 度 矢 量 h (half-angle vector， 也 被 称 为 half vector) ， 如 
图 18.6 (a) 所 示 。 


然而 ， 这 些 m = 六 的 微 面 元 反射 也 并 不 会 全 部 添加 到 BRDEF 的 计算 
中 。 这 是 因为 ， 它 们 其 中 一 部 分 会 在 入 射 方 回 上 上 被 其 他 微 面 元 挡住 
(shadowing) ， 如 图 18.6 (b) 所 示 ， 或 是 在 它们 的 反射 方向 v 上 被 其 
他 微 面 元 挡住 了 (masking) ， 如 图 18.6 (c) 所 示 。 微 面 元 理论 认为 ， 
所 有 这 些 被 遮挡 住 的 微 面 元 不 会 添加 到 高 光 反 射 项 的 计算 中 (实际 上 
它们 中 的 一 些 由 于 多 次 反射 仍然 会 被 我 们 看 到 ， 但 这 不 在 微 面 元 理论 
的 考虑 范围 内 ) 。 


基于 微 面 元 理论 的 这 些 假设 ，BRDF 的 高 光 反 射 项 可 以 用 下 面 的 形 
式 来 表示 : 


#0) 2 EIDGv, DD) 
PE 4n:Dan:v) 
(a) (b) (c) 


A 图 18.6 (a) ”那些 m =h 的 微 面 元 会 恰好 把 入 射 光 从 I 反射 到 vy 上， 只 有 这 部 分 微 面 元 才 可 以 添 
加 到 BRDF 的 计算 中 。 (b) 一 部 分 满足 (a) 的 微 面 元 会 在 方向 上 被 其 他 微 面 元 遮挡 住 ， 它 们 
不 会 接受 到 光照 ， 因 此 会 形成 阴影 。 (c) 还 有 一 部 分 满足 (a) 的 微 面 元 会 在 反射 方向 v 上 被 
其 他 微 面 元 挡住 ， 因 此 ， 这 部 分 反射 光 也 不 会 被 看 到 


这 就 是 著名 的 Torrance-Sparrow 微 面 元 模型 [5]。 上 面 的 式 子 看 起 来 
难以 理解 ， 实 际 上 其 中 的 各 个 项 对 应 了 我 们 之 前 讲 到 的 不 同 现 象 。 
D(h) 是 微 面 元 的 法 线 分 布 栈 数 (normal distribution function ， 

NDF) ， 它 用 于 计算 有 多 少 比例 的 微 面 元 的 法 线 满足 m=h， 只 有 这 首 
分 微 面 元 才 会 把 光线 从 访 向 反射 到 v 上 。GCWv 站 是 阴影 一 遮掩 函数 

(shadowing-masking function) ， 它 用 于 计算 那些 满足 m=h 的 微 面 元 
中 有 多 少 会 由 于 修 挡 而 不 会 被 人 眼看 到 ， 因 此 它 给 出 了 活跃 的 微 面 元 

(active microfacets) 所 占 的 浓度 ， 只 有 活跃 的 微 面 元 才 会 成 功 地 把 光 
线 反 射 到 观察 方向 上 。FU 站 则 是 这 些 活跃 微 面 元 的 菲 涅 尔 反 射 

(Fresnel reflectance) 函数 ， 它 可 以 告诉 我 们 每 个 活跃 的 微 面 元 会 把 
多 少 入 射 光 线 反 射 到 观察 方 同 上 ， 即 表示 了 反射 光线 占 入 射 光 线 的 比 
率 。 事 实 上 ， 现 实生 活 中 几乎 所 有 的 物体 都 会 表现 出 菲 涅 耳 现 象 ， 读 
者 可 以 在 一 篇 很 有 意思 的 文章 Everything has Fresnel 中 看 到 一 些 这 样 的 
例子 。 最 后 ， 分 母 4(nD(nv) 是 用 于 校正 从 微 面 元 的 局 部 空间 到 整体 宏观 
表面 数量 差异 的 校正 因子 。 


这 些 不 同 的 部 分 又 可 以 衍生 出 很 多 不 同 的 BRDF 实 现 。 例 如 ， 我 们 
之 前 学 习 的 Blinn-Phong 模 型 [7] 就 是 一 种 非常 简单 的 模型 ， 它 使 用 的 法 
线 分 布 函数 D( 门 为 : 


Dpiinn(h) = (n+ h)s0ss 
但 实际 上 Blinn-Phong 模 型 并 不 能 真实 地 反映 很 多 真实 世界 中 物体 


的 微 面 元 法 线 反 射 分布 ， 因此， 很 多 更 加 复杂 的 分 布 画 数 被 提 了 出 
来 ， 例 如 GGX[3]、Beckmann[4] 等 。 同 样 ， 阴 影 -让 描画 数 G(Lv,h) 也 有 


很 多 相关 工作 被 提 了 出 来 ， 例 如 Smith 模 型 [6]。 这 些 数学 模型 都 是 为 了 
更 加 接近 使 用 光学 测量 仪 右 测量 出 来 的 真实 物体 的 反射 分 布 数据 。 


尽管 存在 很 多 基于 物理 的 BRDF 模 型 ， 但 在 真实 的 电影 或 游戏 制作 
中 ， 我 们 希望 在 直观 性 和 物理 可 信和 度 之 间 找 到 一 个 平衡 点 ， 使 得 实现 
的 BRDF 既 可 以 让 美工 人 员 直 观 地 调 市 各 个 参数 ， 而 义 有 一 定 的 物理 可 
信和 度 。 当 然 ， 有 时 候 为 了 满足 直观 性 我 们 不 得 不 牺牲 一 定 的 物理 特 
性 ， 得 到 的 BRDF 可 能 不 是 严格 基于 物理 原理 的 。 


在 下 面 的 内 容 中 ， 我 们 给 出 Unity 5 使 用 的 实现 。 


18.1.5 ”Unity 中 的 PBS 实 现 


在 之 前 的 内 容 中 ， 我 们 提 到 了 Unity 5 的 PBS 实 际 上 是 受 Disney 的 
BRDF[2] 的 局 发 。 这 种 BRDEF 最 大 的 好 处 之 一 就 是 很 直观 ， 只 需要 提供 
一 个 万 能 的 Shader 束 可 以 让 美工 人 员 通 过 调整 少量 参数 来 泻 染 绝 大 部 分 
常见 的 材质 。 我 们 可 以 在 Unity 内 置 的 UnityStandardBRDF.cginc 文 件 中 
找到 它 的 实现 。 


总 体 来 说 ，Unity 5 一 共 实 现 了 两 种 PBS 模 型 。 一 种 是 基于 GGX 模 
型 的 ， 另 一 种 则 是 基于 归 一 化 的 Blinn 一 Phong 模 型 的 。 这 两 种 模型 使 用 
了 不 同 的 公式 来 计算 高 光 反 射 项 中 的 法 线 分 布 范 数 D(h) 和 阴影 一 遮掩 
函数 G(Lv,h)。 在 默认 情况 下 ，Unity 5.2 使 用 基于 归 一 化 后 的 Blinn- 
Phong 模 型 来 实现 基于 物理 的 泻 染 (但 在 Unity 5.3 及 以 后 版 本 中 ， 默 认 
将 使 用 GGX 模 型 ， 这 和 很 多 其 他 主流 引擎 的 选择 一 致 ) 。 


如 前 面 所 讲 ，Unity 使 用 的 BRDF 中 的 漫 反 射 项 使 用 的 公式 如 下 : 


baseColor 
A 


faif (l,») = (1+ (Fp90 -DG —n: D+ (Fpo0 — D1 —n.v)) 


其 中 ,，Fpo90 = 0.5 + 2roughness(h. DD)? 


下 面 我 们 给 出 基于 GGX 模 型 的 高 光 反 射 项 公式 。 对 于 基于 归 一 化 
的 Blinn-Phong 模 型 的 高 光 反 射 公 式 ， 读 者 可 以 从 
UnityStandardBRDF.cginc 文 件 找 到 它们 的 实现 。 


Unity 对 高 区 反射 项 中 的 法 线 分 布 范 数 D( 由 采用 了 GGX 模 型 的 一 种 
实现 : 


Cx2 


人 
xz(@ Dn.h+1) 
其 中 Q = roughness” 


明 影 -遮掩 函数 G(Lv,h) 则 使 用 了 一 种 由 GGX 簿 生出 的 Smith-Schlick 
模型 


1 
SD 
roughness” 
kK= 一 
其 中 ， 2 


而 菲 涅 耳 反 映 FU 问 则 使 用 了 图 形 学 中 经 党 使 用 的 Schlick 菲 涅 耳 近 
似 等 式 [7]: 


F(Lh)= Fo+(1 -Fol -1.hy 


其 中 Fo 表示 高 光 反 射 系数 ， 在 Unity 中 往往 指 的 就 是 高 光 反 射 颜 
色 。 


上 上 面 的 公式 对 于 某 些 读者 来 说 可 能 星 深 难 情 ， 实 际 上 ， 这 些 数 学 
大 多 来 源 于 对 真实 世界 中 各 种 物体 的 BRDF 的 分 析 ， 再 使 用 不 同 的 数学 
模型 进行 盟 近 。 如 采访 者 想 要 深入 了 解 基于 物理 的 演 染 的 数学 原理 和 
应 用 的 话 ， 可 以 参见 本 章 的 扩展 阅读 部 分 。 


邓 运 的 是 ， 在 Unity 中 我 们 不 需要 目 己 在 Shader 中 实现 上 面 的 公 
式 ，Unity 已 经 为 我 们 提供 了 现成 的 基于 物理 着 色 的 Shader， 也 了 束 是 
Standard Shader ° 


18.2 Unity 5 的 Standard Shader 


当 我 们 在 Unity 5 中 新 创建 一 个 模型 或 是 新 创建 一 个 材质 时 ， 其 默 
认 使 用 的 着 色 需 都 是 一 个 名 为 Standard 的 着 色 需 。 这 个 Standard Shader 
就 使 用 了 我 们 之 前 所 讲 的 基于 物理 的 洽 染 。 


Unity 支 持 两 种 流行 的 基于 物理 的 工作 流程 ， 金 属 工作 流 《Metallic 
workflow) 和 高 光 反 射 工作 流 (Specular workflow) 。 其 中 ,金属 工 
作 流 是 默认 的 工作 流程 ， 对 应 的 Shader 为 Standard Shader。 而 如 果 想 要 
使 用 高 光 反 射 工作 流 ， 束 需要 在 材质 的 Shader 下 拉 框 中 选择 Standard 

(Specular setup) 。 需 要 注意 的 是 ， 通 常 来 讲 ， 使 用 不 同 的 工作 流 可 以 
实现 相同 的 效果 ， 只 是 它们 使 用 的 参数 不 同 而 已 。 金 属 工作 流 也 不 意 
味 看 它 只 能 模拟 金属 类 型 的 材质 ， 金 属 工作 流 的 名 字 来 源 于 它 定 义 了 
材质 表面 的 金属 值 (是 金属 类 型 的 还 是 非 金属 类 型 的 ) 。 高 光 反 射 工 
作 流 的 名 字 来 源 于 它 可 以 直接 指定 表面 的 高 光 反 射 颜色 (有 很 强 的 高 


光 反 射 还 是 很 弱 的 高 光 反 射 ) 等 ， 而 在 金属 工作 流 中 这 个 颜色 需要 由 
漫 反射 颜色 和 金属 值 衍 生 而 来 。 在 实际 的 游戏 制作 过 程 中 ， 我 们 可 以 
选择 目 己 更 侦 好 的 工作 流 来 制作 场景 ， 这 更 多 的 是 个 人 喜好 的 问题 。 
当然 也 可 以 同时 混用 两 种 工作 流 。 


在 下 面 的 内 容 中 ， 我 们 用 Standard Shader 来 统称 Standard 和 Standard 
(Specular setup) 着 色 器 。Unity 提 供 的 Standard Shader 允 许 让 我 们 只 使 
用 这 一 种 Shader 来 为 场景 中 所 有 的 物体 进行 着 色 ， 而 不 需要 考虑 它们 是 
否 是 金属 材质 还 是 塑料 材质 等 ， 从 而 大 大 减少 我 们 不 断 调整 材质 参数 
所 人 花费 的 上 时间。 


18.2.1 ”它们 是 如 何 实现 的 


Standard 和 Standard (Specular setup) 的 Shader 源 代码 可 以 在 Unity 
内 置 的 builtin_shaders-5.x/ DefaultResourcesExtra 文 件 夹 中 找到 ， 这 些 
Shader 依 赖 于 builtin_shaders-5.x/CGIncludes 文 件 夹 中 定义 的 一 些 头 文 
件 。 这 些 相关 的 头 文件 的 名 称 大 多 类 似 于 UnityStandardXXX.cginc， 其 
中 定义 了 和 PBS 相 天 的 各 个 函数 、 结 构 体 和 安 等 。 表 18.1 列 出 了 这 些 头 
文件 的 名 称 以 及 它们 的 主要 用 处 。 


表 18.1 


定义 了 表面 着 色 器 使 用 的 标准 光照 琅 数 和 相关 的 结构 
UnityPBSLighting.cginc 体 等 ， 如 LightingStandardSpecular 函 数 和 
SurfaceOutputStandardSpecular 结 构 体 


定义 了 Standard 和 Standard (Specular setup) Shader 使 用 
的 顶点 / 片 元 着 色 器 和 相关 的 结构 体 、 辅 助 画 数 等 ， 


如 vertForwardBase、fragForwardBase、 
MetallicSetup、SpecularSetup 范 数 和 


UnityStandardCore.cginc 


VertexOutputForwardBase、FragmentCommonData 结 构 


体 


实现 了 Unity 中 基于 物理 的 泻 染 技术 ， 定 义 了 
BRDF1_Unity_PBS、BRDF2_Unity_PBS 和 
BRDF3_Unity_PBS 等 函数 ， 来 实现 不 同 平台 下 的 
BRDF 


UnityStandardBRDF.cginc 


声明 了 Standard Shader 使 用 的 相关 输入 ， 包 括 shader 使 
属性 和 顶点 着 色 需 的 输入 结构 体 VertexInput， 并 

了 基于 这 些 输入 的 辅助 函数 ， 如 TexCoords 、 
Albedo、Occlusion、SpecularGloss 等 函数 


UnityStandardInput.cginc 


Standard Shader 使 用 的 一 些 辅助 画 数 ， 将 来 可 
到 UnityCG.cginc 文 件 中 


UnityStandardUtils.cginc 


yStandard Shader 的 相关 配置 ， 例 如 默认 情况 下 关闭 

简化 版 的 PBS 实 现 (将 UNITY_STANDARD_SIMPLE 

UnityStandardConfig.cginc 设 为 0) ， 以 及 使 用 基于 归 一 化 的 Blinn-Phong 模 型 而 
非 GGX 模 型 来 实现 BRDF (将 UNITY_BRDF_GGX 设 
为 0) 


定义 了 Standard Shader 中 “LightMode” 为 “Meta” 的 Pass 
(用 于 提取 光照 纹理 和 全 局 光照 的 相关 信息 ) 使 用 的 
顶点 / 片 元 着 色 器 ， 以 及 它们 使 用 的 输入 /输出 结构 体 


UnityStandardMeta.cginc 


定义 了 Standard Shader 
1“LightMode” 为 “ShadowCaster” 的 Pass (用 于 投射 阴 
影 ) 使 用 的 顶点 / 片 元 着 色 器 ， 以 及 它们 使 用 的 输入 / 
输出 结构 体 


UnityStandardShadow.cginc 


| ， ， ”| 定义 了 和 全 局 光照 相关 的 函数 ， 如 
UnityGloballllumination.cginc 
UnityGloballllumination 范 数 


我 们 可 以 打开 Standard.shader 和 StandardSpecular.shader 文 件 来 分 析 
Unity 是 如 何 实现 基于 物理 的 泻 染 的 。 总 体 来 讲 ， 这 两 个 Shader 的 代码 
， 第 一 个 SubShader 使 用 的 计 
算 更 加 复杂 ， 主 要 针对 非 移 平台 (通过 jpragma exclude_renderers 
gles 代 码 来 排除 GLES 平 台 ; ， 并 定义 了 前 向 泻 染 路 径 和 延迟 泻 染 路 径 
使 用 的 Pass， 以 及 用 于 投 册 了 明 影 和 提取 元 数据 的 Pass; 第 二 个 
SubShader 定 义 了 4 个 Pass， 其 中 两 个 Pass 用 于 前 问 泻 染 路 人 径 ， 一 个 Pass 
用 于 投射 阴影 ， 厌 一 个 Pass 用 于 提取 元 数据 ， 该 SubShader 主 要 针对 移 
动 平台 。 a StandardSpecular.shader 最 大 的 不 同 之 处 在 
于 ， 它 们 在 设置 BRDEF 的 输入 时 使 用 了 不 同 鸭 函数 来 设置 各 个 参数 一 一 
基于 金属 工作 流 的 Standard Shader 使 用 MetallicSetup 芳 数 来 设置 各 个 参 
数 ， 基 于 高 光 反 射 工 作 流 的 Standard (Specular setup) Shader 使 用 


SpecularSetup 范 数 来 设置 。MetallicSetup 和 SpecularSetup 范 数 均 在 
UnityStandardCore.cginc 文 件 中 被 定义 。 图 18.7 给 出 了 Standard Shader 中 
用 于 前 癌 泻 染 路 径 的 典型 实现 ， 这 是 由 对 内 置 文 件 的 分 析 所 得 。 


从 图 18.7 中 可 以 看 出 ， 两 个 Pass 的 代码 大 体 相同 ， 只 是 ForwardBase 
Pass 进 行 了 更 多 的 光照 计算 ， 例 如， 计算 全 局 光照 、 自 发 光 等 效果 ， 这 
些 计算 只 需要 在 物体 的 整个 演 染 过 程 中 计算 一 次 即 可 ， 因 此 不 需要 在 
FarwardAdd Pass 中 再 计算 一 次 ， 这 与 我 们 之 前 学 习 前 问 泻 染 时 的 经 验 
一 致 。 


18.2.2 ”如 何 使 用 Standard Shader 


我 们 之 前 提 到 ，Unity 5 的 Standard Shader 适 用 于 各 种 材质 的 物体 ， 
但 是 ， 我 们 应 该 如 何 使 用 Standard Shader 来 得 到 不 同 的 材质 效果 呢 ? 


我 们 首先 来 回答 一 个 问题 ， 为 什么 不 同 的 材质 看 起 来 是 如 此 不 同 
呢 ? 这 需要 回顾 我 们 在 18.1 市 讲 到 的 内 容 。 我 们 知道 ， 材 质 和 光 的 交互 
可 以 分 成 漫 反 射 和 高 区 反射 两 个 部 分 ， 其 中 漫 反 射 对 应 了 次 表面 散射 
的 结果 ， 而 高 光 反 射 则 对 应 了 表面 反射 的 结果 。 通 过 对 金属 材质 和 非 
金属 材质 的 分 析 ， 我 们 可 以 得 到 它们 的 漫 反 射 和 高 光 反 射 的 一 些 特 
点 。 


- 
ForwardBase Pass 


顶点 着 色 器 
vertForwardBase 
(UnityStandardCore.cginc) 


Vertexinput 一 加 | 
(UnityStandardInput.cginc) 


| 


片 元 着 色 器 
fragForwardBase 
(UnityStandardCore.cginc) 


VertexOutputForwardBase 一 | 
(UnityStandardCore.cginc) 


- 


计 和 vetxOuputEowyandese 由 的 和 个 坟 是 信 。 
顶点 位 置 Pos、 纹 理 坐 标 tex、 视 角 位 置 


1 ee 
省 
eyeVec、 栅 影 玲 标 等 。 


onl 

光源 、 阴 影 、 遮 挡 、 全 局 光照 等 信息 ， 为 调用 BRDF 做 准备 ; 
3. 调用 UNITY_BRDF PBS 函数 tng cginc 文 件 中 被 定 
义 ) 计算 基于 物理 的 泻 染 结 

4. 调用 UNITY_BRDF_GI 函 数 EUnityPBSLighting. cginc 文 件 中 被 定 
加 全 局 光照 妥 的 加 宣 染 结 

自发 光 效 

雾 效 模拟 如果 开 局 的 放 ) ; 

最 后 的 


添 
添加 
添加 
返回 像素 值 


广 
ForwardAdd Pass 


顶点 着 色 器 元 冰 
~ Vertexinput ”一 vertForwardAdd VertexOutputForwardAdd 一 mm fragForwardAdd 
(UnityStandardInput.cginc) (UnityStandardCore.cginc) (UnityStandardCore.cginc) (UnityStandardCore.cginc) 


is 使 用 SPeculorSetup 眉 MetolicSetuP 等 夯 数 来 污 充 BRDF 的 输入 结构 
人 mentCommonDoaota 

2. 计算 光源 和 阴影 等 信息 ， 为 调用 BRDF 做 准备 ; 
3. 调用 UNITY_BRDF_PBS EUgnine cginc 文 件 中 被 定义 ) 函 
数 计算 基于 物理 的 泻 染 结 
4. 柠 加 委 黎 搞 扫 ys) ， 
5. 返回 最 后 的 像素 值 。 


计算 VertexOutputForwardAdd 中 的 各 个 变量 值 ， 如 
顶点 位 置 Pos、 纹 理 坐 标 tex、 视 角 位 置 eyeVec、 
阴影 坐标 等 。 


图 18.7 ”Standard Shader 中 前 向 泻 染 路 径 使 用 的 Pass (简化 版 本 的 PBS 使 用 了 
VertexOutputBaseSimple 等 结构 体 来 代替 相应 的 结构 体 ) 


1. 金属 材质 


。 几乎 没有 漫 反 射 ， 因 为 所 有 被 吸收 的 光 都 会 被 目 由 电子 立刻 转化 
为 其 他 形式 的 能 量 ; 

。 有 非常 强烈 的 高 光 反 射 ; 

。 局 光 反 射 通常 是 有 颜色 的 ， 例 如 金子 的 反光 颜色 为 黄色 。 


2. 非 金属 材质 


。 大 多 数 角 度 高 光 反 射 的 强度 比较 弱 ， 但 在 掠 射 角 时 高 光 反 射 强度 
反而 会 增强 ， 即 菲 涅 耳 现 象 ; 
。 高 光 反 射 的 颜色 比较 单一 ; 


。 漫 反射 的 颜色 多 种 多 样 。 


但 真实 的 材质 大 多 混合 了 上 面 的 这 些 特性 ，Unity 提 供 的 工作 流 就 
是 为 了 更 加 方便 地 让 我 们 针对 以 上 特性 来 调整 材质 效果 。 在 Unity 官 方 
提供 的 示例 项 目 Shader Calibration Scene (https://www. 
assetstore.unity3d.com/en/#!/content/25422) 中 ，Unity 提 供 了 两 个 非常 有 
参考 价值 的 校准 表格 ， 如 图 18.8 所 示 ， 它 们 分 别 对 应 了 金属 工作 流 和 高 
光 反 冉 工 作法 使 用 的 参考 属性 值 ， 来 方便 我 们 针对 不 同类 型 的 材质 来 
调整 参数 。 读 者 也 可 以 在 本 书 资源 的 Assets/Textures/Chapter18/Charts 文 
件 夹 找到 这 两 张 校准 表格 。 


SHADER CALIBRATION SCENE 2 1 SHADER CALIBRATION SCENE 
METALLIC VALUE CHARTS 了 SPECULAR VALUE CHARTS 
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SMOOTHNESS A 
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SMOOTHNESS A SC Ms 


METALS 


METALS : EE | 和 大 本 入 Fe 


古人 
9e99e9e9999999 二 南 南 南 南 南 志 用 用 志和 


NOMMETALS 


图 18.8 Unity 提 供 的 校准 表格 。 左 边 : 金属 工作 流 使 用 的 校准 表格 ， 右 边 : 高 光 反 射 工作 
流 使 用 的 校准 表格 


> 


我 们 以 图 18.8 的 左 图 ， 即 金属 工作 流 使 用 的 校准 表格 为 例 ， 来 解释 
如 何 使 用 这 张 校准 表格 来 指导 我 们 调整 材质 。 在 本 书 资源 的 场景 文件 
Scene_18_2 中 ， 我 们 提供 了 一 个 疹 单 的 场景 来 展示 不 同 材 质 的 结 采 。 
图 18.9 显 示 了 场景 结果 以 及 物体 使 用 的 材质 。 需 要 注意 的 是 ， 读 者 需要 
在 Edit ~- Project Setttings 一 Player- Other Settings ~ Color Space 中 选择 
Linear 才 可 以 得 到 和 图 18.9 中 相同 的 效果 ， 这 是 因为 基于 物理 的 泻 染 需 
要 使 用 线性 空间 ( 详 见 18.3.4 节 ) 来 进行 相关 计算 。 


全 


工作 流 来 实现 不 同类 型 的 材质 。 左 边 的 球体 : 金属 材质 ， 右 边 的 球体 : 塑 
料 材 质 


> 
el 


图 18.9 ”使 用 金 


在 金属 工作 流 中 ， 材 质 面板 中 的 Albedo 定 义 了 物体 的 整体 颜色 ， 
它 通 常 就 是 我 们 视觉 上 认为 的 物体 颜色 。 从 亮度 来 看 ， 非 金属 材质 的 
亮度 范围 通常 在 50~243， 而 金属 材质 的 亮度 一 般 在 186 255 之 间 。 
Unity 给 的 校准 表格 ( 见 图 18.8 中 的 左 图 ) 中 还 给 出 了 一 些 非 金属 材质 
和 金属 材质 使 用 的 示例 Albedo 属 性 值 ， 我 们 可 以 直接 使 用 这 些 示 例 值 
来 作为 材质 属性 。 当 然 ， 也 可 以 直接 使 用 一 张 纹理 作为 材质 的 Albedo 
值 。 在 我 们 的 例子 中 ， 我 们 把 金属 材质 (图 18.9 中 的 左边 的 球体 ) 的 


Albedo 设 为 银灰 色 ， 而 把 塑料 材质 〈 图 18.9 中 的 右边 的 球体 ) 的 设 为 蓝 
绿色 。 材 质 面 板 中 的 下 一 个 属性 是 Metallic， 它 定义 了 该 物体 表面 看 起 
来 是 否 更 像 金 属 或 非 金属 。 同 样 ， 我 们 也 可 以 使 用 一 张 纹理 来 采样 得 
到 表面 的 Metallic 值 ， 此 时 该 纹理 中 的 R 通 道 值 将 对 应 了 Metallic 值 。 在 
我 们 的 例子 中 ， 我 们 把 金属 材质 的 Metallic 值 设 为 1， 表 明 该 物体 几乎 完 
全 是 一 个 金属 材质 ， 同 时 把 塑料 材质 的 Metallic 值 设 为 0， 表 明 该 物体 几 
乎 没有 任何 金 必 特性。 最 后 一 个 重要 的 材质 属性 是 Smoothness， 它 是 
上 一 个 属性 Metallic 的 附属 值 ， 定 义 了 从 视觉 上 来 看 该 表面 的 光滑 程 
度 。 如 果 我 们 在 设置 Metallic 属 性 时 使 用 的 是 一 张 纹理 ， 那 么 这 张 纹理 
的 A 通道 就 对 应 了 表面 的 Smoothness 值 (此 时 纹理 的 GB 通道 则 被 忽 
略 ) 。 在 我 们 的 例子 中 ， 我 们 把 金属 材质 的 Smoothness 值 设置 为 相对 较 
大 的 0.7， 表 明 该 金属 表面 比较 光滑 ， 而 把 塑料 材质 的 Smoothness 值 设 
为 0.4， 表 明 该 塑料 表明 比较 粗糙 。 


高 光 反 射 工作 流 使 用 的 面板 和 上 述 金 属 工 作 流 使 用 的 基本 相同 ， 
只 是 使 用 了 不 同 含义 的 Albedo 属 性 ， 并 使 用 Specular 代 稚 了 上 壕 的 
Metallic 必 性。 在 高 光 反 射 工作 流 中 ， 材 质 的 Albedo 属 性 定义 了 表面 的 
漫 反 射 强度 。 对 于 非 金属 材质 ， 它 的 值 通 常 仍然 是 视觉 上 认为 的 物体 
颜色 ， 但 对 于 金属 材质 ，Albedo 的 值 通常 非常 接近 黑色 (还 记得 吗 ， 
金属 材质 几乎 不 存在 次 表面 散射 的 现象 ) 。 高 光 反 射 工作 流 的 Specular 
属性 则 定义 了 表面 的 高 光 反 射 强度 。 非 金属 材质 通常 使 用 一 个 灰 度 值 
范围 在 0~55 的 深 灰 色 来 作为 Specular 值 ， 表 明 非 金属 材质 的 高 光 反 射 
较 弱 。 人 金属 材质 则 通 第 会 使 用 视觉 上 认为 的 该 金属 的 颜色 作为 它 的 
Specular 值 。Specular 属 性 同样 也 有 一 个 子 属性 Smoothness， 它 定义 了 
从 视觉 上 来 看 该 表面 的 光滑 程度 。 和 上 面 的 金属 工作 流 类 似 ， 如 采 使 


用 了 一 张 纹理 来 为 Specular 必 性 赋值 ， 那 么 纹理 的 RGB 通道 对 应 了 
Specular 必 性 值 ，A 通 道 对 应 了 Smoothness 属 性 值 。 


上 壕 材 质 属 性 都 属于 材质 面板 中 的 Main Maps 部 分 ， 除 了 上 壕 提 
到 的 属性 外 ，Main Maps 还 包含 了 其 他 材质 属性 ， 例 如 ， 切 线 空 间 下 的 
法 线 纹理 、 遮 挡 纹 理 、 自 发 光 纹 理 等 。Main Maps 部 分 的 下 面 还 有 一 个 
Secondary Maps 的 属性 部 分 ， 这 个 部 分 的 属性 是 用 来 定义 额外 的 细 市 
信息 ， 这 些 细 节 通 常会 直接 绘制 在 Main Maps 的 上 面 ， 来 为 材质 提供 更 
多 的 微 表 面 或 细节 表现 。 


除了 上 述 属 性 ， 我 们 还 可 以 为 Standard Shader 选 择 它 使 用 的 渲染 模 
式 ， 即 材质 面板 上 的 Render Mode 选 项 。Standard Shader 文 持 4 种 演 染 
模式 ， 分 别 是 Opaque、Cutout、Fade 和 Transparent。 其中，Opaque 用 于 
泻 染 最 常见 的 不 透明 物体 ， 这 也 是 默认 的 泻 染 模 式 。 对 于 像 玻璃 这 样 
的 材质 ， 我 们 可 以 选择 Transparent 模 式 ， 在 这 个 泻 染 模 式 下 ，Albedo 属 
性 的 A 通道 用 于 控制 材质 的 透明 度 。 而 在 Cutout 泻 染 模 式 下 ，Albedo 属 
性 中 纹理 的 A 通道 会 成 为 一 个 掩 码 纹理 ， 而 它 的 子 属性 Alpha Cutoff 将 
是 透明 度 测 试 时 使 用 的 辣 值 。Fade 模 式 和 Transparent 模 式 是 类 似 的 ， 不 
同 的 是 ， 在 Transparent 模 式 下 ， 当 材质 的 透明 值 不 断 降 低 时 ， 它 的 反射 
仍然 能 被 保留 ， 而 在 Fade 模 式 下 ， 该 材质 的 所 有 演 染 效果 都 会 逐渐 从 
屏幕 上 淡出 。 


需要 注意 的 是 ， 尽 管 Standard Shader 的 材质 面板 有 许多 可 供 调 节 的 
属性 ， 但 我 们 不 用 担心 由 于 没有 使 用 一 些 属性 而 会 对 性 能 有 所 影响 。 
Unity 在 背后 已 经 进行 了 高 度 优化 ， 在 我 们 生成 可 执行 程序 时 ，Unity 会 


检查 哪些 属性 没有 被 使 用 到 ， 同 时 也 会 针对 目标 平台 进行 相应 的 优 
1 


从 上 面 的 内 容 可 以 看 出 ， 要 想得到 可 信和 度 更 高 的 渲染 结果 ， 我 们 
需要 对 不 同 材 质 使 用 合适 的 属性 值 ， 尤 其 是 一 些 重要 的 属性 值 ， 例 如 
Albedo、Metallic 和 Specular。 当 然 ， 想 要 让 整个 场景 的 泻 染 结 采 令 人 满 
意 ， 尤 其 包含 了 复杂 光照 的 场景 ， 仅 仅 有 这 些 使 用 了 PBS 的 材质 是 不 够 
的 ， 我 们 需要 使 用 Unity 提 供 的 其 他 一 些 重要 的 技术 ， 例 如 HDR 格 式 的 
Skybox、 全 局 光照 、 反 射 探 针 、 光 照 探 针 、HDR 和 屏幕 后 处 理 等 。 


18.3 一 个 更 加 复杂 的 例子 


在 本 章 最 后 ， 我 们 将 以 一 个 更 加 复杂 的 、 基 于 物理 泻 染 的 场景 结 
束 ， 该 场景 对 应 了 本 书 资源 中 的 Scene_18_3。 本 场景 使 用 的 元 素 大 多 
来 源 于 Unity 官 方 的 示例 项 目 Viking Village (https://www. 
assetstore.unity3d.com/jp/#!/content/29140) ， 读 者 可 以 下 载 完 整 的 项 目 
来 更 加 深入 地 学 习 Unity 中 的 PBS 。 


图 18.10 展 示 了 在 不 同 光照 条 件 下 本 例 实现 的 效果 。 需 要 注意 的 
是 ， 读 者 需要 在 Edit -Project Setttings ~ Player ~ Color Space 中 选择 
Linear 才 可 以 得 到 和 图 18.9 中 相同 的 效果 ， 这 是 因为 基于 物理 的 泻 染 需 
要 使 用 线性 空间 〈 详 见 18.3.4 节 ) 来 进行 相关 计算 。 


A 图 18.10 在 Unity 5 中 使 用 基于 物理 的 泻 染 技术 ， 场 景 在 不 同 光照 下 的 泻 染 结果 


那么 ， 基 于 物理 的 Standard Shader 是 如 何 与 其 他 Unity 功 能 相互 配合 
得 到 这 样 的 场景 呢 ? 


18.3.1 设置 光照 环境 


我 们 首先 需要 为 场景 设置 光照 环境 。 在 默认 情况 下 ，Unity 5 中 一 
个 新 创建 的 场景 会 包含 一 个 默认 的 Skybox。 在 本 例 中 ， 我 们 使 用 一 个 
目 定 义 的 Skybox 来 代替 默认 值 。 做 法 是 ， 打 开 Window Lighting， 在 
Scene 标 签 页 下 把 本 例 使 用 的 SunsetSkyboxHDR 拖 中 到 Skybox 选 项 中 ， 
如 图 18.11 所 示 。 


本 例 中 的 Skybox 使 用 了 一 个 HDR 格 式 的 Cubemap， 这 与 我 们 之 前 
在 10.1 节 中 制作 Skybox 时 使 用 的 纹理 不 同 。 这 需要 解释 HDR (High 
Dynamic Range) 的 相关 知识 ， 我 们 将 在 18.4.3 闻 更 加 详细 地 介绍 HDR 
的 原理 和 应 用 。 但 在 这 里 ， 我 们 只 需要 知道 ， 使 用 HDR 格 式 的 Skybox 
可 以 让 场景 中 物体 的 反射 更 加 真实 ， 有 利于 我 们 得 到 更 加 可 信 鸭 光照 
并 雪 


我 们 还 可 以 设置 场景 使 用 的 环境 光照 ， 这 些 环境 光照 可 以 对 场景 
中 所 有 的 物体 表面 产生 影响 。 在 图 18.11 所 示 的 设置 面板 中 ， 我 们 可 以 
选择 环境 光照 的 来 源 (Ambient Source 选 项 ) ， 是 来 自 于 场景 使 用 的 
Skybox， 还 是 使 用 渐变 值 ， 亦 或 是 有 某 个 固定 的 颜色 。 我 们 还 可 以 设置 
环境 光照 的 强度 (Ambient Intensity 人 参数 ) ， 如 果 想 要 场景 中 的 所 有 物 
体 不 接受 任何 环境 光照 ， 可 以 把 该 值 设 为 0。 在 使 用 了 Standard Shader 
的 前 提 下 ， 如 果 我 们 关闭 场景 中 所 有 的 光源 ， 并 把 环境 光照 的 强度 设 
为 0， 场 景 中 的 物体 仍然 可 以 接受 一 些 光 照 ， 如 图 18.12 中 的 左 图 所 示 。 
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图 18.11 光照 面板 下 的 Scene 标签 页 


也 


A 图 18.12 左边: 当 关 闭 场 景 中 的 所 有 光源 并 把 环境 光照 强度 设 为 0 后 ， 使 用 了 Standard 


Shader 的 物体 仍然 具有 光照 效果 ， 右 边 : 在 左 图 的 基础 上 ， 把 反射 源 设 置 为 宝 ， 使 得 物体 不 接 
受 任何 默认 的 反射 信息 


那么 ， 这 些 光 照 是 从 哪里 来 的 呢 ? 答案 就 是 反射 。 默 认 的 反射 源 

(Reflection Source 选 项 ) 是 场景 使 用 的 Skybox。 如 果 我 们 不 想 让 场景 
中 的 物体 接受 任何 默认 的 反射 光照 ， 可 以 把 反射 源 设 置 为 目 定义 〈 即 
Custom) ， 并 把 自 定 义 的 Cubemap 保 留 为 空 即 可 〈 另 一 种 方式 是 直接 
把 场景 使 用 的 Skybox 设 置 为 空 ) ， 如 图 18.12 右 图 所 示 。 但 为 了 得 到 更 
加 逼真 的 洽 染 结果 ， 我 们 通常 是 不 会 这 样 做 的 。 在 洽 染 实现 上 ， 即 便 
场景 中 没有 任何 光源 ，Unity 在 内 部 仍然 会 调用 ForwardBase Pass (假设 
使 用 的 是 前 向 泻 染 路 径 的 话 ) ， 并 使 用 反射 的 光照 信息 来 填充 光源 信 
息 ， 再 进行 基于 物理 的 演 染 计算 。 读 者 可 以 通过 帧 调试 器 (Frame 
Debugger) 来 查看 演 染 过 程 。 需 要 注意 的 是 ， 这 里 设置 的 反射 源 是 默 
认 的 反射 源 ， 如 有 果 我 们 在 场景 中 添加 了 其 他 反射 探 针 (Reflection 
Probes， 见 18.3.2 节 ) ， 物 体 可 能 会 使 用 其 他 反射 源 。 当 默认 反射 源 是 
Skybox 时 ，Unity 会 由 场景 使 用 的 Skybox 生 成 一 个 Cubemap ， 我 们 可 以 
通过 Resolution 选 项 来 控制 它 每 个 面 的 分 辨 挛 。 


除了 Standard Shader 外 ，Unity 还 引入 了 一 个 重要 的 流水 线 一 一 实时 
全 局 光照 (Global llumination，GI) 流水 线 。 使 用 GI， 场 景 中 的 物体 
不 仅 可 以 受 直 接 光 照 的 影响 ， 还 可 以 接受 间接 光照 的 影响 。 直 接 光 照 
指 的 是 那些 直接 把 光照 射 到 物体 表面 的 光源 ， 在 本 书 之 前 的 章节 中 ， 
我 们 使 用 的 都 是 直接 光照 来 泻 染 场景 中 的 物体 。 但 在 现实 生活 中 ， 物 
体 还 会 受到 间接 光照 的 影响 。 例 如 ， 想 象 一 个 红色 墙壁 旁边 放置 了 一 
个 球体 ， 尽 管 墙壁 本 身 不 发 光 ， 但 球体 徘 近 墙 的 一 面 仍 会 有 少许 的 红 
色 ， 这 是 由 于 红色 墙壁 把 一 些 间接 光照 投射 到 了 球体 上 。 在 Unity 中 ， 
间接 光照 指 的 瓯 是 那些 被 场景 中 其 他 物体 反 绰 的 区 ， 这 些 间 接 光 照会 
受 反 弹 光 的 表面 的 颜色 影响 〈 例 如 之 前 例子 中 的 红色 的 墙壁 ) ， 这 些 
表面 会 在 反弹 光线 时 把 目 有 号 表面 的 颜色 添加 到 反射 光 的 计算 中 。 在 
Unity 5 中 ， 我 们 可 以 使 用 这 些 直 接 光 照 和 间接 光照 来 创建 更 加 真实 的 
视觉 效果 。 


下 面 ， 我 们 首先 设置 场景 使 用 的 直接 光照 一 一 一 个 平行 光 。 在 
PBR (Physically Based Rendering) 中 ， 想 要 让 演 染 效果 更 加 真实 可 
信 ， 我 们 需要 保证 平行 光 的 方向 和 Skybox 中 的 太阳 或 其 他 光源 的 位 置 
一 致 ， 使 得 物体 产生 的 光照 信息 可 以 与 Skybox 互 相 吻合 。 有 时 ， 我 们 
可 能 会 使 用 一 张 炎 斑纹 理 (Flare Texture) 来 模拟 太阳 等 光源 ， 此 时 我 
们 同样 需要 确保 平行 光 的 方向 与 光斑 纹理 的 位 置 一 怪 。 与 之 类 似 的 还 
有 平行 光 的 颜色 ， 我 们 应 该 尽量 让 平行 光 的 颜色 和 场景 环境 相 匹配 。 
例如 ， 在 图 18.10 的 左 图 中 ， 场 景 的 光照 环境 为 日 落 时 分 ， 因 此 平行 光 
的 颜色 为 浅黄 色 ， 如 图 18.13 所 示 ， 而 在 图 18.10 的 右 图 中 ， 场 景 的 光照 
环境 更 接近 傍晚 ， 此 时 平行 光 的 其 色 为 淡 鉴 色 。 我 们 还 在 Skybox 的 材 
质 面板 上 调整 天 空 的 旋转 角度 及 曝光 度 ， 来 调整 场景 的 背景 。 


在 平行 光 面 板 的 烘焙 选项 〈 即 Baking) 中 ， 我 们 选择 了 Realtime 模 
式 ， 这 意味 着 ， 场 景 中 受 平行 光影 响 的 所 有 物体 都 会 进行 实时 的 光照 
计算 ， 当 光源 或 场景 中 其 他 物体 的 位 置 、 旋 转角 度 等 发 生变 化 时 ， 场 
景 中 的 光照 结果 也 会 随 之 变化 。 然 而 ， 实 时 光照 往往 需要 较 大 的 性 能 
消 耗 ， 对 于 移动 平台 这 样 货源 比较 短缺 的 平台 ， 我 们 可 以 选择 Baked 梗 
式 ， 此 时 ，Unity 会 把 该 光源 的 光照 效 采 烘焙 到 一 张 光照 纹理 
(ightmap) 中 ， 这 样 我 们 就 不 用 实时 为 物体 计算 复杂 的 光照 ， 而 只 需 
要 通过 纹理 采样 来 得 到 光照 结果 。 选 择 烘焙 模式 的 缺点 在 于 ， 如 来 场 
景 中 的 物体 发 生 了 移动 ， 但 是 它 的 阴影 等 光照 效果 并 不 会 发 生变 化 。 
烘焙 选项 中 的 Mix 模 式 则 允许 我 们 宴 合 使 用 实时 模式 和 烘 灌 模式 ， 它 会 
把 场景 中 的 静态 物体 〈 即 那些 被 标识 为 Static 的 物体 ) 的 光照 烘焙 到 光 
照 纹 理 中 ， 但 仍然 会 对 动态 物体 产生 实时 光照 。 


Unity 5 引入 了 实时 间接 光照 的 功能 ， 在 这 个 系统 下 ， 场 景 中 的 直 
接 光 照会 在 场景 中 各 个 物体 之 间 来 回 反射 ， 产 生 间 接 光 照 。 正 如 我 们 
之 前 讲 到 的 ， 间 接 光 照 可 以 让 那些 没有 直接 被 光源 照 亮 的 物体 同样 可 
以 接受 到 一 定 的 光照 信息 ， 这 些 光 照 是 由 它 周围 的 物体 反射 到 它 的 表 
面 上 的 。 当 一 条 光线 从 光源 被 发 射出 来 后 ， 它 会 与 场景 中 的 一 些 物体 
相交 ， 人 第 一 个 和 光线 相交 的 物体 受到 的 光照 即 为 直接 光照 。 当 得 到 和 直 
接 光 照 在 该 物体 上 的 光照 结果 后 ， 该 物体 还 会 继续 反射 该 光线 ， 从 而 
对 其 他 物体 产生 间接 光照 。 此 后 与 该 光线 相交 的 物体 ， 束 会 受到 间接 
光照 的 影响 ， 同 时 它们 也 会 继续 反射 。 当 经 过 多 次 反射 后 ， 该 光线 最 
后 完全 消失 。 这 些 间 接 光 照 的 强度 是 由 GI 系 统计 算得 到 的 默认 亮度 
值 。 图 18.13 所 示 的 光源 面板 中 的 Bounce Intensity 参 数 可 以 让 我 们 调 而 
这 些 间 接 光 照 的 强度 。 当 我 们 把 它 设 为 0 时 ， 意 味 着 一 条 光线 仅 会 和 一 
个 物体 相交 ， 不 再 被 继续 反射 ， 也 就 是 说 ， 场 景 中 的 物体 只 会 受到 直 


接 光 照 的 影响 。 图 18.14 显 示 了 Bounce Intensity 分 别 为 0 和 8 时 ， 场 景 的 
泻 染 结果 ， 注 意 其 中 阴影 部 分 的 细 市 。 


加 bohe [PE 
Type 


| 入 
tabn9 eeeee Me 
Color te ， 
mensity 一 -一 15 
Sownce imensity Om 1 
ShadowType LsohShadows 3) 

Soengeh pee © | 
Resolution [we Ouiay yeng wr 
Blas OO 
Moral fias yr [4 
Cooie None (Texture) 全 
Cooidie Size 10 
Deaw Halo DD 
flare INonelfare |o 
Rerder Mode be 时 
Coling Mask Leven D 


A 图 18.14 左边 : 将 Bounce Intensity 设 置 为 0， 物 体 不 再 受到 间接 光照 的 影响 ， 木 屋内 阴影 部 


分 的 可 见 细节 很 少 。 右 边 : 将 Bounce Intensity 设 为 8， 阴 影 部 分 的 细节 更 加 清楚 


除了 上 述 调整 单个 光源 的 间接 光照 强度 ， 我 们 也 可 以 对 整个 场景 
的 间接 光照 强度 进行 调整 。 这 是 按照 图 18.11 所 示 的 光照 面板 来 实现 
的 。 在 光照 面板 的 Scene 标签 页 下 ， 我 们 可 以 调整 General GI 参数 块 中 的 
Bounce Boost 参 数 来 控制 场景 中 反射 的 间接 光照 的 强度 ， 它 会 和 单个 光 
源 的 Bounce Intensity 参 数 来 一 起 控制 间接 光照 的 反射 强度 。 除 此 之 外 ， 


把 Indirect Intensity 参 数 调 大 同样 可 以 增 大 间接 光照 的 强度 。 需 要 注意 的 
征 ， 间 接 光 照 还 有 可 能 来 目 一 些 目 发 区 的 物体 。 


18.3.2 ”放置 反射 探 针 


回忆 我 们 在 10.1 和 中 讲 到 的 环境 映射 ， 在 实时 泻 染 中 ， 我 们 经 名 会 
使 用 Cubemap 来 模拟 物体 的 反射 效果 。 例 如 ， 在 赛车 游戏 中 ， 我 们 需要 
对 车 吴 或 车 窗 使 用 反射 映射 的 撤 术 来 模拟 它们 的 反光 材质 。 然 而 ， 如 
采 我 们 永远 使 用 同一 个 Cubemap ， 那 么 ， 当 赛车 周围 的 场景 发 生 较 大 变 
化 时 ， 吏 很 容易 出 现 “ 罕 帮 镜 头 ”， 因 为 车 喘 或 千 窗 的 环境 反射 并 没有 
随 看 环境 变化 而 发 生变 化 。 一 种 解决 办 法 是 可 以 在 脚本 中 控制 何 时 生 
成 从 当前 位 置 观察 到 的 Cubemap ， 而 Unity 5 为 我 们 提供 了 一 种 更 加 方便 
的 途径 ， 即 使 用 反射 探 针 (Reflection Probes) 。 反 射 探 针 的 工作 原理 
和 光照 探 针 (Light Probes) 类 似 ， 它 允许 我 们 在 场景 中 的 特定 位 置 上 
对 整个 场景 的 环境 反射 进行 采样 ， 并 把 采样 结 采 存储 在 每 个 探 针 上 。 
当 游 戏 中 包公 反映 效果 的 物体 从 这 些 探 针 附近 经 过 时 ，Unity 会 把 从 这 
些 邻 近 探 针 存 储 鸭 反射 结果 传递 给 物体 使 用 易 反射 纹理 。 如 有 果 物 体 周 
围 存在 多 个 反射 探 针 ，Unity 还 会 在 这 些 反 射 结 果 之 间 进 行 插值 ， 来 得 
到 平滑 渐变 的 反射 效果 。 实 际 上 ，Unity 会 在 场景 中 放置 一 个 默认 的 反 
射 探 针 ， 这 个 反射 探 针 存 储 了 对 场景 使 用 上 Skybox 的 反射 结 有 末 ， 来 作 
为 场景 的 环境 光照 ( 见 18.3.1 节 ) 。 如 果 我 们 需要 让 场景 中 的 物体 包含 
额外 的 反射 效果 ， 就 需要 放置 更 多 的 反射 探 针 。 


反射 探 针 同样 有 3 种 类 型 : Baked， 这 种 类 型 的 反射 探 针 是 通过 提 
前 烘焙 来 得 到 该 位 置 使 用 的 Cubemap 的 ， 在 游戏 运行 时 反射 探 针 中 存储 
的 Cubemap 并 不 会 发 生变 化 。 需 要 注意 的 是 ， 这 种 类 型 的 反射 探 针 在 烘 
焙 时 同样 只 会 处 理 那 些 静 态 物 体 〈 即 那些 被 标识 为 Reflection Probe 


Static 的 物体 ) ; Realtime， 这 种 类 型 则 会 实时 更 新 当前 的 Cubemap， 并 
且 不 受 静 态 物 体 还 是 动态 物体 的 影响 。 当 然 ， 这 种 类 型 的 反射 探 针 需 
要 伦 费 更 多 的 处 理 时 间 ， 因 此 ， 在 使 用 时 应 当 非 常 小 心 它们 的 性 能 。 
牌 运 的 是 ，Unity 人 允许 我 们 从 脚本 中 通过 触发 来 精确 控制 反射 探 针 的 更 
新 ;最 后 一 种 类 型 是 Custom， 这 种 类 型 的 探 针 既 可 以 让 我 们 从 编辑 器 
中 烘焙 它 ， 也 可 以 让 我 们 使 用 一 个 目 定义 的 Cubemap 来 作为 反射 映射 ， 
但 自 定 义 的 Cubemap 不 会 被 实时 更 新 。 


我 们 在 本 廊 使 用 的 场景 中 放置 了 3 个 反射 探 和 针 ， 它 们 的 类 型 都 古 
Baked (前 提 是 我 们 把 场景 中 的 物体 标识 成 了 Static) 。 使 用 反射 探 针 前 
后 的 对 比 效 采 如 图 18.15 所 示 。 


需要 注意 的 是 ， 在 放置 反射 探 针 时 ， 我 们 选取 的 位 置 并 不 是 任意 
的 。 通 向 来 说 ， 反 射 探 针 应 该 被 放置 在 那些 具有 明显 反射 现象 的 物体 
的 和 旁边， 或 是 一 些 墙 角 等 容易 发 生 遮 挡 的 物体 周围 。 在 本 例 使 用 的 场 
景 中 ， 木 屋内 的 盾牌 具有 比较 明显 的 反射 效 末 ， 而 丑 牌 本 号 又 被 木屋 
人 遮挡， 因此， 其 中 一 个 反射 探 针 的 位 置 融 在 丑 牌 附近 。 当 我 们 放置 好 
探 针 后 ， 我 们 还 需要 为 它们 定义 每 个 探 针 的 影响 区 域 ， 当 反射 物体 进 
入 到 这 个 区 域 后 ， 反 射 探 针 就 会 对 物体 的 反射 产生 影响 。 通 常情 况 
下 ,反射 探 时 的 影响 区 域 之 间 往 往 会 有 所 重合， 例如 ， 本 例 中 盾牌 附 
近 的 反射 探 针 和 男 外 两 个 (一 个 在 木屋 前 方 ， 一 个 在 木屋 后 方 ) 的 影 
啊 区 域 都 有 所 重要 。 此 时 ，Unity 会 计算 反射 物体 的 包围 盒 与 这 些 重 县 
区 域 的 交叉 部 分 ， 并 据 此 来 选择 使 用 的 反射 映射 。 如 和 朱 当 前 的 目标 平 
台 使 用 的 是 SM 3.0 及 以 上 的 话 ，Unity 还 可 以 允许 我 们 在 这 些 互 相 重 县 
的 反射 探 针 之 间 进 行 混 合 ， 来 实现 平缓 的 反射 过 渡 效 末 。 


使 用 Unity 内 置 的 反射 探 针 的 另 一 个 好 处 是 ， 我 们 可 以 模拟 互相 反 
射 (interreflections) 。 我 们 曾 在 10.1 节 中 讲 到 使 用 传统 的 Cubemap 方 
法 无 法 模拟 互相 反射 的 效 末 。 例 如 ， 假 设 场 景 中 有 两 面 互相 面对面 的 
镜子 ， 在 理想 情况 下 ， 它 们 不 仅 会 反射 目 己 对 面 的 那 面 镜子 ， 也 会 反 
射 那 面 镜子 里 反射 的 图 像 。 只 要 反射 光线 没有 被 完全 吸收 ， 反 射 束 会 
一 直 进 行 下 去 。 要 实现 这 种 效果 ， 束 需要 追踪 光线 的 反射 轨迹 ， 这 是 
传统 的 反射 方法 所 无 法 实现 的 。Unity 5 引入 的 GI 系 统 让 这 种 效果 变 成 
了 可 能 ， 我 们 在 本 书 资源 的 Scene_18_3_2 场 景 中 展示 了 这 样 的 一 个 例 


子 ， 如 图 18.16 所 示 。 我 们 可 以 在 图 18.16 中 看 到 ， 两 个 金属 反射 的 图 像 
包 侣 了 两 次 互相 反射 的 效 末 。 


A 图 18.15 左边 : 未 使 用 反射 探 针 。 右 边 : 在 场景 中 放置 了 两 个 反射 探 针 ， 注 意 墙 上 的 盾牌 


与 左 图 的 差别 


A 图 18.16 ”使 用 反射 探 针 实现 相互 反射 的 效果 


在 图 18.16 所 示 的 场景 中 ， 我 们 在 每 个 金属 球 的 位 置 处 放置 了 一 个 
反射 探 针 ， 并 把 每 个 金属 球 上 的 Mesh Renderer 组 件 中 的 Reflection 
Probes 设 置 为 Simple， 这 样 保证 它们 只 会 使 用 离 它 们 最 近 的 一 个 反射 探 
针 。 默 认 情 况 下 ， 反 射 探 针 只 会 捕捉 一 次 反射 ， 也 驶 是 说 ， 左 边 金 属 
球 使 用 的 反射 探 针 只 会 捕捉 到 由 右边 的 金属 球 第 一 次 反射 过 来 的 光 
线 。 但 在 理想 情况 下 ， 反 射 过 来 的 光线 会 继续 被 左边 的 金属 球 反 射 ， 
并 对 右边 的 金属 球 造 成 影响 。Unity 人 允许 我 们 控制 物体 之 间 这 样 来 回 反 
射 的 次 数 ， 这 可 以 通过 改变 图 18.11 中 的 Reflection Bounces 参 数 来 实 
现 。 在 图 18.16 所 示 的 场景 中 ， 我 们 把 该 值 设 为 了 2。 


然而 ， 正 如 本 市 一 开始 所 提 到 的 ， 使 用 反射 探 针 往往 会 需要 更 多 
的 计算 时 间 。 这 些 探 针 实际 上 也 是 通过 在 它 的 位 置 上 放置 一 个 摄像 
机 ， 来 泻 染 得 到 一 个 Cubemap。 如 果 我 们 把 反弹 次 数 设置 的 很 大 ， 或 十 
使 用 实时 渔 染 ， 那 么 这 些 探 针 很 可 能 会 造成 性 能 瓶颈 。 更 多 关于 如 何 
优化 反射 探 针 以 及 它 的 高 级 用 法 ， 读 者 可 以 参见 Unity 的 官方 手册 
(http://docs.unity3d.com/Manual/ReflectionProbes.html) 。 


18.3.3 ”调整 材质 


要 得 到 真实 可 信 的 演 染 效果 ， 我 们 需要 为 场景 中 的 物体 指定 合适 
的 材质 。 需 要 再 次 提醒 读者 的 是 ， 基 于 物理 的 渲染 并 不 意味 着 一 定 要 
模拟 像 照片 真实 的 效果 。 基 于 物理 的 演 染 更 多 的 好 处 在 于 ， 可 以 让 我 
们 的 场景 在 各 种 光照 条 件 下 都 能 得 到 令 人 满意 的 效果 ， 同 时 不 需要 频 
索 地 调整 材质 参数 。 


在 Unity 中 ， 要 想 和 全 局 光照 反射 探 针 等 内 置 功 能 民 好 地 配合 来 
得 到 出 色 的 演 染 结果 ， 就 需要 使 用 Unity 内 置 的 Standard Shader。 我 们 已 
经 在 18.2.2 廊 中 学 习 了 如 何 针对 不 同类 别 的 物体 来 调整 它们 使 用 的 材质 
属性 。 在 本 例 中 ， 我 们 使 用 了 更 复杂 的 纹理 和 模型 ， 它 们 都 来 目 于 
Unity 官 方 的 示例 项 目 Viking Village。 这 些 材 质 可 以 为 读者 制作 自己 的 
材质 提供 一 些 参考 ， 例 如 ， 场 景 中 所 有 物体 都 使 用 了 高 光 反 射 纹理 

(Specular Texture) 、 遮 挡 纹 理 (Occlusion Texture) 、 法 线 纹理 
(Normal Texture) ， 一 些 材质 还 使 用 了 细节 纹理 来 提供 更 多 的 细 市 表 
现 。 


18.3.4 ”线性 空间 


在 使 用 基于 物理 的 演 染 方法 泻 染 整个 场景 时 ， 我 们 应 该 使 用 线性 
空间 (Linear Space) 来 得 到 最 好 的 泻 染 效果 。 默 认 情况 下 ，Unity 会 
使 用 伽 马 空间 (Gamma Space) ， 如 有 果 要 使 用 线性 空间 的 话 ， 我 们 需要 
在 Edit 一 Project Settings ~ Player 一 Other Settings - Color Space 中 选择 
Linear 先 项。 图 18.17 显 示 了 分 别 在 线性 空间 和 伽 马 空间 下 场景 的 泻 染 结 
果 。 


A 图 18.17 左边 : 在 线性 空间 下 的 泻 染 结果 。 右 边 : 在 伽 马 空间 下 的 泻 染 结果 


从 图 18.17 中 可 以 看 出 ， 使 用 线性 空间 可 以 得 到 更 加 真实 的 效 末 。 
但 它 的 缺点 在 于 ， 需 要 一 些 硬件 支持 来 实现 线性 计算 ， 但 一 些 移动 平 
台 对 它 的 文 持 并 不 好 。 这 种 情况 下 ， 我 们 往往 只 能 退 而 求 其 次 ， 远 择 
伽 马 空 间 进行 浑 染 和 计算 。 


那么 ， 线 性 空间 、 伽 马 空 间 到 底 是 什么 意思 ? 为 什么 线性 空间 可 
以 得 到 更 加 真实 的 效果 呢 ? 这 就 需要 介绍 伽 马 校正 〈Gamma 
Correction) 的 相关 内 容 了 。 实 际 上 ， 当 我 们 在 默认 的 伽 马 空间 下 进行 
演 染 计算 时 ， 由 于 使 用 了 非 线性 的 输入 数据 ， 导 致 很 多 计算 都 是 在 非 
线性 空间 下 进行 的 ， 这 意味 着 我 们 得 到 的 结果 并 不 符合 真实 的 物理 期 
望 。 除 此 之 外 ， 由 于 输出 时 没有 考虑 显示 絮 的 显示 伯 蕊 的 影响 ， 会 寻 
致 泻 染 出 来 的 画面 整体 偏 瞳 ， 总 古 和 真实 世界 不 像 。 


尽管 在 Unity 中 我 们 可 以 通过 之 前 所 说 的 步 又 直接 选择 在 线性 空间 
进行 泻 染 ，Unity 会 在 背后 为 我 们 照顾 好 一 切 ， 但 了 解 伽 马 校 正 的 原理 
对 我 们 理解 泻 染 计算 有 很 大 帮助 ， 读 者 可 以 在 18.4.2 节 找到 更 多 的 解 


18.4 答疑 解 惑 


在 上 面 的 内 容 中 ， 我 们 首先 介绍 了 了 PBS 实现 的 数学 和 理论 基础 ， 并 
简单 概括 了 Unity 中 Standard Shader 的 实现 原理 ， 以 及 如 何 使 用 它 来 为 不 
同类 型 的 物体 调整 适合 它们 的 材质 参数 。 随 后 ， 我 们 通过 一 个 更 加 复 
杂 的 场景 ， 来 展示 如 何在 Unity 中 使 用 环境 光照 、 实 时 光源 、 反 里 探 针 
以 及 Standard Shader 来 演 染 一 个 基于 物理 泻 染 的 场景 。 但 我 们 相信 ， 读 
者 在 读 完 后 仍 有 很 多 困惑 ， 考 虑 到 内 容 的 连贯 性 ， 我 们 未 能 在 文中 对 
某 些 概念 进行 展开 。 在 本 方 中 ， 我 们 将 对 一 些 重 要 的 概念 进行 更 为 深 
入 地 解释 。 


18.4.1 什么 是 全 局 光照 


在 上 面 的 内 容 中 ， 我 们 可 以 发 现 全 局 光照 对 得 到 真实 的 泻 染 结 
有 大 举足轻重 的 作用 。 全 局 光照 ， 指 的 束 古 模拟 光线 是 如 何在 场景 中 
传播 的 ， 它 不 仅 会 考虑 那些 直接 光照 的 结果 ， 还 会 计算 光线 被 不 同 的 
物体 表面 反 冉 而 产生 的 间接 光照 。 在 使 用 基于 物理 的 着 色 技 术 时 ， 当 
泻 染 表面 上 一 点 时 ， 我 们 需要 计算 该 点 的 半球 范围 内 所 有 会 反射 到 观 
察 方 同 的 入 射 光线 的 光照 结果 ， 这 些 入 射 光线 中 就 包 售 了 直接 光照 和 
间接 光照 。 


通 肖 来 讲 ， 这 些 间接 光照 的 计算 是 非常 耗 时 间 的 ， 通 前 不 会 用 在 
实时 洽 染 中 。 一 个 传统 的 方法 十 使 用 光线 人 退路， 来 退 趴 场景 中 每 一 条 
重要 的 区 线 的 传播 路 径 。 使 用 光线 追 踩 能 得 到 非常 出 色 的 画面 效 采 ， 
因此 ， 被 大 量 应 用 在 电影 制作 中 。 但 是 ， 这 种 方法 往往 需要 大 量 时 间 
才能 得 到 一 帧 ， 并 不 能 满足 实时 的 要 求 。 


Unity 采 用 了 Enlighten 解 决 方案 来 让 全 局 光照 能 够 在 各 种 平台 上 有 
不 错 的 性 能 表现 。 事 实 上 ，Enlighten 也 已 经 被 集成 在 虚幻 引擎 (Unreal 
Engine) 中 ， 它 已 经 在 很 多 3A 大 作 中 展现 了 自身 强大 的 泻 染 能 力 。 总 
体 来 讲 ，Unity 使 用 了 实时 + 预计 算 的 方法 来 模拟 场景 中 的 光照 。 其 中 ， 
实时 光照 用 于 计算 那些 直接 光源 对 场景 的 影响 ， 当 物体 移动 时 ， 光 照 
也 会 随 之 发 生变 化 。 但 正如 我 们 之 前 所 说 ， 实 时 光照 无 法 模拟 光线 被 
多 次 反射 的 效果 。 为 了 得 到 更 加 真实 的 泻 染 效 订 ，Unity 又 引入 了 预计 
算 光 照 的 方法 ， 使 得 全 局 光照 甚至 在 一 些 高 端的 移动 设备 上 也 可 以 达 
到 实时 的 要 求 。 


预计 算 光 照 包 售 了 我 们 常见 的 光照 烘焙 ， 也 区 ® 古 指 我 们 把 光源 对 
场景 中 静态 物体 的 光照 效 末 提前 烘焙 到 一 张 光 照 纹 理 中 ， 然 后 把 这 张 
光照 纹理 直接 贴 在 这 些 物体 的 表面 ， 来 得 到 光照 效果 。 这 些 光 照 纹理 
不 仅 存 储 了 直接 光照 的 结 有 末 ， 还 包含 了 那些 由 物体 反射 得 到 的 间接 访 
照 。 但 是 ， 这 些 光 照 纹理 无 法 在 游戏 运行 时 不 断 更 新 ， 也 就 是 说 ， 它 
们 十 静 仿 的 。 不 过 这 种 方法 的 确 为 移动 平台 的 复杂 光照 模拟 提供 了 一 
个 有 效 途 径 。 以 上 提 到 的 这 些 技术 很 多 读者 都 已 非 党 熟悉， 并 可 能 
经 在 实际 工作 中 大 量 使 用 了 它们 。 


由 于 静态 的 光照 烘焙 无 法 在 光照 条 件 改变 时 更 新 物体 的 光照 效 
果 ， 因 此 ，Unity 使 用 了 预计 算 实时 全 局 光照 (Precomputed Realtime 
GD 为 我 们 提供 了 一 个 解决 途径 ， 来 动态 地 为 场景 实时 更 新 复杂 的 光 
照 结 果 。 正 如 我 们 之 前 看 到 的 ， 使 用 这 种 技术 我 们 可 以 让 场景 中 的 物 
体 包 售 丰 宇 的 全 局 光照 效 末 ， 例 如 多 次 反射 等 ， 并 且 这 些 计算 都 是 实 
时 的 ， 可 以 随 着 光源 和 物体 的 移动 而 发 生变 化 。 这 是 使 用 之 前 的 实时 
光照 或 烘 炒 光照 所 无 法 实现 的 。 


那么 ， 这 些 是 如 何 实现 的 呢 ? 它们 实际 上 都 利用 了 一 个 事实 
一 旦 物体 和 光源 的 位 置 被 固定 了 ， 这 些 物体 对 光线 的 反弹 路 径 以 及 漫 
反映 光 照 (我 们 假设 漫 反 射 光照 在 各 个 方向 的 分 布 是 相同 的 ) 也 是 固 
定 的 ， 也 就 古 说 是 和 摄像 机 无 关 的 。 因 此 ， 我 们 可 以 使 用 预计 算 方法 
来 把 这 些 物 体 之 间 的 天 系 提前 计算 出 来 ， 而 在 实时 运行 时 ， 只 要 光源 
的 位 置 (光源 的 颜色 是 可 以 实时 变化 的 ) 不 变 ， 即 便 改 变 了 光源 颜色 
和 强度 、 物 体 材质 属性 〈 指 的 是 漫 反 射 和 自发 光 相 关 的 属性 ) ， 这 些 
信息 惑 一 直 有 效 ， 不 需要 实时 更 新 。 在 预计 算 阶 段 ，Enlighten 会 在 由 
所 有 静态 物体 组 成 的 场景 上 ， 进 行商 化 的 “光线 奶 踩 过程。 在 这 个 过 
程 中 Enlighten 会 目 动 把 场景 分 割 成 很 多 个 子 系统 ， 它 并 不 是 为 了 得 到 
精确 的 光照 效果 ， 而 是 为 了 得 到 场景 中 物体 之 间 的 关系 。 需 要 注意 的 
征 ， 这 些 预 计算 都 是 在 静态 物体 上 进行 的 ， 因 此 ， 为 了 利用 上 述 的 预 
计算 方法 ， 我 们 至 少 需要 把 场景 中 的 一 个 物体 标识 为 Static (至 少 需 要 
把 Lightmap Static 勾 选 上 ) 。 一 个 例外 是 物体 的 高 光 反 射 ， 这 是 和 摄像 
机 的 位 置 相关 的 ，Unity 的 解决 方案 征 使 用 反射 控 针 ， 正 如 我 们 之 前 看 
到 的 那样 。 对 于 动 仿 移动 的 物体 来 说 ， 我 们 可 以 使 用 光照 探 针 来 模拟 
它 的 光照 环境 。 因 此 ， 在 实时 运行 时 ，Unity 会 利用 预计 算得 到 的 信息 
来 计算 光照 信息 ， 并 把 它们 存储 在 额外 的 光照 纹理 、 光 照 探 时 或 
Cubemap 中 ， 再 和 物体 材质 进行 必要 的 光照 计算 ， 得 到 最 后 的 演 梁 效 
果 。 


Unity 全 新 的 全 局 光照 解决 方案 可 以 大 大 提高 一 些 基于 PC/ 游 戏 机 等 
平台 的 大 型 游戏 的 画面 质量 ， 但 如 果 要 在 移动 平台 上 使 用 仍 需要 非常 
小 心 它 的 性 能 。 一 些 低 端 手机 古 不 适合 使 用 这 种 比较 复 淋 的 基于 物理 
的 演 染 ， 不 过 ，Unity 会 在 后 续 的 版 本 中 持续 更 新 和 优化 。 而 且 随 着 手 
机 硬件 的 发 展 ， 未 来 在 移动 平台 上 大 量 使 用 PBS 也 已 经 不 再 是 遥 不 可 及 


的 梦想 了 。 更 多 天 于 Unity 中 全 局 光照 的 内 容 ， 读 者 可 以 在 Unity 官 方 手 
册 的 全 局 光照 (http://docs.unity3d.com/Manual/GIIntro.html) 一 文中 找 
到 更 多 内 容 ， 本 章 最 后 的 扩展 阅读 部 分 也 会 给 出 更 多 的 学 习 资 料 。 
18.4.2 ”什么 是 伽 马 校正 

我 们 在 18.3.4 广 中 讲 到 ， 要 想 洽 染 出 更 符合 真实 光照 环境 的 场景 束 
需要 使 用 线性 空间 。 而 Unity 默 认 的 空间 是 伽 马 空间 ， 在 伽 马 空间 下 进 
行 演 染 会 导致 很 多 非 线 性 空间 下 的 计算 ， 从 而 引入 了 一 些 误差 。 而 要 
把 伽 马 空间 转换 到 线性 空间 ， 就 需要 进行 伽 马 校正 (Gamma 


Correction) 。 


相信 很 多 读 关 都 听 过 伽 马 校正 这 个 名 词 ， 但 对 于 伽 马 校 正 是 什 
人 Dee 。 伽 马 校 正中 的 多 
马 一 词 来 源 伽 马 曲 线 。 通 第 ， 伽 马 曲 线 的 表达 式 如 下 : 


Li = 上 


out 


其 中 指数 部 分 的 发 诗 就 是 伽 马 。 最 开始 的 时 候 ， 人 们 使 用 伽 马 曲 
线 来 对 拍摄 的 图 像 进行 伽 马 编码 (gamma encoding) 。 事 情 的 起 因 可 
以 从 在 真实 环境 中 招 摄 一 张 图 片 说 起 。 摄 像 机 的 原理 可 以 人 简化 为 ， 把 
i 〈 例 如 一 张 正 PG) 中 的 像素 。 如 
有 果 采 集 到 的 亮度 是 0， 像 素 就 是 0 亮度 是 1， 人 像素 
束 是 0.5。 ee 用 8 位 空间 来 存储 像素 的 每 个 通道 的 话 ， 这 意味 着 
0 一 1 区 间 可 以 对 应 256 种 不 同 的 亮度 值 。 但 是 ， 后 来 人 们 发 现 ， 人 眼 有 
一 个 有 趣 的 特性 ， 束 是 对 光 的 灵敏 度 在 不 同 亮度 上 是 不 一 样 的 。 在 正 
常 的 光照 条 件 下 ， 人 了 眼 对 较 暗 区 域 的 变化 更 加 敏感 ， 如 图 18.18 所 示 。 


< 一 一 看 起 来 基本 相同 一 一 > 


< 一 基本 相同 一 上 < 一 基本 


A 图 18.18 人 眼 更 容易 感知 暗部 区 域 的 变换 ， 而 对 较 亮 区 域 的 变化 比较 不 敏感 


图 18.18 说 明了 一 件 事 情 ， 亮 度 上 的 线性 变化 对 人 有 眼 感 知 来 说 是 非 
均匀 的 。Youtube 上 有 一 个 名 为 Color is Broken 的 非常 有 趣 的 视频 ， 在 
这 个 视频 中 ， 作 者 用 了 一 个 非常 生动 的 例子 来 说 明 这 个 现象 。 当 一 个 
屋子 的 光照 由 一 蕾 灯 增加 到 两 一 灯 的 时 候 ， 人 有 眼 对 这 种 亮度 变化 的 感 
知性 要 远 远 大 于 从 101 蒂 灯 增 加 到 102 余 灯 的 变化 ， 尽 管 从 物理 上 来 说 
这 两 种 变化 基本 是 相同 的 。 那 么 ， 这 和 之 前 讲 的 拍照 有 什么 关系 呢 ? 
如 有 果 使 用 8 位 空间 来 存储 每 个 通道 的 话 ， 我 们 仍然 把 0.5 亮 度 编 码 成 值 为 
0.5 的 像素 ， 那 么 暗部 和 亮 部 区 域 我 们 都 使 用 了 128 种 颜色 来 表示 ， 但 实 
际 上 ， 对 亮 部 区 域 使 用 这 么 多 颜色 是 种 存储 浪费 。 一 种 更 好 的 方法 
是 ， 我 们 应 该 把 把 更 多 的 空间 来 存储 更 多 的 暗部 区 域 ， 这 样 存储 空间 
束 可 以 被 充分 利用 起 来 了 。 摄 影 设备 如 果 使 用 了 8 位 空间 来 存储 照片 的 
话 ， 会 使 用 大 约 为 0.45 的 编码 伽 马 来 对 输入 的 亮度 进行 编码 ， 得 到 一 张 


编码 后 的 图 像 。 因此 ， 图 像 中 0.5 像 素 值 对 应 的 亮度 其 实 并 不 是 0.5， 而 
大 约 为 0.22。 这 是 因为 : 


0.5s0.220.45 


如 上 所 见 ， 对 拍摄 图 像 使 用 的 伽 马 编 码 使 得 我 们 可 以 充分 利用 图 
像 的 存储 空间 。 但 当 把 图 片 放 到 显示 器 里 显示 时 ， 我 们 应 该 对 图 像 再 
进行 一 次 解码 操作 ， 使 得 屏幕 输出 的 亮度 和 捕捉 到 的 亮度 是 符合 线性 
有 的。 这 时 ， 人 们 发 现 了 一 个 奇妙 的 巧合 一 一 CRT 显 示人 铝 本 里 几乎 已 经 目 
动 做 了 这 个 解码 操作 ! 这 又 从 何 说 起 呢 ? 在 早期 ，CRT (Cathode Ray 
Tube， 阴 极 射 线 管 ， 几乎 是 唯一 的 显示 设备 。 这 类 设备 的 显示 机 制 
是 ， 使 用 一 个 电压 缀 击 它 屏幕 上 的 一 种 图 层 ， 这 个 图 层 天 可 以 发 亮 ， 
我 们 就 可 以 看 到 图 像 了 。 但 CRT 显 示 如 有 一 个 特性 ， 它 的 输入 电压 和 显 
示 出 来 的 亮度 关系 不 是 线性 的 ， 也 就 是 说 ， 如 果 我 们 把 输入 电压 调 高 
两 倍 ， 屏 人 莫 亮度 并 没有 提高 两 倍 。 我 们 把 显示 句 的 这 个 合 马 曲 线 称 为 
显示 伽 马 (diplay gamma) 。 非 常 巧合 的 是 ，CRIT 的 显示 伽 马 值 大 约 
歼 是 编码 伽 马 的 倒数 。CRI 显 示 需 的 这 种 特性 ， 正 好 补偿 了 图 像 捕捉 设 
备 的 伽 马 曲线 ， 人 们 想 ,“ 天 呐 ， 太 棒 了 ， 我 们 不 需要 做 任何 调整 瓯 可 
以 让 拍摄 的 图 像 在 电脑 上 看 起 来 和 原来 的 一 样 了 ! ”虽然 现在 CRT 设 备 
很 少见 了 ， 并 且 后 来 出 现 的 显示 设备 有 痢 不 同 鸭 伽 马 啊 应 曲线 ， 但 
是 ， 人 们 仍 在 硬件 上 做 了 调整 来 提供 兼容 性 。 图 18.19 展 示 了 编码 伽 马 
和 显示 伽 马 在 图 像 捕 所 和 显示 时 的 作用 。 


编码 伽 马 显示 伽 马 
场景 亮度 一 一 一 一 > 像素 值 - -| 一 十 -> 像素 值 一 一 一 一 > 显示 的 亮度 


A 图 18.19 ”编码 伽 马 和 显示 伽 马 


随后 ， 微 软 联合 爱普生 、 惠 普 提 供 了 sRGB 颜 色 空 间 标准 ， 推 荐 显 
示 器 的 显示 伽 马 值 为 2.2， 并 配合 0.45 的 编码 伽 马 就 可 以 保证 最 后 伽 马 
曲线 之 间 可 以 相互 抵消 〈 因 为 2.2x0.45s1) 。 绝 大 多 数 的 摄像 机 、PC 和 
打印 机 都 使 用 了 上 壕 的 SRGB 标 准 。 


读 a 到 现在 ， 读 者 可 能 还 是 有 所 疑问 ， 这 和 渲染 有 什么 关系? 答案 
苹 天 系 很 大 。 事 实 上 ， 由 于 游戏 界 长 期 以 来 部 忽视 了 徊 号 校正 的 问 
题 ， 造 成 了 我 们 演 染 出 来 的 游戏 总 是 蜡 沉沉 的 ， 总 是 和 真实 世界 不 
像 。 由 于 编码 伽 马 和 显示 伽 马 的 存在 ， 我 们 一 不 小 心 王 可 能 在 非 线性 
空间 下 进行 计算 ， 或 是 使 得 输出 的 图 像 是 非 线性 的 。 


对 于 输出 来 说 ， 如 果 我 们 直接 输出 泻 染 结果 而 不 进行 任何 处 理 ， 
在 经 过 显示 器 的 显示 伯 马 处 理 后 ， 会 导致 图 像 整 体 偏 瞳 ， 出 现 失 真 的 
状况 。 我 们 在 本 书 资源 的 Scene_18 4 2_ a 显 示 了 伽 马 对 光照 效果 的 影 


响 。 在 场景 Scene_18_4_2_a 中 ， 我 们 放置 了 一 个 球体 ， 并 把 场景 中 的 环 
境 光 照 设 为 全 中 ， 再 把 平行 花 的 方 癌 设置 为 从 上 方 直接 射 到 球体 表 
面 ， 球 体 使 用 的 材质 为 内 置 的 漫 反 射 材质 。 图 18.20 显 示 了 在 伽 马 空 间 


和 线性 空间 下 的 渔 染 结果 。 


从 图 18.20 可 以 看 出 ， 伽 马 衬 间 下 的 浑 染 结 采 整体 侦 暗 ， 一 些 读者 
甚至 认为 这 看 起 来 更 加 正确 。 然 而 ， 实 际 此 时 屏幕 输出 的 亮度 和 球面 


的 光照 结果 并 不 是 线性 的 。 假 设 球面 上 有 一 点 A， 它 的 法 线 和 光线 方向 
成 606， 还 有 一 点 B， 它 的 法 线 和 光线 方向 成 90。。 那 么 ， 在 Shader 中 计 
算 漫 反射 光照 时 ， 我 们 会 得 出 A 的 输出 是 《0.5, 0.5, 0.5) ，B 的 输出 是 
(1.0, 1.0, 1.0) 。 在 图 18.20 的 左 图 中 ， 我 们 没有 进行 伽 马 校正 ， 
此 ， 由 于 显示 器 存在 显示 伽 马 就 3 引入 了 非 线 性 关系 ， 也 就 是 说 A 点 的 襄 
度 其 实 并 不 是 B 亮 度 的 一 半 ， 而 约 为 它 的 4。 在 图 18.20 的 右 图 中 ， 我 
们 使 用 了 线性 空间 ，Unity 会 在 把 像素 写 入 颜色 缓冲 前 进行 一 次 伽 马 校 
正 ， 来 抵消 屏幕 的 显示 伽 马 的 作用 ， 此 时 得 到 屏幕 亮度 才 是 真正 跟 像 
素 值 成 正比 的 。 


伽 马 的 存在 还 会 对 混合 造成 影响 。 在 场景 Scene_18_4_2_b 中 演示 
了 一 个 商 单 的 场景 来 说 明 这 个 现象 。 在 场景 Scene_18_4 2_b 中 ， 我 们 
放置 了 3 个 互相 重 伙 的 圆 ， 它 们 使 用 的 材质 均 为 商 单 的 透明 混合 材质 ， 
并 使 用 了 一 个 边界 模糊 的 圆 作为 输入 纹理 。 场 景 在 伽 马 空 间 和 线性 罕 


间 下 的 效果 如 图 18.21 所 示 。 


A 图 18.20 左边 : 伽 马 空间 下 的 泻 染 结果 ， 右 边 : 线性 空间 下 的 泻 染 结果 


A 图 18.21 左边 :; 伽 马 空间 下 的 混合 结果 ， 右 边 : 线性 空间 下 的 混合 结果 


在 独 18.21 志 儿 所 示 的 伽 马 空间 下 ， 我 们 可 以 看 到 在 绿色 和 红色 的 
混合 边界 处 出 现 了 不 正 利 的 蝠 色 渐 变 。 而 正确 的 寓 合 结 采 应 该 是 如 图 
18.21 右 边 图 所 示 的 从 绿色 到 红色 的 渐 要 。 除 此 之 外 ， 我 们 也 可 以 看 到 
图 18.21 左 边 图 中 交叉 的 边界 似乎 都 变 瞳 了 。 这 是 因为 在 混合 后 进行 输 
出 时 ， 显 示 亏 的 显示 伽 马 导致 接 颖 处 颜色 要 蜡 。 


实际 上 ， 洽 染 中 非 线 性 输入 最 有 可 能 的 来 源 整 古 纹理 。 为 了 充分 
利用 存储 空间 ， 大 多 数 图 像 文件 部 进行 了 提前 的 校正 ， 即 已 经 使 用 了 
一 个 编码 伽 马 对 像素 值 编码 。 但 这 意味 着 它们 是 非 线性 的 ， 如 果 我 们 
在 Shader 中 直接 使 用 纹理 采样 值 束 会 造成 在 非 线性 空间 的 计算 ， 使 得 结 
果 和 真实 世界 的 结果 不 一 致 。 我 们 在 使 用 多 级 渐 远 纹理 (mipmaps) 时 
也 需要 注意 。 如 有 果 纹 理 存储 在 非 线性 空间 中 ， 那 么 在 计算 多 级 渐 远 纹 
理 时 束 会 在 非 线 性 空间 里 计算 。 由 于 多 级 渐 远 纹理 的 计算 是 种 线性 计 


过程 ， 和 需要 对 菜 个 方形 区 域内 的 像素 取 平 均值 ， 这 样 
束 会 得 到 错误 的 结 末 。 正 确 的 做 法 是 ， 我 们 要 把 非 线 性 的 纹理 转换 到 
线性 空间 后 再 计算 多 级 渐 远 纹 理 。 


如 上 所 说 ， 伽 马 的 存在 使 得 我 们 很 容易 得 到 非 线 性 空间 下 的 渔 染 
结 采 。 在 游戏 泻 染 中 ， 我 们 应 该 保证 所 有 的 输入 都 被 转换 到 了 线性 至 
间 下 ， 并 在 线性 空间 下 进行 各 种 光照 计算 ， 最 后 在 输出 前 通过 一 个 编 
码 伽 马 进 行 伽 马 校正 后 再 输出 到 颜色 缓冲 中 。Untiy 的 闫 色 空 间 设 置 整 
可 以 满足 我 们 的 需求 。 当 我 们 选择 伽 马 空间 时 ， 实 际 上 残 是 “放任 模 
式 ”， 不 会 对 Shader 的 输入 进行 任何 处 理 ， 即 使 输入 可 能 是 非 线性 的 ; 
也 不 会 对 输出 像素 进行 任何 处 理 ， 这 意味 着 输出 的 像素 会 经 过 显示 器 
Ce 通常 表现 为 整个 场景 会 比较 民 

"当选 择 线性 空间 时 ，Unity 会 把 输入 纹理 设置 为 RGB 模式 ， 在 这 种 
pe, 硬件 在 对 纹理 进行 采样 时 会 目 动 将 其 转换 到 线性 空间 中 ; 并 
且 ，GPU 会 在 Shader 写 入 项 色 缓 冲 前 目 动 进 行 伽 马 校正 或 是 体 持 线性 在 
后 面 进行 伽 马 校正 ， 这 取决 于 当前 的 演 染 配置 。 如 有 果 我 们 开 司 了 HDR 
( 见 18.4.3 节 ) 的 话 ， 演 染 就 会 使 用 一 个 浮 点 精度 的 缓冲 。 这 些 缓冲 有 
足够 的 精度 不 需要 我 们 进行 任何 伽 马 校正 ， 此 时 所 有 的 混合 和 屏幕 后 
处 理 都 是 在 线性 空间 下 进行 的 。 当 洽 染 完成 要 写 入 显示 设备 的 后 备 组 
冲 区 (back buffer) 时 ， 再 进行 一 次 最 后 的 伽 马 校正 。 如 果 我 们 没有 使 
用 HDR， 那 么 Unity 丈 会 把 缓冲 设置 成 RGB 格式 ， 这 种 格式 的 缓冲 丈 像 
一 个 普通 的 纹理 一 样 ， 在 写 入 缓冲 前 需要 进行 伽 马 校正 ， 在 读 取 缓 剖 
时 需要 再 进行 一 次 解码 操作 。 如 果 此 时 开启 了 混合 〈 像 我 们 之 前 的 那 
样 ) ， 在 每 次 混合 时 ， 硬 件 会 首先 把 之 前 颜色 缓冲 中 存储 的 颜色 值 转 
换 回 线性 空间 中 ， 然 后 再 与 当前 的 颜色 进行 混合 ， 完 成 后 再 进行 伽 马 


公正 ， ee 。 这 里 需要 注意 ， 透 
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然而 ，Unity 的 线性 空间 并 不 是 所 有 平台 都 文 挂 的， 例如， 移动 平 
台 束 无 法 使 用 线性 空间 。 此 时 ， 我 们 整 需 要 自己 在 Shader 中 进行 伽 马 校 
正 。 对 非 线 性 输入 纹理 的 校正 代码 通常 如 下 : 


float3 diffuseCol = pow(tex2D( diffTex, texCoord ), 2.2 ); 
在 最 后 输出 前 ， 对 输出 像素 值 的 校正 代码 通常 如 下 面 这 样 : 


fragColor.rgb = pow(fragColor.rgb, 1.0/2.2); 
return fragColor; 


但 是 ， 手 工 对 输出 像素 进行 伽 马 校 正 会 在 使 用 混合 时 出 现 问题 。 
这 是 因为 ， 校 正 会 导致 写 入 颜色 缓冲 内 的 颜色 是 非 线 性 的 ， 这 样 混合 
忠 发 生 在 非 线 性 空间 中 。 一 种 解决 方法 是 ， 在 中 间 计 算 时 不 要 对 输出 
颜色 值 进行 伽 马 校正 ， 但 在 最 后 需要 进行 一 个 屏幕 后 处 理 操 作 来 对 最 
后 的 输出 进行 伽 马 校正 ， 也 就 是 说 我 们 需要 保证 伽 马 校 正 发 生 在 渔 染 
的 最 后 一 步 中 ， 但 这 可 能 会 造成 一 定 的 性 能 损耗 。 


你 会 说 ， 伽 马 这 么 麻烦 ， 什 么 时 候 可 以 舍弃 它 呢 ?如 果 有 一 天 我 
们 对 图 像 的 存储 空间 能 够 大 大 提升 ， 通 用 的 格式 不 再 是 8 位 时 ， 例 如 是 
32 位 时 ， 伽 马 也 许 就 会 消失 。 因 为 ， 我 们 有 足够 多 的 颜色 空间 可 以 利 
用 ,不 需要 为 了 充分 利用 存储 空间 进行 伽 马 编码 的 工作 了 。 这 就 是 我 
们 下 面 要 讲 的 HDR 。 


18.4.3 ”什么 是 HDR 


在 使 用 基于 物理 的 洽 染 时 ， 我 们 经 常会 听 到 一 个 名 词 束 是 HDR 。 
HDR 是 High Dynamic Range 的 缩写 ， 即 高 动态 范围 ， 与 之 相对 的 是 低 动 
态 范围 (Low Dynamic Range，LDR) 。 那 么 这 个 动态 范围 是 指 什么 
呢 ? 通俗 来 讲 ， 动 态 范 围 指 的 就 是 最 高 的 和 最 低 的 亮度 值 之 间 的 比 
值 。 在 真实 世界 中 ， 一 个 场景 中 最 亮 和 最 暗 区 域 的 范围 可 以 非常 大 ， 
例如 ， 太 阳 发 出 的 光 可 能 要 比 场景 中 某 个 影子 上 的 点 的 亮度 要 高 出 儿 
万 倍 ， 这 些 范 围 远 远 超 过 图 像 或 显示 需 能 够 显示 的 范围 。 通 种 在 显示 
设备 使 用 的 颜色 缓冲 中 每 个 通道 的 精度 为 8 位 ， 和 意味 着 我 们 只 能 用 这 
256 种 不 同 的 亮度 来 表示 真实 世界 中 所 有 的 亮度 ， 因 此 ， 在 这 个 过 程 中 
一 定 会 存在 一 定 的 精度 损失 。 早 期 的 拍摄 设备 利用 人 眼 的 特点 ， 使 用 
了 伽 马 曲线 来 对 捕 换 到 的 图 像 进行 编码 ， 尽 可 能 充分 地 利用 这 些 有 限 
的 存储 空间 ， 这 点 我 们 已 经 在 18.4.2 节 解释 过 了 。 然 而 ，HDR 的 出 现 给 
我 们 带 来 了 新 的 希望 ，HDR 使 用 远 远 高 于 8 位 的 精度 (如 32 位 ) 来 记录 
亮度 信息 ， 使 得 我 们 可 以 表示 超过 0 一 1 内 的 亮度 值 ， 从 而 可 以 更 加 精 
确 地 反映 真实 的 光照 环境 。 尽 管 我 们 最 后 还 是 需要 把 信息 转换 到 显示 
设备 使 用 的 LDR 内 ， 但 中 间 的 计算 却 可 以 让 我 们 得 到 更 加 真实 可 信和 的 
效果 。Nvidia 曾 总 结 过 使 用 HDR 进 行 演 染 的 动机 :让 亮 的 物体 可 以 真 的 
非常 之 ， 上 暗 的 物体 可 以 真 的 非常 瞳 ， 同 时 又 可 以 看 到 两 者 之 间 的 细 
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使 用 HDR 来 存储 的 图 像 被 称 为 高 动态 范围 图 像 (HDRI) ， 例 如 ， 
我 们 在 18.3 节 中 就 是 使 用 了 一 张 HDRI 图 像 来 作为 场景 的 Skybox 。 这 样 
的 Skybox 可 以 更 加 真实 地 反映 物体 周围 的 环境 ， 从 而 得 到 更 加 真实 的 
反射 效果 。 不 仅 如 此 ，HDR 对 与 光照 县 加 也 有 非常 重要 的 作用 。 如 果 
我 们 的 场景 中 有 很 多 光源 或 是 光源 强度 很 大 ， 那 么 一 个 物体 在 经 过 多 
次 光照 泻 染 县 加 后 最 终 得 到 的 光照 亮度 很 可 能 会 超过 1。 如 果 没 有 使 用 


HDR， 这 些 超 过 1 的 部 分 全 部 会 截取 到 1， 使 得 场景 丢失 了 很 多 亮 部 区 
域 的 细节 。 但 如 果 开 局 了 HDR， 我 们 就 可 以 保留 这 些 超过 范围 的 光照 
结果 ， 尽 管 最 后 我 们 仍然 需要 把 它们 转换 到 LDR 进 行 显示 ， 但 我 们 可 
以 使 用 色调 映射 (tonemapping) 技术 来 控制 这 个 转换 的 过 程 ， 从 而 允 
许 我 们 最 大 限度 地 保留 需要 的 亮度 细 订 。 


HDR 的 使 用 可 以 允许 我 们 在 屏幕 后 处 理 中 拥有 更 多 的 控制 权 。 例 
如 ， 我 们 常常 同时 使 用 HDR 和 Bloom 效 果 。 我 们 曾 在 12.5 节 解释 了 
Bloom 特 效 的 实现 原理 ，Bloom 效 果 需 要 检测 屏幕 中 亮度 大 于 某 个 国 什 
的 像素 ， 把 它们 提取 出 来 后 进行 模糊 ， 再 肢 加 a 到 原 图 像 中 。 但 是 ， 如 
果 不 使 用 HDR 的 话 ， 我 们 只 能 使 用 小 于 1 的 靖 值 来 提取 需要 的 像素 ， 但 
很 多 时 候 我 们 实际 上 是 需要 提取 那些 非常 亮 的 区 域 ， 例 如 车 窗 上 对 太 
阳 的 强烈 反光 。 由 于 没有 使 用 HDR， 这 些 值 实际 上 很 可 能 和 街 上 一 些 
颜色 偶 日 的 区 域 几 乎 一 样 ， 造 成 不 硕 望 的 区 域 也 会 出 现 汉 区 的 效果 。 
如 采 我 们 使 用 HDR， 这 些 就 都 可 以 解决 了 ， 我 们 只 需要 使 用 超过 1 的 国 
值 来 只 提取 那些 非常 腕 的 区 域 即 可 。 


总 体 来 说 ， 使 用 HDR 可 以 让 我 们 不 会 丢失 高 亮度 区 域 的 颜色 值 ， 
提供 了 更 真实 的 光照 效果 ， 并 为 一 些 屏 幕后 处 理 提供 了 更 多 的 控制 能 
力 。 但 HDR 也 有 目 喘 的 缺点 ， 首 先 由 于 使 用 了 浮 点 缓冲 来 存储 高 精度 
图 像 ， 不 仅 需 要 更 大 的 显存 空间 ， 浴 染 速度 会 变 慢 ， 除 此 之 外 ， 一 些 
硬件 并 不 支持 HDR。 而 且 一 旦 使 用 了 HDR， 我 们 无 法 再 利用 硬件 的 抗 
锯 资 功能。 事实 上 ， 在 Unity 中 如 果 我 们 同时 打开 了 硬件 的 抗 锯 资 (在 
Edit ~ Project Settings Quality ~” Anti Aliasing 中 打开 ) 和 摄像 机 的 
HDR，Unity 会 发 出 警告 来 所 示 我 们 由 于 开局 了 抗 饥 齿 ， 因 此 ， 无 法 使 


用 HDR 缓 冲 。 尽 管 如 此 ， 我 们 可 以 使 用 基于 屏 医 后 处 理 的 抗 锯 次 操作 
来 弥补 这 一 点 。 


在 Unity 中 使 用 HDR 也 非常 价 单 ， 我 们 可 以 在 Camera 组 件 面板 中 打 
开 HDR 选 项 即 可 。 此 时 ， 场 景 束 会 被 泻 染 到 一 个 HDR 的 图 像 缓 冲 中 ， 
这 个 缓冲 的 精度 范围 可 以 远 远 超过 0~1。 最 后 ， 我 们 可 以 再 使 用 一 个 
色调 映射 的 屏幕 后 处 理 脚本 来 把 HDR 图 像 转 换 到 LDR 图 像 进行 显示 。 
读者 可 以 在 Unity 官 方 手册 中 的 高 动态 范围 泻 染 一 节 
(http://docs.unity3d.com/Manual/HDR.html) 以 及 本 草 最 后 的 扩展 阅读 
中 找到 更 多 的 内 容 。 


18.4.4 那么 ，PBS 适 合 什么 样 的 游戏 


在 把 PBS 引 入 当前 的 游戏 项 目 之 前 ， 我 们 需要 权衡 一 下 它 的 优 缺 
点 。 需 要 再 次 提醒 读者 的 是 ，PBS 并 不 意味 着 游戏 画面 需要 追求 和 照片 
一 样 真 实 的 效果 。 事 实 上 ， 很 多 游戏 都 不 需要 刻意 去 追求 与 照片 一 样 
的 真实 感 ， 玩 家 眼中 的 真实 感 大 多 也 并 不 是 如 此 。PBS 的 优点 在 于 ， 我 
们 只 需要 一 个 万 能 的 Shader 束 可 以 泻 染 相 当 一 大 部 分 类 型 的 材质 ， 而 不 
征 使 用 传统 的 做 法 为 每 种 材质 写 一 个 特定 的 Shader。 同 时 ，PBS 可 以 保 
证 在 各 种 光照 条 件 下 ， 材 质 都 可 以 自然 地 和 光源 进行 交互 ， 而 不 需要 
我 们 反复 地 调整 材质 参数 。 


然而 ， 在 使 用 PBS 时 我 们 也 需要 考虑 到 它 带 来 的 代价 。 如 上 面 提 到 
的 ，PBS 往 往 需 要 更 复杂 的 光照 配合 ， 例 如 大 量 使 用 光照 探 针 和 反射 控 
针 等 。 而 且 PBS 也 需要 开局 HDR 以 及 一 些 必 不 可 少 的 屏幕 特效 ， 例 如 
抗 锯 人 资 、Bloom 和 色调 映射 ， 如 采 这 些 屏 幕 特效 对 当前 游戏 来 说 需要 消 
耗 过 多 的 性 能 ， 那 么 PBS 殊 不 适合 当前 的 游戏 ， 我 们 应 该 使 用 传统 的 


Shader 来 演 染 游戏 。 使 用 PBS 对 美工 人 员 来 说 同样 是 个 挑战 。 美 术 资 源 
的 制作 过 程 和 使 用 传统 的 Shader 有 很 大 不 同 ， 普 通 的 法 线 纹理 + 高 光 反 
射 约 理 的 组 合 不 再 适用 ， 我 们 需要 创建 更 细 腊 复杂 的 纹理 集 ， 包 括 金 
属 值 纹理 、 高 光 反 射 纹理 、 粗 糙 度 纹理 、 遮 挡 纹理 ， 有 些 还 需要 使 用 
额外 的 细 区 纹理 来 给 材质 添加 更 多 的 细节 表面 。 除 了 使 用 图 片 扫描 的 
传统 辅助 方法 外 ， 这 些 纹理 的 制作 通常 还 需要 更 专业 的 工具 来 绘制 ， 
例如 Allegorithmic Substance Painter 和 Quixel Suite 。 


18.5 扩展 阅读 


Unity 官 方 提供 了 很 多 学 习 PBS 的 资料 。 在 Unity 官 方 博客 中 的 全 局 
光照 一 文 (global- ilumination-in-unity-5) 中 ， 简 明 地 阐述 了 全 局 光照 
的 解决 方案 。 在 另外 两 篇 博客 (working-with- physically-based-Shading- 
a-practical-approach/、physically-based-shading-in-unity- 5-a-primer/) 

中 ， 介 绍 了 Standard Shader 的 用 法 和 注意 事项 。 官 方 项 目 也 是 很 好 的 学 
习 资 料 。Unity 开 放 了 基于 物理 着 色 屁 的 示例 项 目 Viking Village 以 及 两 
个 更 小 的 示例 项 目 Shader Calibration Scene 和 Corridor Lighting 
Example 来 着 重 介绍 如 何 使 用 Unity 5 全 新 的 Standard Shader 和 全 局 光照 
系统 。 看 过 Unity 5 宣传 视频 的 读者 想必 对 Unity 5 制作 出 来 的 电影 短片 
The Blacksmith 印 象 深 刻 ， 尽 管 Unity 没 有 开放 出 完整 的 工程 ， 但 把 许 
多 关键 的 技术 实现 放 到 了 资源 商店 里 ， 例 如 ， 人 物 角色 使 用 的 Shader、 
头发 使 用 的 Shader、 人 物 阴影 、 大 气 次 散射 等 ， 这 些 都 是 非常 好 的 学 习 
资料 。 除 此 之 外 ，Unity 还 提供 了 一 些 相 关 教程 供 新 手 学 习 ， 读 者 可 以 
在 图 形 的 教程 板块 (http://unity3d.com/cn/learn/tutorials/ 

topics/graphics) 下 找到 很 多 相关 教程 。 例 如 ， 在 Unity 5 的 光照 概览 


(http://unity3d.com/cn/learn/ tutorials/modules/ beginner/unity-5/unity5- 
lighting-overview) 中 ， 介 绍 了 Unity 5 中 使 用 的 各 种 全 局 光照 技术 ; 光 
照 和 泻 染 (https://unity3d.com/cn/learn/tutorials/ 
modules/beginner/graphics/lighting- and-rendering) 一 文 更 加 详细 地 介绍 
了 Unity 5 中 各 种 光照 的 实现 细 市 ， 以 及 一 些 设置 场景 光照 时 的 注意 事 
项 ; 在 Standard Shader 的 视频 教程 

(http://unity3d.com/cn/learn/tutorials/modules/beginner/ 5-tutorials/ 
standard-shader) 中 ，Unity 介 绍 了 Standard Shader 的 基本 用 法 以 及 和 光 
照 之 间 的 配合 。 


近年 来 ，Unity 官 方 在 Unite、SIGGRAPH 等 大 会 上 也 分 享 不 少 关 于 
PBS 的 技术 资料 。 在 Unite 2014 会 议 上 ，Anton Hand 在 他 的 演讲 中 给 出 
了 很 多 关于 如 何 创 建 PBS 中 使 用 的 资源 的 最 佳 实践 ;Renaldas Zioma 和 
Erland Komer 讲 解 了 如 何在 Unity 5 中 更 加 有 效 地 使 用 PBS。 在 
SIGGRPAH 2015 会 议 上 ， 来 自 Unity 的 技术 人 员 分 享 了 The Blacksmith 
的 环境 制作 过 程 。 


如 果 读 者 希望 更 深入 地 学 习 PBS 的 理论 和 实践 ， 可 以 在 近年 来 的 
SIGGRAPH 课 程 上 找到 非常 丰富 的 资料 。SIGGRAPH 自 2006 年 起 开始 
出 现 与 PBS 相 关 的 课程 ， 更 是 连续 4 年 《2012~2015) 由 来 自 各 大 游戏 
公司 和 影视 公司 的 技术 人 员 分 享 他 们 在 PBS 上 的 实践 。 例 如 在 2012 年 的 
课程 上 ，Disney 公 布 了 他 们 在 离线 泻 染 时 使 用 的 BRDF 模 型 ， 这 也 是 
Unity 等 很 多 游戏 引擎 使 用 的 PBR 的 理论 基础 。Kostas Anagnostou 在 他 
的 文章 中 列 出 了 非常 多 的 关于 PBR 的 相关 文章 ， 包 括 我 们 上 面 提 到 的 
SIGGRAPH 课 程 ， 强 烈 建议 有 兴趣 的 读者 去 浏览 一 番 。 


内 的 相 天 资料 则 相对 较 少 。 黎 敏 敏 在 他 的 KlayGE3| 擎 中 引入 了 
PBS， 并 写 了 系列 博文 来 簿 明 地 前 述 其 中 的 理论 基础 。 在 知 乎 专栏 
Behind the Pixels (http://zhuanlan.zhihu.com/graphics) 中 ， 作 者 给 出 了 
3 篇 关于 基于 物理 着 色 的 系列 文章 。 
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第 19 章 Unity 5 更 新 了 什么 


Unity 5 相 较 于 之 前 的 版 本 来 说 ， 在 Shader 方 面 做 了 许多 重要 的 更 
新 。 一 些 更 痢 很 容易 被 大 家 人 察觉， 例如， 如 采 读 者 直接 把 在 Unity 4 中 
使 用 的 一 些 Shader 源 代码 粘贴 到 Unity 5 中 ， 往 往 会 发 现 和 Unity 4 中 得 
到 的 渔 染 结果 不 尽 相 同 ， 甚 至 还 会 报错 。 本 章 将 会 对 Unity 5 进行 的 一 
些 重 要 更 新 〈 仅 关注 Shader 方 面 的 更 新 ) 进行 解释 ， 来 帮助 读者 加 深 
对 Unity Shader 的 理解 。 


19.1 场景 “更 亮 了 >” 


如 果 你 曾经 学 习 或 阅读 过 Unity 5 之 前 的 一 些 Shader 源 码 的 话 ， 往 
往 会 在 计算 漫 反 射 时 发 现 类 似 下 面 的 代码 : 


// Unity 5 之 前 的 shader 经 常 包含 了 类 似 下 面 的 代码 ， 
// 而 在 Unity 5 中 ， 我 们 不 需要 再 进行 x2 的 操作 


c.rgb = s.Albedo * _LightColorO.rgb * (diff * atten * 2); 


这 类 代码 通常 会 在 光照 结果 的 最 后 乘 以 系数 2>， 而 作者 往往 解释 
说 ， 因 为 不 乘 以 2 的 话 场景 会 看 起 来 很 暗 。 但 是 ， 如 采 我 们 仍然 在 
Unity 5 中 编写 类 似 上 面 的 代码 ， 场 景 束 会 看 起 来 变 完 了 ， 这 通 肖 不 是 
我 们 希望 看 到 的 。Unity 5 之 前 的 Shader 中 需要 乘 以 2 是 一 个 历史 遗留 原 
因 ， 并 最 终 在 Unity 5 中 得 到 了 修正 。 在 Unity 5 中 ， 光 照 的 强度 被 目 动 
增强 到 原来 的 两 倍 。 这 意味 着 ， 如 采 我 们 在 场景 中 放置 一 个 纯 日 色 的 
平面 ， 同 时 让 一 个 平行 光 从 它 的 正 上 方 垂直 照射 到 它 的 表面 ， 那 么 平 


面 得 到 的 漫 反 射 光照 结果 束 古 平行 光 本 里 的 颜色 。 而 在 Unity 5 之 前 的 
版 本 中 ， 上 述 的 平面 并 不 会 得 到 和 光源 颜色 一 致 的 结果。 


因此 ， 如 有 果 读 者 直接 从 之 前 的 项 目 中 使 用 现成 的 Shader 代 码 并 把 
它 移植 到 Unity 5 中 ， 需 要 去 掉 光 照 计 算 中 乘 以 2 的 部 分 ， 来 得 到 和 之 前 
一 玫 肝 汪 昭 及 采 


19.2 表面 着 色 絮 更 容易 “报错 了 >” 


如 果 读 者 把 一 些 老 版 本 下 使 用 的 表面 着 色 句 代码 直接 灯 贴 到 Unity 
5 中 使 用 ， 可 能 会 发 现 原 本 并 没有 报错 的 代码 在 Unity 5 下 报错 了 ， 这 些 
报错 信息 通常 是 指 Shader 中 的 数学 指令 或 插值 寄存 器 的 数目 超过 了 限 
制 ， 并 提示 需要 使 用 更 高 的 Shader Model， 如 SM 3.0。 


这 些 报 错 信 息 的 出 现 ， 是 因为 Unity 5 的 表面 着 色 器 在 背后 进行 了 
更 多 的 计算 。 我 们 在 第 17 章 中 解释 过 表面 着 色 器 的 实现 原理 ， 概 括 来 
说 驶 是 Unity 会 在 背后 把 表面 着 色 器 转换 成 对 应 的 顶点 / 片 元 着 色 器 。 
这 些 转换 过 程 通常 是 有 规律 可 循 的 ， 而 在 Unity 5 中 ，Unity 在 转换 过 程 
中 使 用 了 更 多 的 计算 和 插值 寄存 器 ， 从 而 造成 一 些 自 定义 的 表面 着 色 
句 可 能 会 在 新 版 本 中 报错 。 这 些 新 添加 的 计算 和 插值 寄存 器 通常 是 为 
了 计算 阴影 、 筋 效 、 非 统一 缩放 模型 的 法 线 变 换算 孟 。 在 Unity 5 之 
前 ， 如 果 需 要 使 用 法 线 纹理 ，Unity 会 把 观察 方向 和 光照 方 回 在 顶点 着 
色 需 中 变换 到 切线 空间 下 再 传递 给 斤 元 着 色 右 ， 但 Unity 5 则 选择 首先 
在 顶点 着 色 器 中 计算 从 切线 空间 到 世界 空间 的 变换 和 矩阵， 再 在 请 元 着 
色 器 中 把 法 线 变换 到 世界 空间 下 ， 从 而 需要 使 用 更 多 的 插值 寄存 句 来 
存储 变换 和 矩阵。 由 于 Unity 默 认 的 Shader Model 版 本 为 2.0， 这 些 新 添加 


的 计算 再 加 上 一 些 自 定义 的 变量 和 计算 就 很 有 可 能 会 超过 SM 2.0 中 对 
计算 指令 和 插值 寄存 絮 数 目的 限制 。 


对 上 述 问 题 的 解决 方法 也 很 简单 。 一 种 方法 是 直接 使 用 更 高 的 
Shader Model， 例 如 ， 在 Shader 中 添加 如 下 代码 来 指明 使 用 SM 3.0: 


男 一 个 方法 是 减少 表面 着 色 器 背后 的 计算 ， 这 可 以 通过 表面 着 色 
句 的 编译 指令 来 实现 。 例 如 ， 我 们 可 以 通过 类 似 下 面 的 编译 指令 ， 来 
指明 不 需要 为 该 物体 计算 阴影 纹理 坐标 (不 接收 阴影 、 光 照 纹理 坐 
标 以 及 筋 效 : 


nofog 
19.3 当家 做 主 : 目 己 控制 非 统一 缩放 的 网 格 


Unity 5 的 男 一 个 重要 的 改进 是 ， 非 统一 缩放 的 网 格 不 再 由 Unity 提 
前 在 CPU 中 处 理 了 。 我 们 曾 在 4.7 方 讲 到 过 非 统 一 缩放 对 法 线 变 换 的 有 影 
啊 ， 非 统一 缩放 的 网 格 需要 使 用 原 变换 矩阵 的 逆转 置 矩 阵 来 变换 法 线 
才 可 以 得 到 正确 的 变换 结果 。 然 而 ， 在 Unity 5 之 前 的 版 本 中 ， 我 们 并 
不 需要 在 Shader 中 考虑 非 统一 缩放 市 来 的 种 种 影响 ， 因 为 传 到 Shader 
中 的 数据 已 经 不 存在 非 统 一 缩放 了 。 那 么 ， 这 是 如 何 做 到 的 呢 ? Unity 
5 之 前 的 版 本 会 在 CPU 中 把 涉及 非 统 一 缩放 的 模型 变换 成 统一 缩放 的 模 
型 ， 也 就 是 说 ，Unity 会 在 CPU 中 再 创建 一 个 和 非 统 一 缩放 模型 空间 大 
小 相同 ， 但 只 包含 统一 缩放 的 模型 。 因此， 我 们 常常 会 在 一 些 较 旧 的 
Shader 版 本 中 看 到 类 似 下 面 的 代码 : 


// #define SCALED_NORMAL (v.normal * unity_Scale.w) 


float3 worldNormal = mul((float3x3)_Object2World, SCALED_NORMAL ); 


上 上面 的 代码 把 法 线 从 模型 空间 变换 到 世界 空间 下 ， 由 于 只 包含 统 
一 缩放 ， 因 此 ， 代 码 首 先 使 用 统一 缩放 系数 unity_Scale.w (在 Unity 4.x 
中 ， 该 值 表 示 的 值 为 1/ 统 一 缩放 系数 ) 来 得 到 归 一 化 后 的 法 线 ， 然 后 
再 使 用 模型 空间 到 世界 空间 的 变换 矩阵 直接 变换 法 线 方 向 。Unity 5 之 
前 采用 的 这 种 做 法 的 好 处 是 ， 我 们 不 需要 在 渲染 中 考 虚 非 统一 缩放 的 
有 影响， 而 它 的 缺点 是 ，CPU 的 计算 消耗 会 更 大 ， 而 且 需 要 占用 更 多 内 
存 空间 来 存储 这 些 重新 缩放 的 模型 。 


Unity 5 正式 抛弃 了 之 前 的 做 法 ， 它 直接 将 原 顶点 信息 和 包含 非 统 
一 缩放 的 矩阵 传递 给 Shader， 因 此 ，unity_Scale 也 就 没有 意义 了 。 如 果 
我 们 需要 在 顶点 / 片 元 着 色 器 中 变换 顶点 法 线 ， 就 需要 时 刻 小 心 非 统一 
缩放 的 影响 ， 以 及 需要 对 变换 后 的 法 线 进 行 手动 归 一 化 的 操作 。 


19.4 固定 管线 着 色 需 逐渐 退出 舞 合 


我 们 在 3.4.3 节 中 讲 到 ，Unity 文 持 的 着 色 器 形式 包含 了 固定 管线 的 
着 色 器 类 型 。 固 定 管线 着 色 器 是 在 可 编程 着 色 器 出 现 之 前 ，GPU 大 量 
使 用 的 着 色 器 形式 。 它 的 工作 方式 就 像 是 一 个 包含 了 很 多 开关 和 配置 
的 墨 箱子， 我 们 可 以 通过 开启 或 关闭 某 些 功能 来 让 GPU 进行 相应 的 泻 
染 。 在 Unity 最 开始 出 现 的 时 期 里 (2005 年 6 月 ，Unity 1.0.1 发 布 ) ， 使 
用 固定 管线 的 GPU 还 占据 了 一 定 的 市 场 份额 ， 因 此 ，Unity 从 那 时 开始 
就 始终 支持 编写 固定 管线 的 着 色 器 。 


然而 ， 实 际 上 很 多 平台 早已 不 文 持 固定 管线 着 色 器 。 例 如 ， 

OpenGL 1.5 是 最 后 一 个 使 用 固定 管线 编程 的 OpenGL 版 本 ， 从 OpenGL 
2.0 (2004 年 发 布 ) 开始 ， 束 只 支持 可 编程 管线 的 着 色 器 。Unity 仍 然 保 
留 对 固定 管线 着 色 右 的 文 持 ， 是 出 于 两 个 主要 原因 : 下 和 完 ， 有 很 多 项 
目 和 资源 包 都 大 量 使 用 了 固定 管线 着 色 需 ， 其 次 是 固定 管线 着 色 需 的 
代码 通常 要 比 实现 相同 功能 的 顶点 / 片 元 着 色 丹 少 很 多 。 现 在 Unity 文 
持 的 绝 大 多 数 平台 实际 已 经 完全 不 再 文 持 固 定 管线 编程 ，Unity 需 要 在 
背后 把 我 们 编写 的 固定 管线 着 色 需 转换 成 相应 的 可 编程 管线 着 色 硕 。 


但 是 ， 这 样 的 做 法 有 很 多 次 疾 。 下 和 完 ， 诸 如 PS4 和 XboxOne 这 样 的 
平台 并 不 文 持 Unity 的 固定 管线 着 色 器 (这 点 在 Unity 5.2 中 得 到 了 改 
善 ) ， 这 主要 是 因为 想 要 在 这 些 平 台 上 实时 生成 着 色 器 代码 是 很 困难 
的 。 其 次 ， 虽 然 固 定 管线 着 色 融 代码 比较 简单 ， 但 这 些 着 色 大 能 够 实 
现 的 效果 非常 有 限 ， 最 后 ， 我 们 往往 仍然 需要 使 用 灵活 性 更 高 的 顶点 / 
片 元 着 色 需 来 殖 代 。 


Unity 5.x 版 本 对 固定 管线 着 色 圳 的 导入 和 编译 进行 了 优化 。 鹤 止 
到 Unity 5.2 和 版本， 所 有 固定 管线 着 色 圳 都 会 在 导入 时 被 转 换 成 真正 的 
顶点 / 片 元 着 色 器 ， 并 且 已 经 支持 所 有 平台 ， 包 括 游戏 机 平台 。 我 们 还 
可 以 在 Shader 的 导入 面板 中 查看 固定 管线 着 色 右 生成 的 顶点 / 片 元 大 色 
器 ， 如 图 19.1 所 示 。 


-Color Color: Main Color 


SpecColor Color: Spec Color 
Emission Colot Emissive Color 
Sheness Range: Shinines 
MainTex Texture Base RCE) 


图 19.1 在 shader 的 导入 面板 中 ， 单 击 图 中 按钮 可 查看 Unity 为 该 固定 管线 着 色 器 生成 的 顶 
点 / 片 元 着 色 器 代码 


p> 


但 缺点 是 ， 以 前 一 些 固定 管线 着 色 絮 的 功能 ， 例 如 ， 使 用 TexGen 
命令 来 生成 纹理 坐标 以 及 进行 纹理 坐标 变换 的 矩阵 操作 等 ， 已 经 被 抛 
弃 了 。 而 且 ， 我们 也 不 可 以 再 在 脚本 中 使 用 类 似 new Material(“fixed 
function shader string”) 的 代码 来 实时 创建 一 个 固定 管线 的 着 色 絮 。 除 此 
之 外 ， 我 们 也 不 可 以 再 混用 可 编程 和 固定 管线 的 着 色 器 。 


实际 上 ， 由 于 Unity 目 前 支持 的 所 有 平台 都 已 经 抛弃 了 固定 管线 着 
色 器 ， 我 们 已 经 没有 必要 再 使 用 固定 管线 着 色 器 来 进行 泻 染 了 。 如 末 
读者 希望 了 解 更 多 Unity 5 对 固定 管线 的 优化 ， 可 以 参见 Unity 图 形 工程 
师 Aras 的 博客 。 


第 20 章 ”还 有 更 多 内 容 吗 


我 们 相信 一 本 几 十 万 字 的 书籍 并 不 能 满足 一 些 读者 对 于 演 染 强烈 
的 求知 欲 。 在 本 书 的 最 后 ， 我 们 会 给 出 许多 优秀 的 学 习 资 料 来 帮助 读 
者 进行 下 一 步 的 学 习 。 


20.1 如 采 你 想 深 入 了 解 泻 染 的 话 


Unity Shader 实 际 是 建立 在 OpenGL、DirectX 这 样 更 加 基础 的 图 像 
编程 接口 上 的 。 这 样 的 封装 可 以 为 我 们 节省 很 多 工作 ， 但 可 能 会 影响 
我 们 对 底层 工作 方式 的 理解 。 这 些 图 像 编程 接口 都 有 各 自 非 常 出 色 的 
学 习 资 料 ， 例 如 OpenGL 有 非常 有 名 的 红 宝 书 《OpenGL 编 程 指南 》 串 
和 蓝 宝 书 《OpenGL 超 级 宝典 》 上 四。 更 多 的 参考 书 可 以 在 叶 劲 峰 (网 
名 : Milo Yip) 的 豆 列 计算 机 图 形 : 入 门 /API 类 

(http://www.douban.com/doulist/1445744/) 中 找到 。 


GPU 精粹 系列 书籍 BIIB 中 包含 许多 游戏 和 其 他 实时 泻 染 中 使 用 
的 高 级 泻 染 技术 。 与 之 类 似 的 还 有 GPU Pro 系 列 书籍 {四 和 ShaderX 系 列 
书籍 四 。 这 些 内 容 相 对 比较 高 深 ， 大 都 来 源 于 行业 内 的 精英 对 各 种 泻 
染 技术 的 总 结 ， 希 望 深入 了 解 泻 染 各 个 方面 的 读者 一 定 不 可 以 错过 。 
叶 劲 峰 在 他 的 豆 列 计算 机 图 形 : Gems 类 
(http://www.douban.com/doulist/1445745/) 中 总 结 了 更 多 的 图 形 学 精 
粹 系列 书籍 。 


尽管 本 书 关 注 的 是 游戏 中 使 用 的 实时 泻 染 技术 ， 但 一 些 基于 光线 
追 踩 等 方式 的 渔 染 方法 同样 是 图 形 学 中 的 重点 。 在 《Physically based 
rendering: From theory to implementation》[8 一 书 中 ， 作 者 介绍 并 实现 
了 基于 物理 泻 染 的 框架 ， 这 是 学 习 光线 妃 味 和 PBS 的 非常 好 的 资料 。 


最 后 ， 我 们 不 得 不 提起 被 誉 为 图 形 程序 员 专 者 的 《Real-time 
Rendering, third Edition》 加 一 书 。 在 该 书 出 版 时 ， 几 乎 涵盖 了 实时 泻 
染 中 的 所 有 相关 技术 ， 作 者 在 书 中 给 出 了 大 量 的 参考 文献 ， 并 在 网 上 
维护 了 一 个 专门 的 页 面 来 总 结实 时 渲染 中 使 用 的 各 个 技术 和 资料 。 


在 学 术 方 面 ， 图 形 学 相关 的 会 议和 论坛 是 开阔 视野 、 学 习 前 沿 泻 
染 技术 的 绝 佳 途 径 。SIGGRAPH 会 议 是 图 形 学 领域 最 顶级 的 会 议 ， 
年 来 目 世界 各 地 的 顶尖 学 者 和 行业 精英 都 会 汇聚 一 尝 ， 展 示 这 一 年 中 
他 们 在 图 形 学 领域 的 工作 和 进展 。 与 之 类 似 的 会 议 还 有 ，SIGGRAPH 
Asia、Eurographics、Symposium on Interactive 3D Graphics and Games 
等 会 议 ， 读 者 可 以 在 Ke-Sen Huang 的 主页 中 找到 历年 在 这 些 会 议 上 发 
表 的 论文 。 需 要 特别 提出 的 是 ， 每 年 SIGGRAPH 上 的 SIGGRAPH 
Course 中 都 会 有 很 多 来 目 游 戏 行业 的 技术 人 员 分 享 他 们 在 游戏 图 像 方 
面 的 进展 ， 除 了 在 第 18 章 中 提 到 的 课程 Physically Based Shading in 
Theory and Practice 外 ，Advances in Real-Time Rendering 系 列 课程 同 
样 是 非常 出 色 的 学 习 资 料 。 在 这 个 课程 中 ,来 自 艺 电 、 育 自 、Epic 等 
知名 游戏 公司 的 拉 术 人 员 将 阐述 他 们 是 如 何在 游戏 中 使 用 各 种 复 洒 的 
泻 染 技术 来 实现 次 世代 游戏 画面 的 。 自 2006 年 起 ， 该 课程 已 经 在 
SIGGRAPH Course 上 连续 举办 了 十 届 。 另 一 个 与 游戏 恩 轧 相关 的 会 议 
是 游戏 开发 者 会 议 (Game Developers Conference，GDC) ， 每 年 的 


GDC 会 议 都 会 汇集 全 世界 的 游戏 开发 者 。 目 2009 年 ， 中 国 也 迎 来 了 
GDC China， 给 中 国 的 游戏 开发 者 提供 了 更 多 的 行业 交流 机 会 。 


除了 上 壕 提 到 的 书籍 和 会 议 外 ， 一 些 非常 有 趣 的 网 站 也 可 以 帮助 
开阔 我 们 的 视野 。 在 Shadertoy 网 站 上 ， 你 可 以 看 到 来 自 全 世界 的 人 们 
是 如 何 只 用 一 个 片 元 着 色 器 来 实现 各 种 或 恢 维 壮丽 、 或 经 典 怀旧 的 场 
景 的 。 与 之 类 似 的 还 有 GLSL Sandbox Gallery 网 站 。 我 们 相信 ， 在 浏览 
了 这 些 网 站 后 ， 你 会 再 一 次 被 Shader 能 实现 的 效果 所 震撼 。 


20.2 世界 那么 大 


我 们 曾 听 到 很 多 声音 ， 抱 怨 Unity Shader 学 习 资料 其 少 ， 尽 管 我 们 
希望 通过 这 本 书 来 改善 这 样 的 情况 ， 但 不 可 否认 的 是 ， 仅 靠 一 本 书 愁 
怕 无 法 让 一 个 人 从 技术 “小 日 ”成 长 为 行业 大 牛 。 对 于 泻 染 这 样 率 扯 到 
很 多 复杂 知识 的 领域 来 说 ， 一 本 书 更 是 无 法 详细 地 解释 这 其 中 的 方 方 
面 面 。 实 际 上 ， 网 络 上 有 许多 关于 这 方面 的 英文 资料 ， 我 们 能 够 体会 
许多 英语 能 力 欠 佳 的 开发 者 在 这 方面 的 百 恼 ， 但 如 果 你 永远 不 阅读 英 

人 资料， 那么 你 将 错过 一 大 片 “森林 ”。 尽 管 有 不 少 英 文 资 料 不 断 被 引 
进 国 内 ， 并 有 了 中 译 版 本 ,但 是 由 于 翻译 质量 问题 等 因素 给 初学 者 市 
来 了 不 少 的 阅读 障碍 。 更 何况 ， 还 有 数 之 不 尽 的 优秀 的 英文 资料 是 仍 
然 没有 被 引入 的 。 


事实 上 ， 很 多 英文 资料 中 使 用 的 英语 大 多 是 基础 英语 ， 在 一 些 翻 
译 软件 的 帮助 下 ， 阅 读 并 理解 这 些 内 容 并 没有 想象 中 的 那么 困难 。 在 
作者 号 边 也 有 不 少 对 学 习 英 语 十 分 否 恼 的 朋友 ， 在 经 过 一 段 时 间 的 坚 


持 后 ， 他 们 普通 反映 阅读 英文 书籍 越 来 越 轻 松 。 世 界 那么 大 ， 不 要 让 
语言 成 为 阻碍 你 前 进 的 绊脚石 


最 后 ， 我 们 真心 地 希望 ， 本 书 可 以 为 你 的 Shader 学 习 之 旅 打 开 一 
而 大 门 ， 让 你 离 制作 心目 中 优秀 游戏 的 心愿 更 近 一 步 。 奉 是 如 此 ， 那 
想必 殉 是 我 们 最 大 的 欣慰 了 。 
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全 7.3 广 : 使 用 


渐变 纹理 


由 漫 反 射 光照 


A 8.7.1 节 : 透明 度 测 试 的 双 面 泻 染 效果 


和 8.7.2 节 : 透明 度 混 合 的 双 面 泻 染 效果 


A 9.4 条 : 透明 度 测 试 的 正确 阴影 效果 


A 10.2.1 节 : 使 用 演 染 纹理 来 实现 镜子 效果 


A 10.2 节 : 使 用 GrabPass 来 实现 玻璃 效果 


A11.3.1 节 : 使 用 顶点 动画 来 模拟 2D 河 流 


A11.3.2 节 : 广告 牌 效果 


和 12.3: 使 用 边 绿 检测 来 实现 基本 的 描 边 效果 


和 14.2 节 : 素描 风格 的 演 染 


和 13.4 节 : 使 用 深度 + 法 线 纹理 来 实现 更 加 高 级 的 描 边 效果 
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A18.2 节 : 基于 物理 的 泻 染 


欢迎 来 到 异步 社区 ! 


异步 社区 的 来 历 


异步 社区 (www.epubit.com.cn) 是 人 民 邮 电 出 版 社 旗下 IT 专业 图 书 旗 
舰 社 区 ， 于 2015 年 8 月 上 线 运营 。 


异步 社区 依托 于 人 民 邮 电 出 版 社 20 余 年 的 IT 专业 优质 出 版 资源 和 
编辑 策划 团队 ， 打 造 传 统 出 版 与 电子 出 版 和 上 自 出 版 结合 、 纸 质 书 与 电 
子 书 结合 、 传 统 印 刷 与 POD 按 需 印 刷 结合 的 出 版 平台 ， 提 供 最 新 技术 
资讯 ， 为 作者 和 读者 打造 交流 互动 的 平台 。 
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社区 UI 全 新 改版 ， 产 新 面 租 迎接 20171 为 答谢 社区 用 户 
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Free eBook 
嘿 | Write for Us 
Python 机 局 学 习 一 一 预 。 贝 叶 斯 方法 ; 不 记 编程 。 ”机 器 学 习 项 目 开 发 安 战 。。” 贝 时 斯 思维 ; 统计 建 模 
测 分 析 校 心算 法 与 贝 叶 斯 准 斯 的 Python 学习 法 近期 活动 


社区 里 都 有 什么 ? 
购买 图 书 


我 们 出 版 的 图 书 涵盖 主流 芽 技术 ， 在 编程 语言 、 Web 技 术 、 数 据 科 
学 等 领域 有 众多 经 典 畅 销 图 书 。 社 区 现 已 上 线 图 书 1000 余 种 ， 电 子 书 
400 多 种 ， 部 分 新 书 实现 纸 书 、 电 子 书 同步 出 版 。 我 们 还 会 定期 发 布 新 
书 书 讯 。 


下 载 资源 


社区 内 提供 随 书 附 赠 的 资源 ， 如 书 中 的 案例 或 程序 源 代码 。 


男 外 ， 社 区 还 提供 了 大 量 的 免费 电子 书 ， 只 要 注册 成 为 社区 用 户 
束 可 以 免费 下 载 。 


与 作 译 者 互动 


很 多 图 书 的 作 译 者 已 经 入 驻 社区 ， 您 可 以 关注 他 们 ， 咨 询 技术 问 
题 ; 可 以 阅读 不 断 更 新 的 技术 文章 ， 听 作 译 者 和 编辑 畅 聊 好 书 背 后 有 
趣 的 故事 ;还 可 以 参与 社区 的 作者 访谈 栏目 ， 回 您 天 广 的 作者 提出 采 
访 题目 。 


灵活 优惠 的 购书 


您 可 以 方便 地 下 单 购买 纸 质 图 书 或 电子 图 书 ， 纸 质 图 书 直接 从 人 
民 邮 电 出 版 社 书库 发 货 ， 电 子 书 提供 多 种 阅读 格式 。 


对 于 重 磅 新 书 ， 社 区 提供 预 售 和 新 书 首发 服务 ， 用 户 可 以 第 一 时 
间 买 到 心仪 的 新 书 。 


用 户 帐户 中 的 积分 可 以 用 于 购书 优惠 。100 积 分 =1 元 ， 购 买 图 书 
时 ,在 ”PE 里 项 入 可 使 用 的 积分 数值 ， 即 可 扣 减 相应 金额 。 
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购买 本 电子 书 的 读者 专 享 异步 社区 优惠 券 。 使 用 方法 ， 注 册 成 为 社区 用 户 ， 在 下 单 购书 
时 输入 “57AWG”， 然 后 点 击 “ 使 用 优惠 码 "， 即 可 享受 电子 书 8 折 优 惠 (本 优惠 券 只 可 使 用 一 
次 ) 。 


纸 电 图 书 组 合 购买 
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购买 ， 多 种 阅读 选择 。 
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社区 里 还 可 以 做 什么 ? 


提交 勘误 


您 可 以 在 图 书页 面 下 方 提 区 勘误 ， 每 条 勘误 被 确认 后 可 以 获得 100 
积分 。 热 心 勤 误 的 读者 还 有 机 会 参与 书稿 的 审 校 和 翻译 工作 。 


写作 


性 区 提供 基于 Markdown 的 写作 环境 ， 喜 欢 写 作 的 您 可 以 在 此 一 试 
身手 ， 在 社区 里 分 享 您 的 技术 心得 和 读书 体会 ， 更 可 以 体验 目 出 版 的 
乐趣 ， 轻 松 实现 出 版 的 梦想 。 


如 有 果 成 为 社区 认证 作 译 者 ， 还 可 以 享受 异步 社区 提供 的 作者 专 享 
特色 服务 。 


会 议 活 动 早 知道 
您 可 以 掌握 代 圈 的 技术 会 议 资 讯 ， 更 有 机 会 免费 获 赠 大 会 门票 。 
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QQ 群 : 436746675 


社区 网 址 : www.epubit.com.cn 


异步 社区 


官方 微 信 : 


官方 微 博 : @ 人 邮 有 异步 社区 ，@ 人 民 邮 电 出 版 社 -信息 技术 分 社 


投稿 & 咨 询 : contact@epubit.com.cn 
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版 权 信息 


书 名 : Unity 3D NGUI 实 战 教程 
ISBN: 978-7-115-38546-8 
本 书 由 人 民 邮 电 出 版 社 发 行 数字 版 。 版 权 所 有 ， 侵 权 必 和 究 。 


您 购买 的 人 民 邮 电 出 版 社 电子 书 仅 供 您 个 人 使 用 ， 未 经 授权 ， 不 
得 以 任何 方式 复制 和 传播 本 书 内 容 。 


我 们 愿意 相信 读者 具有 这 样 的 良知 和 觉悟， 与 我 们 共同 保护 知识 
产权 。 
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内 容 提要 


NGUI 是 专门 针对 Unity 引擎 、 用 C# 语 言 编 写 的 一 套 揪 件 ， 它 已 
经 成 为 了 目前 世界 上 应 用 最 广 、 最 成 熟 的 Unity 制 作 UI 的 插件 ， 完 美 地 
弥补 了 Unity 引 警 原 生 GUI 系 统 和 NewGUI 系 统 的 各 种 不 足 。 程 序 员 可 
以 利用 它 提供 的 一 整套 UI 框架 和 事件 通知 系统 来 进 行 自 己 项 目的 UI 设 
计 和 制作 。 本 书 不 仅 讲解 了 必 知 必 会 的 NGUI 的 基础 知识 ， 更 是 以 项 
目 实 战 为 目的 ， 涵 盖 了 大 量 的 项 目 实战 中 的 经 验 之 谈 和 技巧 总 结 ， 用 
以 帮助 读者 达到 学 以 致 用 的 目的 。 

本 书 的 主要 内 容 : 初 识 NGUI、UI 开 发 的 流程 、NGUI 强 大 优势 、 
制作 第 一 个 UI 图 集 、 创 建 一 个 3D UI、 查 看 和 管理 UI 的 深度 、 制 作 基 
础 的 UI 控件 、 让 UI 动 起 来 一 一 UI 动画 、NGUI 进 阶 、 使 用 Panel 管 理 面 
板 、NGUI 实战 进 阶 、UI 开 发 核心 问题 一 -UI 随 屏幕 目 适应 、 实 战 开 
发 中 UI 资 源 制 作 标准 、 跨 平台 制作 UI 资 源 、UI 结 构 设 计 、UI 代 码 的 设 
计 和 优化 、 项 目 案例 实战 分 析 、 背 包 界 面 的 制作 等 核心 技术 ， 最 后 用 
一 章 归 纳 了 NGUI 常 见 疑难 问题 ， 以 便 读 者 过 到 问题 时 可 以 随时 参考 。 

本 书 适合 新 上 手 的 Unity 客 户 端 程序 员 、 需 要 做 UI 的 Unity 程 序 
员 、 想 自学 Unity 做 独立 游戏 开发 的 人 员 ， 以 及 大 专 院 校 相关 专业 的 师 
生 学 习 用 书 和 培训 学 校 的 教材 。 


了 


在 手机 游戏 开发 兴起 的 当下 ，Unity 3D 引擎 依靠 其 良好 的 跨 平台 
特性 ， 一 路 成 为 全 球 第 一 大 引擎 ， 被 广泛 地 使 用 。 越 来 越 多 的 游戏 开 
发 者 开始 关注 和 使 用 Unity 3D 引擎 。Unity 3D 引 警 最 大 的 短 板 在 于 其 
原生 的 GUI 系 统 有 很 大 的 缺陷 ， 例 如 ， 性 能 和 方便 程度 等 都 不 适合 进 
行商 业 开 发 ， 所 以 ， 大 部 分 开发 者 都 开始 使 用 NGUI。NGUI 的 GUI 以 
良好 的 性 能 优化 、 方 便 的 开发 模式 、 成 熟 稳定 等 特点 ， 已 经 成 为 全 球 
Unity 游戏 开发 者 的 UI 制作 首选 插件 。 因 为 NGUI 是 一 个 插件 的 缘 
故 ， 网 上 很 难 有 成 熟 的 资料 ， 即 便 要 查找 一 些 基本 的 资料 也 得 连 入 国 
外 的 网 站 ， 而 且 是 英文 的 资料 ， 这 给 开发 者 带 来 了 很 大 的 苦恼 。 由 于 
UI 开 发 是 游戏 开发 中 客户 端的 重头 工作 ， 具 有 责任 大 、 工 作 量 多 、 修 
改 频繁 等 诸多 特性 ， 一 直 是 客户 端 程序 员 的 一 个 疑难 问题 。 现 在 市 面 
上 还 没有 NGUI 的 书 ， 为 了 证 读者 能 够 学 会 NGUI 的 用 法 和 技巧 ， 并 且 
能 够 直接 运用 于 正式 的 商业 项 目 开 发 中 ， 作 者 结合 自己 的 实践 经 验 特 
意 撰写 了 本 书 。 

本 书 的 特点 

本 书 不 仅 讲解 了 必 知 必 会 的 基础 知识 ， 更 是 以 项 目 实战 为 目的 ， 
书 中 涵盖 了 大 量 的 项 目 实战 中 的 经 验 之 谈 和 技巧 总 结 ， 这 对 于 一 个 客 
户 端 程序 员 来 说 ， 不 管 他 用 什么 引 警 、 用 什么 UI 工 具 来 开发 UI 系 统 ， 
本 书 都 能 给 他 提供 帮助 ， 达 到 学 以 致 用 的 目的 。 

本 书 的 主要 内 容 


本 书 全 面 讲解 了 NGUI 的 实战 知识 ， 主 要 内 容 为 : 初 识 NGUI、UI 
开发 的 流程 、NGUI 强 大 优势 、 导 入 NGUI 插 件 、 认 识 UI 的 基本 资源 、 
制作 第 一 个 UI 图 集 、 用 AtlasMaker 制 作 图 集 、 制 作 第 一 个 UI 字体 、 创 
建 一 个 3D UI、3D UI 的 工作 原理 、 查 看 和 管理 UI 的 深度 、 制 作 基 础 的 
UI 控件 、 精 灵 的 创建 、 制 作 UI 纹理 、 制 作 按钮 、 制 作 进度 条 、 制 作 滑 
动 条 、 制 作 输入 框 、 制 作 深 动 视图 、 制 作 复 选 框 、 让 UI 动 起 来 一 一 UI 
动画 、 颜 色 变化 动画 、 位 置 变化 动画 、 旋 转变 化 动画 、 大 小 变化 动 
画 、 组 件 整体 变换 、 音 量变 化 动画 、 在 UI 中 使 用 Animation 动 画 、 动 画 
控制 一 一 UIPlayTween 组 件 、NGUI 进 阶 、 使 用 Panel 管 理 面 板 、 使 用 
Grid 排列 元 素 、 使 用 Toggle 制 作 页 签 、 使 用 DragCamera 直 接 拖 动 摄像 
机 、 使 用 DragObject 直 接 拖 动物 体 、 拖 动 改变 UI 元 素 的 尺寸 、 按 钮 绑 
定 快 捷 键 、 制 作 列表 、 打 字 机 慢 慢 出 字 的 效果 、NGUI 实 战 进 阶 、UI 
开发 核心 问题 一 一 UI 随 屏 幕 目 适应 、 背 景 图 的 适 配 、UI 元 素 的 相对 日 
适应 、 多 个 摄像 机 同时 协作 运行 、 实 战 开发 中 UI 资源 制作 标准 、 跨 平 
台 制 作 UI 资源 、 巧 用 九宫 格 减少 UI 资源 量 、 UI 事件 监 听 的 遮挡 、 
NGUI 和 模型 、 特 效 在 同一 层 中 混用 、UI 结 构 设 计 、 用 代码 操作 NGUI 
的 类 、 获 取 NGUI 的 组 件 、 迅 速 判断 类 中 可 读 写 的 成 员 、 动 态 创建 UI 
元 素 、Sprite 的 常用 操作 、 动 态 对 Button 设置 单 击 事件 、 网 格 动态 增 
减 成 员 和 刷新 排列 、 手 动 控制 动画 随意 播放 、 调 用 进度 条 、 巧 用 
EventTrigger 监听 各 种 事件 、UI 代码 的 设计 和 优化 、 项 目 案 例 实战 分 
析 、 场 景 加 载 的 进度 条 界面 制作 、RPG 游戏 中 人 物 头像 状态 栏 的 制 
作 、 技 能 快捷 栏 的 制作 、RPG 和 角色 头顶 跟随 血 条 的 制作 、 背 包 界 面 的 
制作 等 核心 技术 ， 最 后 用 一 章 归 纳 了 NGUI 常 见 疑 难 问 题 ， 以 便 读 者 遇 
到 问题 时 可 以 随时 参考 。 

本 书 作者 

高 雪 峰 ， 现 为 游戏 制作 人 ， 曾 经 担任 游戏 主 策划 、 游 戏 运营 、 
Unity 程 序 员 等 职位 ， 开 发 过 端 游 、 页 游 、 手 游 等 项 目 ， 带 团队 做 过 多 


个 商业 项 目 ， 对 游戏 的 研发 过 程 具有 丰富 的 经 答 和 实战 拉 能 。 对 NGUI 
有 深入 的 研究 ， 并 且 全 部 应 用 于 项 目 实 战 ， 本 书 是 作者 多 年 实战 经 验 
的 总 结 ， 定 会 给 读者 市 来 很 多 有 益 的 实战 启示 。 

本 书 读者 对 象 

本 书 适 合 新 上 手 的 Unity 客 户 端 程序 员 、 需 要 做 UI 的 Unity 程 序 
员 、 想 上 自学 Unity 做 独立 游戏 开发 的 人 员 阅 读 ， 也 适合 用 作 大 专 院 校 相 
天 专业 的 师 生 学 习 用 书 和 培训 学 校 的 教材 。 

编辑 联系 邮箱 : zhangtao@ptpress.com.cn。 


1 识 NGUI 


1.1 UI 2 


1.1.1 什么 是 游戏 UI 


UI 全 称 是 User Interface， 即 用 户 界 面 。UI 的 概念 运用 于 各 行 各 
业 ， 例 如 电脑 操作 系统 、 手 机 、 网 站 等 ， 几 乎 所 有 需要 用 户 自 主 操 作 
的 地 方 都 会 涉及 用 户 界 面 。UI 的 职责 是 负责 人 机 之 间 的 交互 ， 它 需要 
将 天 键 信息 、 操 作 人 逻辑 等 展示 给 用 户 。 好 的 UI 设计 不 但 能 使 操作 变 得 
易于 理解 、 人 简单 易 用 ， 而 且 能 做 到 简 少 美观 ， 给 用 户 带 来 舒适 的 操作 
体验 。 在 软件 设计 中 ，UI 的 设计 是 核心 设计 工作 之 一 。 

游戏 是 一 种 非常 典型 的 互动 娱乐 ， 不 论 在 什么 游戏 中 ， 玩 家 都 需 
要 进行 目 己 的 操作 ， 而 且 频 率 非 常 高 。 在 一 些 大 型 游戏 中 甚至 会 出 现 
更 复杂 而 频繁 的 操作 ， 例 如 苋 技 游戏 和 大 型 网 络 游戏 等 。 这 些 在 游戏 
中 进行 的 操作 ， 让 玩家 体会 到 了 游戏 的 乐趣 ， 而 这 一 切 都 依赖 于 一 整 
套 游 戏 的 UI 机 制 。 

在 游戏 中 ，UI 几乎 无 处 不 在 ， 例 如 进入 游戏 的 菜单 、 输 入 账号 密 
码 的 登录 界面 、 创 建 和 选择 角色 、 角 色 血 条 状态 栏 和 技能 栏 、 场 景 雷 
达 图 、 各 种 各 样 的 提示 框 等 。 


在 游戏 中 UI 主要 承担 了 以 下 职责 : 


1. 游戏 美术 风格 的 重要 组 成 部 分 

一 个 游戏 由 不 同 种 类 的 美术 资源 组 成 ， 例 如 角色 、 场 景 、 特 效 、 
UI 等 。 每 一 个 游戏 都 必须 有 一 个 统一 的 美术 风格 ， 否 则 游戏 将 变 成 不 
伦 不 类 的 四 不 像 。 例 如 中 国 仙 侠 风格 的 游戏 ， 不 应 该 出 现 欧美 魔 筷 的 
元 素 ; 同 理 ， 欧 美 魔幻 风 的 游戏 里 ， 不 应 该 出 现 中 国 仙 侠 的 元 素 。UI 
因 其 无 处 不 在 的 特性 ， 成 为 游戏 设 定 美 术 风 格 时 一 个 非常 重要 的 考量 
指标 。 

2. 承担 着 重要 的 美观 职责 

当 玩 家 打开 游戏 看 到 第 一 个 游戏 画面 时 ，UI 下 将 一 直 陪 伴 着 玩家 
直到 玩家 退出 游戏 。 甚 至 大 部 分 UI 都 是 长 久 性 地 出 现在 玩家 的 游戏 窗 
口中 ， 例 如 玩家 角色 的 状态 栏 、 技 能 栏 等 。 所 以 ，UI 的 美观 和 耐看 ， 
将 会 直接 有 影响 着 玩家 对 这 款 游戏 的 美观 程度 的 评价 。 

3. 负责 清晰 明了 地 展现 游戏 的 操作 方式 

每 一 个 游戏 都 有 着 目 己 的 操作 方式 ， 越 古 大 型 游戏 ， 操 作 人 逻辑 往 
往 会 越 复 杂 和 庞大 。 好 的 UI 设计 ， 能 让 用 户 不 依赖 指引 整 能 够 迅速 地 
知道 目 己 应 该 怎样 操作 来 进行 游戏 。 

4. 能 让 玩家 舒服 、 方 便 地 进行 人 机 交互 

游戏 UI 的 核心 目的 就 是 让 玩家 能 进行 目 主 操作 ， 而 游戏 的 机 制 往 
往 很 复杂 ， 这 个 时 候 “ 人 性 化 ” 束 变 得 很 重要 。 例 如 技能 冷却 完成 之 
后 ， 技 能 栏 内 烁 一 人 下， 玩家 在 游戏 中 不 目 觉 地 束 能 知道 技能 已 经 冷却 
元 把 有 


1.1.3 UI 开 发 的 流程 


在 项 目 开 发 中 ， 一 般 都 是 由 策划 人 员 、 程序 人 人员、 美术 人 员 、 测 
试 人 员 组 成 多 个 组 协同 进行 开发 。 在 开发 UI 时 ， 首 先 应 当 由 美术 核心 
人 员 确 立 UI 的 整体 美术 风格 标准 ， 然 后 再 进行 UI 的 各 个 模块 的 开发 。 


在 开发 UI 的 模块 时 ， 首 先 应 当 由 相关 策划 人 员 提 出 功能 的 需求 ， 
指出 该 模块 的 UI 应 该 具备 什么 功能 、 能 让 玩家 进行 哪些 操作 人 逻辑 。 然 
后 ， 由 策划 人 员 给 出 UI 的 控件 布局 图 或 者 由 美术 人 员 目 行 设计 布局 
° 再 由 UI 美术 人 员 进 行 UI 的 资源 制作 ， 制 作 完 成 后 ， 将 UI 资源 提交 
给 客户 端 程 序 员 。 客 户 剖 程序 员 拿 着 美术 人 员 提 供 的 UI 资源 ， 按 照 UI 
的 布局 图 和 功能 文档 ， 最 终 完 成 该 模块 的 功能 开发 。 


1.1.4 UI 开发 的 难点 


UI 在 开发 中 往往 具备 以 下 几 个 问题 。 
(1) 需求 不 清晰 。 
(2) 功能 难 实现 。 
(3) 工作 量 很 大 。 
(4) 优化 不 够 好 。 
(5) 改动 太 频 繁 。 
这 些 问 题 都 是 项 目 实际 开发 中 非常 常见 的 问题 ， 特 别 是 客户 端 程 
序 员 经 常 为 以 上 五 个 问题 伤 脑筋 。 要 规避 它们 ， 除 了 良好 的 沟通 以 
外 ， 还 需要 足够 的 对 UI 的 思考 ， 以 完成 一 个 展 好 的 UI 架构 来 提高 抗 风 
险 指 数 ， 并 扩充 自身 的 知识 面 ， 以 做 到 提早 考虑 到 更 多 的 特殊 情况 。 
看 完 本 书后 ， 相 信 你 一 定 能 找到 应 对 以 上 项 目 开 发 实际 问题 的 最 
优 方案 ! 


1.2 什么 是 NGUI 


1.2.1 NGUI < 


NGUI 是 专门 针对 Unity 引 擎 、 用 C# 语 言 编 写 的 一 套 揪 件 ， 经 历 了 
数 十 个 版 本 的 更 迭 之 后 ， 它 已 经 成 为 了 目前 世界 上 应 用 最 广 、 最 成 熟 
的 Unity 制 作 UI 的 插件 ， 完 美 地 弥补 了 Unity 引 擎 原生 GUI 系 统 和 
NewGUI 系 统 的 各 种 不 足 之 处 。 程 序 员 可 以 利用 它 提 供 的 一 整套 UI 框 
架 和 事件 通知 系统 来 进行 项 目的 UI 设计 和 制作 ，NGUI 凭 借 其 强大 的 
功能 、 恨 好 的 优化 和 易 用 易学 性 ， 让 大 多 数 程序 员 都 赞赏 有 加 ! 


1.2.2 NGUI 的 强大 优势 


1. 成 熟 稳 害 

NGUI 经 历 了 数 十 个 版 本 的 更 欠 ， 发 展 到 现在 几乎 没有 BUG， 并 
且 完 美文 持 跨 平台 和 目 适 应 。 在 这 一 点 上 ， 它 远 远 超越 了 其 他 的 UI 插 
件 。 论 成 熟 稳 定 ， 它 比 Unity 的 NewGUI 还 要 更 胜 一 筹 。 

2. 功能 丰富 

NGUI 除 了 满足 普遍 的 UI 制作 功能 以 外 ， 还 集成 了 大 量 的 封装 好 
的 实用 功能 ， 比 如 拖 上 扎 、 更 多 的 事件 监听 、 各 种 Tween 动 画 、 本 地 化 
等 ， 甚 至 文 持 光 照 、 法 线 、 折 射 等 特性 。 这 是 NGUI 远 远 超 过 其 他 UI 
制作 方式 的 地 方 ， 也 是 NGUI 经 历数 十 个 版 本 更 迭 的 积累 。 

3. 操作 方便 

NGUI 的 操作 几乎 都 集中 于 Inspector 面 板 中 ， 并 且 不 需要 Play 运行 
束 能 看 到 UI 的 结果 。 各 个 模块 和 组 件 封 装 非 常 好 ， 需 要 功能 时 只 要 为 
其 附 上 相应 的 NGUI 组 件 就 可 以 完成 ， 大 部 分 功能 都 不 需要 目 己 写 代 
个。 

4. 极致 优化 

目前 最 新 的 NGUI 版 本 中 ， 对 于 UI 的 泻 染 性 能 已 经 优化 到 了 极 
致 ， 使 用 1 个 DrawCall 束 能 完成 绝 大 部 分 UI 的 泻 染 。 

5. 高 灵活 性 


NGUI 都 是 以 组 件 形式 使 用 ， 程 序 员 可 以 不 借助 任何 外 部 的 资产 进 
行 UI 的 制作 ， 可 以 让 任何 一 个 控件 通过 改变 其 组 件 的 方式 ， 目 由 地 变 
换 为 按钮 、 精 灵 、 进 度 条 、 输 入 框 等 。 


第 2 章 NGUI 基 础 


2.1 性 入 NGUI 插 件 


2.1.1 NGUI 2 


NGUI 搬 件 目 前 较 新 的 版 本 是 3.6 以 后 的 版 本 。 

在 NGUI 3.0 以 前 的 时 期 ， 底 层 的 事件 通信 体系 完全 依赖 于 
SendMessage， 这 是 一 个 效率 比较 低下 的 发 消息 方式 ， 那 个 时 期 大 多 数 
Unity 的 开发 者 都 在 使 用 当时 很 流行 的 NGUI 2.6 版 本 ， 甚 至 目前 还 有 人 少 
数 开 发 者 在 使 用 。 

在 NGUI 3.0 及 以 后 的 版 本 中 ，NGUI 进行 了 大 革新 ， 其 中 革命 性 
的 就 是 将 整个 的 故 层 消息 机 制 全 部 换 为 效率 高 的 EventDelegate。 并 有 旦 开 

人 重视 NGUI 的 性 能 优化 ， 一 直到 3.6 时 期 ，NGUI 相 比 以 前 ， 提 高 了 事 
件 分 发 的 效率 ， 将 性 能 优化 到 了 极致 ， 整 合 了 大 量 的 相近 功能 ， 并 大 
大 丰富 了 NGUI 的 功能 类 型 。 

在 本 书 中 ， 将 使 用 比较 新 的 NGUI 3.6.8 版 本 进行 讲解 ， 书 中 可 能 部 
分 截图 并 不 是 3.6.8 的 版 本 ， 但 是 NGUI 3.6.0 及 以 后 的 版 本 几乎 都 一 
样 ， 本 书 的 知识 点 通用 于 NGUI 3.6.0 及 以 后 的 所 有 版 本 ， 读 者 大 可 放 
i 


2.1.2 NGUI 的 下 载 和 购买 


NGUI 本 身 是 一 个 付费 插件 ， 开 发 者 可 以 从 Unity 官 方 的 AssetStore 
(官方 提供 的 Unity 资 源 买 卖 平台 ， 里 面 有 很 多 第 三 方 的 资源 和 插件 出 
售 ， 有 的 收费 有 的 免费 ) 中 去 购买 ， 售 价 大 约 95 美 金 (折合 人 民 币 591 
元 ) 。 用 户 可 以 从 Unity 引 警 的 编辑 器 界面 的 顶部 Window 荣 单 中 选择 
Asset Store 进 入 ， 如 图 2.1 所 示 。 也 可 以 在 浏览 强 中 输入 网 址 
https://www.assetstore.unity3d.com/ 进 入 。 

因为 NGUI 正 版 插件 价格 不 菲 ， 如 采 仅 仅 是 为 了 学 习 和 练习 ， 开 发 
者 可 以 从 网 上 去 下 载 他 人 购买 的 NGUI 播 件 包 来 使 用 ， 效 果 是 一 样 的 。 
不 管 是 从 家 方 购买 的 还 是 目 己 从 第 三 方 网 站 上 下 载 的 NGUI 皇 件 ， 它 都 
应 该 是 一 个 格式 为 “.unitypackage” 的 Unity 资 源 包 文 件 ， 如 图 2.2 所 示 。 


Next Window Ctrl+Tab 
Previous Window Ctrl+Shift+Tab 


Layouts » 


Find Item Shift+Alt+I 


Scene Ctrl+1 
Game Ctrl+2 


Inspector Ctrl+3 
Hierarchy Ctrl+4 
Project Ctrl+5 
Animation Ctrl+6 
Profiler Ctrl+7 
| Asset Store Ctrl+9 


Version ES Ctrl+0 
Animator 
Sprite Editor 


Sprite Packer (Developer Preview) 


Lightmapping 
Occlusion Culling 


Navigation 


Console Ctrl+Shift+C 
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NGUI Next-Gen UI v3.6.8.unitypackage 


A 图 2.2 


2.1.3 导入 NGUI 插 件 应 用 


当下 载 好 NGUI 的 揪 件 资源 包 之 后 ， 下 面 要 做 的 就 是 将 NGUI 资 源 
包 导 入 到 引擎 中 进行 使 用 。 

如 图 2.3 所 示 ， 在 Unity 编 辑 咽 顶部 菜单 栏 中 的 Assets 沫 单 中 选中 
Import Package， 然 后 选择 Custom Package ( 自 定 义 资源 包 ) ， 弹 出 图 
2.4 所 示 的 资源 路 径 窗 口 ， 在 其 中 找到 NGUI 资 源 包 所 在 的 位 置 ， 单 击 
“打开 ?按钮 即 可 。 


Fle Edit GameObject Component NGUI 
NGUI » 


Window 


Create » 
Show in Explorer 
Open 


Delete 


Import New Asset... 


Custom Package... 


Import Package » 


Export Package.. Character Controller 
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A 图 2.3 


从 


名 称 修改 日 期 类 型 大 小 


所 NGUI Next-Gen UI v3.6.8.unitypackage 2014/7/15 14:19 Unity package file 12,974 KB 


文件 名 (N): NGUI Next-Gen UI v3.6.8.unitypackage v| unitypackage (*. 
A 图 2.4 
特别 注意 : 请 将 NGUI 资 源 包 放 在 一 个 没有 中 文 的 路 径 下 再 进行 导 
入 (例如 F:\DownLoad\NGUI-Next-Gen-UI-v3.6.8) 。 因 为 Unity 导入 外 
部 资源 时 ， 将 无 法 导入 带 有 中 文 路 径 的 资源 ， 例 如 FA\ 下 载 \NGUI-Next- 
Gen-UI-v3.6.8 因 为 将 NGUI 放 在 了 中 文 名 文件 夹 < 下载 ? 之 下 ， 将 导致 
NGUI 资 源 包 无 法 成 功 导 入 。 


单 击 “打开 ”按钮 后 ， 等 待 Unity 引 擎 解压 资源 包 ， 然 后 将 会 在 Unity 
引擎 界面 中 弹出 图 2.5 所 示 的 和 窗口， 展示 该 资源 包 的 内 容 列表 ， 让 用 户 
选择 导入 哪些 资源 《默认 情况 下 是 全 部 选择 ) ， 此 时 因为 其 已 经 默认 
全 部 选择 ， 可 以 直接 单 击 Import 按 钮 ， 将 其 全 部 导入 。 


| Importing package [x 
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A 图 2.5 

导入 成 功 后 ， 可 以 看 到 NGUI 文 件 在 Project 视 图 中 的 结构 图 (如 图 
2.6 所 示 ) ， 其 中 Editor 文 件 夹 是 编辑 器 所 用 的 ， 不 用 管 它 ，Examples 文 
件 夹 是 Unity 制 作 的 一 些 基 本 案例 ， 读 者 可 以 从 Examples 下 面 的 Scenes 
文件 夹 中 选择 它 制 作 的 范例 场景 来 参看 一 些 基 础 功能 的 制作 ， 如 图 2.7 
所 示 。Resources 文 件 夹 存储 着 NGUI 上 自 带 范例 所 用 到 的 资源 。 最 后 就 是 
整个 NGUI 对 于 开发 者 来 说 最 核心 的 文件 夹 : Scripts， 这 里 面 是 NGUI 已 
经 封装 好 的 各 个 功能 模块 的 脚本 ， 当 需要 使 用 时 只 要 把 相应 的 脚本 变 
成 UI 物体 的 组 件 惑 可 以 进行 相 天 的 操作 了 ， 本 书 在 后 文 将 会 介绍 更 简 
单 的 使 用 方式 ,* 
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A 图 2.7 
另外 ， 是 
NGUI 识 单 ， 如 图 2.8 所 示 ， 这 个 训 单 将 会 是 以 后 使 用 NGUI 制 作 UI 系 统 
最 常用 的 一 个 菜单 。 
名 


File Edit Assets GameObject Component | NGUI | Window Help 


Selection 

Create 

Attach 

Tween 

Open 

Options 

Extras 

Normalize Depth Hierarchy Alt+Shift+0 


Help 


A 图 2.8 
好 了 ， 到 这 里 就 已 经 说 明 你 已 经 成 功 地 导入 了 NGUI 插 件 ， 这 个 插 
件 包 大 约 12MB， 不 过 完全 不 用 担心 它 会 让 你 的 项 目 安 装 包 增 大 很 多 ， 
因为 NGUI 择 件 包 导入 后 并 不 存在 于 Resources 文 件 夹 下 面 ， 所 以 在 项 目 
工程 最 后 发 布 时 ， 它 只 会 将 NGUI 资 源 包 中 你 所 用 到 的 部 分 纳入 打包 资 
源 ， 对 项 目 发 布 的 游戏 安装 包 体积 的 影响 几乎 可 以 忽略 不 计 。 


2.1.4 导入 常见 问题 


(1) 如 果 我 的 工程 文件 中 已 经 导入 过 一 次 NGUI 的 资源 包 了 ， 此 
时 我 再 导入 一 个 新 的 NGUI 资 源 包 会 有 什么 结果 ? 

答 : 会 根据 路 径 蔡 换 掉 同 名 文件 ， 并 导入 额外 的 新 文件 。 

(2) 导入 解压 后 ， 并 没有 弹出 图 2.5 所 示 的 资源 包 内 容 预览 窗口 ， 
而 是 在 Unity 编 辑 器 窗口 撒 部 报 出 了 一 行 如 图 2.9 所 示 的 错误 ， 怎 么 办 ? 


A 图 2.9 
答 : 这 是 因为 你 将 NGUI 资 源 包 放 在 了 一 个 带 有 中 文 名 称 的 文件 夹 


路 径 下 ，Unity 导 入 任何 带 有 中 文 路 人 径 的 资源 包 时 ， 都 会 弹出 这 个 错误 
导致 无 法 导入 。 请 将 你 要 导入 的 资源 包 放 在 一 个 没有 任何 中 文 的 路 径 
下 再 进行 导入 。 

(3) 我 怎样 查看 我 的 NGUI 版 本 是 多 少 ? 

答 : 在 Project 窗 口中 ， 选 择 Assets 文 件 夹 下 面 的 NGUI 文 件 夹 ， 然 


后 会 看 到 一 个 ReadMe 的 版 本 说 明文 件 ， 这 个 文件 名 会 带 有 版 本 号 ， 如 
图 2.10 所 示 。 


A 图 2.10 


2.2 认识 基本 的 UI 
2.2.1 什么 是 UI 精灵 (Sprite) 


我 们 在 制作 UI 时 ， 经 常 将 一 些 零碎 的 小 的 UI 资源 (比如 ， 一 个 小 
箭头 、 人 人 张大 图 ， 然 后 在 使 用 时 ， 只 使 用 这 个 大 
图 中 的 一 部 分 〈 例 如 ， 只 使 用 其 中 小 箭头 的 那 一 小 块 ) ， 那 么 这 一 块 
ee 

如 图 2.11 所 示 的 束 是 一 个 义 一 个 的 UISprite 。 


全 个 要 要 人 BE 


A 图 2.11 


2.2.2 什么 是 UI 图 集 (Atlas) 


我 们 在 制作 UI 时 ， 会 将 一 些 零 碎 的 小 的 UI 资 源 打 包 到 一 张大 图 
中 ， 然 后 再 通过 精灵 的 方式 对 这 张大 图 进行 使 用 ， 这 张大 图 就 是 一 个 
图 集 。 这 样 不 但 可 以 减 小 美术 资源 的 总 体积 ， 还 可 以 减少 载 入 内 存 的 
操作 (图 集 作 为 一 张 整 图 会 被 一 次 性 载 入 到 内 存 中 ) 并 提高 泻 染 性 
能 ， 而 且 还 可 以 减少 维 扩大 量 委 人 雄 小 资源 的 麻烦 。 

如 图 2.12 所 示 的 则 是 一 个 由 Sprite 组 成 的 图 集 。 


2.2.3 什么 是 UI 贴图 (Texture) 


在 NGUI 中 也 有 UITexture 的 概念 ， 这 个 UITexture 从 功能 用 途上 和 
Sprite 精 灵 有 很 大 的 相似 之 处 ， 都 是 为 了 显示 一 些 图 片 资源 。 它 和 Sprite 
最 大 的 区 别 在 于 ，UITexture 是 一 张 独立 的 图 ， 不 依托 于 任何 的 图 集 ， 
这 张 Texture 有 目 己 的 材质 球 和 Shader， 每 一 个 UITexture 都 将 消耗 一 个 
DrawCall (不 了 解 的 读者 可 以 理解 为 一 个 性 能 消耗 单位 ;去 演 染 ， 
一 个 UITexture 都 将 独立 进行 加 载 。 

如 图 2.13 中 的 大 背景 图 就 是 UITexture 。 
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A 图 2.13 


2.2.4 什么 是 UI 标签 (Label) 


标签 (Label) 在 NGUI 中 并 不 是 指 一 种 标记 物 ， 而 是 指 一 种 纯 文本 
的 UI 元 素 。 几 是 由 程序 在 UI 上 打出 来 的 字 ， 都 属于 标签 的 内 容 。 例 
如 ， 如 果 你 需要 在 界面 上 长 期 地 显示 一 行 字 : 请 打开 背包 进行 整理 ， 
那么 这 行 字 属于 一 个 Label。 再 比如 ， 如 果 你 需要 显示 角色 的 生命 值 为 
100/200， 这 个 数字 会 随 着 角色 的 生命 值 而 变化 ， 送 个 生命 信 的 数字 也 
属于 一 个 标签 ， 然 后 代码 会 根据 角色 的 血 量 去 读 取 并 改变 这 个 标签 的 
内 容 。 

如 图 2.14 所 示 框 中 所 有 的 文字 信息 都 属于 Label。 
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A 图 2.14 


2.2.5 什么 是 UI 字体 (Font) 


在 制作 UI 的 过 程 中 ， 不 可 能 所 有 地 方 都 由 美术 完成 ， 最 典型 的 例 
子 就 是 UI 上 面 的 文字 。 很 多 时 候 UI 上 面 的 文字 都 是 不 停 地 在 进行 变 
化 ， 并 且 没 有 什么 复杂 的 艺术 字 歼 果 ， 不 可 能 全 部 由 美术 制作 成 图 片 
提供 给 程序 ， 这 个 时 候 就 需要 程序 在 UI 上 进行 写字 。 程 序 在 UI 上 写字 
时 ， 束 将 用 到 UI 字体 。 


NGUI 的 字体 分 为 动态 字体 和 静态 字体 。 程 序 人 员 可 以 选择 把 某 种 
特殊 字体 文件 中 的 一 些 所 需 的 字 拿 出 来 形成 一 张 图 ， 然 后 打字 时 会 从 
这 张 图 里 去 调用 文字 (类 似 于 调用 Sprite) ， 这 就 是 静态 字体 。 也 可 以 
直接 导入 字体 文件 (例如 ， 宋 体 、 楷 体 等 字体 文件 ) ， 打 字 时 只 要 字 
体 文件 里 拥有 的 字 都 能 正常 使 用 ， 这 就 是 动态 字体 。 当 然 ，NGUI 有 系 
统 自 带 的 默认 动态 字体 。 

如 图 2.15 所 示 则 为 静态 字体 图 集 ， 图 2.16 所 示 则 为 动态 字体 文件 

(ttf 格 式 ) 。 
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A 图 2.16 


| 一 个 UI 
2.3.1 学 会 解剖 UI 的 资源 结构 


为 什么 要 剖析 UI 的 资源 结构 ? 因为 通常 情况 下 ， 策 划 设 计 好 UI 的 
功能 和 大 概 布局 之 后 ， 美 术 人 员 会 做 出 一 张 UI 的 成 品 效 果 图 ， 我 们 称 
之 为 UI 设计 图 。 然 后 ， 客 户 端 程序 需要 根据 自己 的 制作 方式 ， 告 诉 美 
术 人 员 如 何 分 割 出 相应 的 UI 元 素 提 交 给 程序 ， 以 完成 制作 。 


请 输入 密码 


A 图 2.17 

下 面 以 图 2.17 所 示 的 UI 设计 图 作为 例子 来 讲解 分 析 。 上 首先 说 明 一 
点 ， 客 户 端 程序 一 定 要 同时 拿 到 UI 设计 图 和 UI 功能 描述 文档 才能 彻底 
知道 这 个 UI 会 进行 什么 样 的 操作 逻辑 ， 此 时 才能 准确 地 对 UI 资 源 结构 
进行 剖析 。 主 要 有 以 下 一 些 方法 。 

e 看 设计 图 ， 从 相关 设计 文档 了 解 该 UI 的 功能 。 

在 不 了 解 UI 功 能 的 情况 下 ， 程 序 只 看 设计 图 不 一 定 能 准确 地 明日 
这 个 UI 的 全 部 用 途 ， 为 了 减少 返工 ， 请 务必 先 了 解 该 UI 模块 的 全 部 功 
能 。 如 图 2.17 所 示 ， 则 是 一 个 典型 的 登录 UI。 

e 观 察 UI 的 设计 图 ， 判 断 哪些 字 是 程序 可 以 写 的 ， 哪 些 字 是 程序 写 
不 了 的 。 


在 图 中 我 们 发 现 有 “ 痘 录 ”“ 请 输入 账号 ”请 输入 密码 ”等 Label。 其 
中 ,，“ 请 输入 账号 "和 “请 输入 密码 ”两 个 标签 的 文字 并 没有 什么 特殊 的 美 
术 效 果 ， 完 全 可 以 由 程序 来 完成 ， 就 不 需要 美术 提供 图 片 资 源 了 。 

而 “账号 > 和 “密码 ”两 个 标签 ， 虽然 本 图 中 可 以 由 程序 完成 ， 但 是 如 
果 人 页 到 那 种 有 特殊 美术 效果 (比如 ， 文 字 上 有 华丽 的 渐变 和 高 光 等 效 
果 ， 程 序 是 完成 不 了 的 ) 的 ， 则 需要 让 美术 提供 一 张 写 有 相应 文字 的 
图 片 ， 用 Sprite 去 代替 这 个 Label 。 

后 文 我 们 会 详细 讲解 什么 情况 下 使 用 Label。 

e 通 过 设计 图 判断 哪些 是 Sprite， 充 分 考虑 复 用 性 。 

凡是 夫人 碎 隐 、 小 的 图 片 资源 ， 都 可 以 是 Sprite。 如 图 2.17 中 ， 输 
入 账号 密码 有 一 个 底 框 ， 整 个 界面 又 有 一 个 底 框 ， 这 些 都 可 以 让 美术 
人 员 切 成 单独 的 Sprite， 然 后 由 程序 来 进行 拼装 。 

在 分 割 Sprite 时 ， 尽 量 分 割 得 细 一 点 ， 如 图 2.17 中 所 示 ， 我 们 可 以 
将 整个 UI 的 大 底 框 和 输入 账号 密码 的 两 个 底 框 合并 在 一 起 切 给 程序 ， 
但 是 这 样 将 导致 这 个 UI 图 片 无 法 用 于 其 他 地 方 。 如 有 果 整 个 UI 的 大 讨 框 
和 输入 账号 密码 的 两 个 小 底 框 分 开 来 切 ， 那 么 以 后 其 他 需要 用 底 框 的 
地 方 ， 束 可 以 复 用 图 中 切 出 的 UI 资源 。 

相同 的 UI 元 素 只 需要 一 份 束 够 了 ， 例 如 图 中 输入 账号 的 底 框 和 输 
入 密码 的 底 框 是 一 样 的 ， 于 是 只 需要 切 出 一 份 就 可 以 了 。 

后 文 我 们 会 详细 讲解 什么 情况 下 使 用 Sprite 和 Text ure 。 

e 通 过 设计 图 判断 出 按钮 资源 的 制作 方式 。 

按钮 笼统 地 分 有 两 种 形式 ， 一 种 是 普通 按钮 ， 也 束 是 一 张 没有 文 
字 的 按钮 图 片 ， 程 序 人 员 在 需要 用 时 ， 束 在 上 面 写 上 “确定 ”等 不 同 
的 、 当 前 所 需要 的 文字 。 男 一 种 按钮 则 是 图 片 按 钮 (以 前 旧版 本 NGUI 
的 ImageButton) ， 这 种 按钮 的 特点 是 整个 按钮 就 是 一 张 图 片 ， 它 既是 
按钮 也 是 图 片 。 


如 图 2.17 中 所 示 ， 登 录 和 注册 两 个 按钮 几乎 一 模 一 样 ， 只 是 上 面 的 
文字 有 区 别 ， 而 “登录 ”和 “注册 ”这 几 个 文字 明显 是 程序 可 以 写 出 的 文字 
效果 ， 于 是 可 以 让 美术 人 员 切 出 一 张 普通 按钮 资源 的 底 图 ， 然 后 程序 
再 在 上 面 写字 。 

后 文 我 们 会 详细 讲解 什么 情况 下 使 用 按钮 。 

e 通 过 设计 图 判断 其 他 控件 。 

要 比较 迅速 地 结合 UI 的 功能 判断 出 UI 中 的 一 些 其 他 控件 ， 例 如 假 
设 这 是 一 个 人 物 生命 法 力 的 状态 栏 ， 那 么 一 定 要 区 分 出 UI 中 是 否 有 用 
来 显示 人 物 生 命 法 力 值 的 进度 条 ， 如 果 有 进度 条 ， 则 进度 条 需要 上 面 
切 一 条 表层 条 ， 下 面 切 一 个 空 楷 底 板 条 。 

后 文 我 们 会 对 相关 知识 进行 详细 说 明 。 

在 剖析 UI 资源 结构 的 时 候 ， 有 无 数 种 方案 ， 每 一 种 方案 UI 美术 人 
员 基 本 都 能 完成 ， 程 序 人 员 也 能 完成 相应 的 功能 。 但 是 ， 我 们 一 定 要 
通过 充分 的 分 析 去 使 用 一 种 相对 更 好 的 方案 ， 这 样 对 项 目 以 后 的 修改 
和 拓展 都 有 好 处 。 在 剖析 UI 资 源 结 构 时 一 定 要 秉承 以 下 几 个 原则 : 

e 尺 量 保证 还 原 设计 图 的 效果 ， 不 损失 质量 ， 这 是 前 提 。 

e 尺 量 发 现 重复 的 元 件 ， 而 且 重 复 的 元 件 只 需要 一 份 就 足够 。 

e。 尺 量 分 割 得 零碎 一 点 ， 避 人 免 多 个 元 件 合 并 在 一 起 出 图 ， 这 样 对 项 
目 不 利 (后 文 会 详细 讲解 ) 。 

e 尺 量 使 用 九宫 格 来 制作 比较 大 的 底板 、 底 框 等 (后 文 会 详细 讲 
解 ) 。 

eUI 切 图 全 部 让 美术 人 员 以 PNG 格 式 导出 。 


当 美 术 人 员 提 交 给 你 大 量 和 零碎 的 UI 元 件 时 ， 就 可 以 开始 进行 UI 的 
制作 了 。 制 作 的 首要 任务 是 先 将 换 源 导入 到 引擎 中 去 。 首 先 在 Unity 的 


Project 窒 口 下 的 Assets 文 件 夹 下 面 建立 一 个 文件 炎 ， 将 该 文件 夹 命 名 为 
Resources， 表 示 这 个 项 目的 资源 都 放 在 这 个 文件 夹 下 面 ，UI 资 源 也 不 
例外 。 这 个 文件 夹 名 字 一 定 要 设 定 为 Resources， 不 能 改动 。 

这 里 讲 一 下 为 什么 一 定 要 设 定 一 个 名 为 Resources 的 专门 的 资源 文 
件 夹 。Unity 开发 中 ， 如 果 涉 及 动态 加 载 (在 游戏 中 触发 了 某 个 条 件 才 
需要 加 载 ) 的 情况 ， 比 如 需要 临时 生成 一 个 烟火 特效 等 ， 都 会 用 到 
Unity 的 资源 加 载 方法 : Resources.Load () ; 这 要 求 需要 被 动态 加 载 的 
资源 一 定 要 放 在 Assets 下 面 一 个 叫 Resources 的 文件 夹 中 。 而 UI 经 常会 涉 
及 根据 不 同情 况 动 态 加 载 UI 模 块 的 情况 ， 所 以 一 般 情况 下 ， 我 们 都 会 
将 UI 的 资源 放 在 Assets 目 孙 下 的 Resources 文 件 夹 中 。 

但 是 也 不 是 所 有 资源 都 放 在 Resources 文 件 夹 中 就 万 事 无 居 了 。 因 
为 Unity 在 生成 游戏 安装 包 时 ， 对 于 Resources 以 外 的 文件 夹 ， 只 会 打 
包 场 景 中 用 到 的 资源 文件 ， 而 对 于 Resources 文 件 夹 ， 因 为 涉及 动态 地 
往 内 存 里 加 载 资源 ， 所 以 Unity 会 无 条 件 的 全 部 打包 。 如 果 不 加 考量 的 
把 所 有 资源 都 放 到 Resources 目 孙 下 ， 可 能 会 导致 最 终 得 到 的 游 戏 安 装 
包 体积 变 大 。 

这 时 我 们 可 以 在 Resources 目 录 下 建 一 个 名 为 UI 的 文件 来 ， 用 来 单 
独 存 储 UI 资 源 ， 以 避免 UI 资源 和 其 他 的 角色 、 特 效 等 资源 放 在 一 起 难 
以 管理 。 全 部 选中 美术 人 员 提 区 的 UI 元 件 ， 一 起 拖 电 到 Unity 界 面 中 的 
“Resources\UIV 目 孙 下 ， 等 待 Unity 读 取 资 源 之 后 ， 我 们 导入 的 资源 会 
显示 在 “Resources\UI* 目 隶 下 ， 这 样 束 完成 了 人 资源 的 导入 ， 如 图 2.18 所 
示 。 


A 图 2.18 


2.3.3 用 Atlas Maker 


刚刚 我 们 已 经 将 UI 元件 的 源 文件 全 部 导入 到 了 Unity 中 相应 的 文 
件 夹 目 好 下 ， 在 Unity 的 Project 和 窗口 中 全 部 选中 刚才 导入 的 UI 元 件 ， 单 
击 鼠 标 右键 ， 选 择 最 顶部 NGUI 荣 单 ， 选 择 Open Atlas Maker (Atlas 
Maker 是 NGUI 自 带 的 一 个 UI 图 片 打 包工 具 ) ， 这 样 融 能 自动 将 这 些 UI 
元 件 放 入 到 Atlas Maker 中 ， 如 图 2.19 所 示 。 

在 Mac 系 统 下 ， 右 键 琳 单 如 有 果 没 有 NGUI 先 项， 那么 可 以 选中 导入 
的 UI 元 件 ， 在 Unity 顶 部 的 荣 单 栏 中 ， 选 择 NGUI 荣 单 ， 然 后 选择 
Open\Atlas Maker 即 可 。 

打开 后 的 Atlas Maker 界 面 如 图 2.19 所 示 。 


A 图 2.19 
图 2.19 中 ， 标 号 为 1 的 红 框 是 已 有 图 集 的 选择 按钮 ， 如 果 你 需要 将 


这 些 新 导入 的 UI 素材 资源 全 部 新 增 到 一 个 已 有 的 图 集 里 ， 就 可 以 单 击 
这 里 。 单 击 后 能 看 到 当前 项 目 工程 中 已 有 的 所 有 的 图 集 ， 然 后 可 以 选 
择 其 中 一 个 图 集 ， 此 时 标号 为 2 的 红 框 处 的 按钮 将 变 成 Add/Update， 
这 样 束 可 以 新 增 或 者 更 新 这 批 资源 到 已 有 的 选 定 的 图 集中 了 。 

图 2.19 中 标号 为 2 的 红 框 是 主 按钮 ， 当 要 打包 的 UI 系 材 资源 没有 碗 
定 打包 到 某 个 已 有 图 集中 去 时 ， 这 个 主 按钮 会 显示 Create， 意 为 用 这 些 
资源 创建 一 个 全 新 的 图 集 。 如 果 通 过 标号 1 的 红 框 处 的 按钮 选择 了 一 个 
已 有 图 集 的 话 ， 这 个 主 按钮 将 变 成 Add/Update， 意 为 新 增 /更 新 当前 这 
批 UI 资 源 到 选中 的 图 集中 。 更 新 的 机 制 为 同名 的 Sprite 图 片 将 会 被 蔡 
换 。 

图 2.19 中 标号 3 处 的 红 框 显示 的 是 当前 选中 的 UI 图 片 资源 的 序号 和 
文件 名 称 ， 标 号 4 处 的 红 框 显示 的 是 这 些 资源 哪些 是 新 增 的 ， 哪 些 是 更 
新 的 ;哪些 是 已 有 的 。 在 这 里 ， 如 果 选 中 了 一 个 已 有 岁 集 ， 那 么 该 图 
集中 的 Sprite 也 会 一 起 显示 出 来 ， 如 图 2.20 所 示 。 在 图 2.20 中 ， 红 框 1 则 
表示 当前 选中 了 一 个 已 有 的 名 为 FantasyAtlas 的 图 集 。 红 框 2 是 编辑 图 


集 和 新 建 图 集 的 按钮 。 红 框 3 的 按钮 由 Create 变 为 了 Add/Update。 红 框 4 
显示 出 了 该 图 集 已 有 的 Sprite， 在 最 尾部 有 一 个 删除 按钮 ， 单 击 之 后 ， 
将 会 从 这 个 图 集中 删除 该 Sprite。 如 有 条 此 时 单 击 Add/Update 按 钮 ， 那 么 
Sprites 列 表 中 尾部 标记 为 绿色 的 Add 的 精灵 图 片 将 会 被 新 增 到 这 个 图 集 
途中 

如 果 需 要 更 新 现 有 图 集中 的 某 一 个 精灵 ， 则 将 新 的 精灵 图 片 文件 
的 名 字 设 为 和 它 要 替换 的 精灵 的 名 字 一 样 ， 然 后 按照 以 上 步 又 选择 它 
要 替换 的 精灵 所 在 的 图 集 ， 单 击 Add/Update 即 可 实现 直接 替换 资源 。 


这 在 项 目 开 发 中 是 非常 实用 的 ， 当 美术 人 员 希 望 修改 UI 资 源 、 用 更 新 
的 UI 资 源 替 换 之 前 的 旧 资 源 时 ， 这 个 目 动 更 新 功能 将 会 让 程序 员 非 常 
为 但 8 


A 图 2.20 
下 面 继 续 创建 属于 我 们 自己 的 第 一 个 图 集 ， 当 打开 Atlas Maker 之 
后 ， 我 们 看 到 的 是 图 2.19 所 示 的 界面 。 我 们 需要 创建 一 个 全 新 的 图 集 ， 
所 以 单 击 Create 主 按钮 ， 然 后 会 弹出 Save As 对 话 框 ， 将 路 径 定 位 到 


Resources\UI 目 永 下 ， 人 然后 将 图 集 的 名 称 改 为 *MyFirstAtlas”， 单 击 “ 保 
存 ” 按 钮 即 可 ， 如 图 2.21 所 示 。 注 意 ， 不 要 改变 文件 的 后 缀 名 ， 文 件 保 
存 后 是 一 个 Prefab 。 


图 集 名 称 ， 不 要 修改 它 的 后 组 名 


文件 名 (N): | MyFirstAtlas.prefab 
保存 类 型 (D): prefab (*.prefab) 


全 隐 藻 文件 夫 


A 图 2.21 
单 击 “ 保 存 ” 按 钮 之 后 ， 我 们 可 以 看 到 Atlas Maker 界 面 已 经 变 成 了 如 
图 2.22 所 示 的 情况 ， 这 表明 图 集 已 经 创建 成 功 ， 中 间 的 主 按钮 变 成 了 
View Sprites， 单 击 后 可 以 预览 该 图 集中 所 拥有 的 精灵 。 


A 图 2.22 


关闭 Atlas Maker 界面 ， 然 后 注意 看 Project 窗口 中 ，Resources\UI 
目录 下 除了 我 们 之 前 导入 的 UI 图 片 资 源 以 外 ， 多 出 了 3 个 名 为 
“MyFirstAtlas” 的 文件 ， 如 图 2.23 所 示 。 这 3 个 文件 是 一 个 图 集 必须 具 
备 的 3 个 文件 ， 图 集 的 贴图 、 图 集 的 材质 球 和 图 集 的 预 设 体 。 其 中 ， 
第 一 个 球形 图 标的 MyFirstAtlas 文件 为 图 集 的 材质 球 ;， 第 二 个 监 色 方块 
的 文件 为 图 集 的 预 设 体 ， 第 三 个 图 片 缩 略 图 文件 则 是 图 集 的 贴图 ， 也 
就 是 精灵 合成 为 一 张 整 图 之 后 的 图 片 。 

至 此 ， 我 们 的 第 一 个 图 集束 算 制 作 完 成 了 ， 这 个 图 集 在 后 面 制作 
UI 时 就 可 以 直接 使 用 了 。 针 对 Atlas， 还 有 很 多 功能 和 用 法 ， 例 如 九宫 
格 等 ， 我 们 会 在 本 书 的 后 半 部 分 讲 到 。 

特别 注 明 : 在 制作 完 UI 图 集 之 后 ， 我 们 可 以 将 之 前 导入 Unity 的 UIl 
资源 源 文件 删除 以 减 小 资源 量 。 


A 图 2.23 


2.4 一 个 UI 


2.4.1 为 什么 UI 


在 游戏 的 项 目 开 发 中 ， 字 体 是 经 间 会 用 到 的 东西 ， 因 为 游戏 中 不 
论 是 聊天 、 公 告 、 提 示 语 还 是 界面 显示 ， 都 会 涉及 用 程序 来 写字 。 一 
般 来 说 ， 会 有 系统 默认 字体 供 我 们 使 用 ， 但 是 出 于 以 下 两 个 原因 我 们 
经 常会 需要 制作 独特 的 字体 。 

e 系 统 字 体 的 风格 和 美观 程度 等 无 法 满足 我 们 的 需求 。 

一 般 来 说 ， 系 统 字体 都 比较 死板 、 生 硬 ， 风 格 单一 ， 经 常 无 法 满 
足 项 目 需求 。 例 如 ， 我 们 希望 游戏 中 所 有 文字 都 使 用 楷书 来 突出 中 国 
风 ， 那 么 则 需要 我 们 自己 植 入 楷书 字体 。 再 例如 ， 我 们 需要 在 某 些 地 
方 显 示 一 些 造型 独特 的 字体 ， 更 需要 制作 我 们 自己 独特 的 字体 文件 才 
能 满足 这 种 需求 。 


e 应 对 系统 字体 丢失 的 情况 。 

某 些 玩家 (特别 是 安 卓 玩 家 ) 如 果 经 常 从 网 上 下 载 一 些 个 性 化 的 
字体 管理 软件 ， 会 很 容易 导致 系统 字体 丢失 ， 这 种 情况 一 旦 发 生 ， 会 
导致 游戏 内 所 有 的 文字 都 不 能 正常 显示 。 为 了 以 防 万 一 ， 我 们 需要 植 
入 一 套 目 己 的 字体 在 游戏 资源 包 内 部 。 


2.4.2 静态 字体 和 动态 字体 


我 们 在 2.2 玉 中 已 经 介绍 了 什么 是 静态 字体 和 什么 是 动态 字体 ， 这 
里 我 们 来 了 解 一 下 什么 情况 下 需要 静态 字体 ， 什 么 情况 下 需要 动态 字 
体 。 

当 有 大 面积 的 字体 需求 ， 并 且 需 要 的 文字 几乎 渔 盖 大 部 分 汉字 
时 ， 我 们 束 需 要 制作 动态 字体 。 与 其 说 古 制作 动态 字体 ， 不 如 说 是 植 
入 动态 字体 ， 因 为 在 新 版 的 NGUI 中 ， 制 作 动 态 字 体 只 需要 导入 一 个 
TTF 格 式 的 字体 文件 即 可 。 

当 在 某 些 地 方 有 特殊 字体 的 需求 ， 并 且 这 种 字体 显示 的 文字 有 限 
时 ， 例 如 受到 伤害 时 ， 角 色 头 顶 需 要 味 出 一 个 有 艺术 效果 的 数字 来 表 
示 伤 害 量 ， 这 种 字体 效果 只 会 显示 0~9 共 10 个 数字 而 已 ， 其 他 地 方 都 
用 不 到 这 种 字体 ， 那 么 这 个 时 候 我 们 就 可 以 为 它 制 作 一 个 静态 字体 。 

具体 来 说 ， 静 态 字 体 和 动态 字体 有 以 下 实质 区 别 。 

e 静 态 字 体 中 ， 如 果 需 要 用 到 的 文字 不 多 ， 打 成 图 集 后 资源 量 往往 
比 动态 字体 小 ， 一 个 动态 字体 的 TITF 格 式 文件 一 般 为 3~6MB。 

e 静 态 字 体 可 以 通过 提供 一 张 目 定义 的 含有 所 需 文字 的 图 片 和 一 个 
配置 文件 “记录 图 片 哪 一 块 是 哪个 字 的 文件 ) 来 完成 。 动 态 字体 只 能 
通过 导入 整个 TTF 格 式 的 字体 文件 完成 。 

e 前 态 字 体 中 的 字 一 般 非 第 有 限 ， 只 有 极 少 数 的 字 (否则 图 片 资 源 
会 非常 大 ) ， 所 以 应 用 范围 非 党 小， 几乎 很 少 用 到 静态 了 字体。 而 动态 


字体 几乎 包含 所 有 的 文字 ， 补 广泛 运用 。 


2.4.3 A 2 


静态 字体 曾经 风靡 一 时 ， 原 因 是 那 时 候 NGUI 旧 版 本 对 动态 字体 文 
持 不 是 很 好 ， 所 以 很 多 时 候 得 依赖 静态 字体 。 目 前 NGUI 对 动态 字体 文 
持 很 好 ， 所 以 静态 字体 的 应 用 束 变 得 很 少 ， 只 有 在 特殊 情况 下 才 使 
用 。 

要 制作 静态 字体 ， 需 要 将 字 筛 选 出 来 打 成 一 个 图 集 ， 并 生成 一 份 
记录 其 中 哪 一 块 是 哪个 字 的 配置 文件 ， 这 时 可 以 借助 一 个 名 为 BMFont 
的 软件 将 其 制作 出 来 。 制 作出 这 两 份 文件 之 后 ， 导 入 到 Unity 里 。 

在 Unity 界 面 中 ， 在 Project 窗 口内 单 击 岂 标 右键 ， 远 择 NGUI 采 单 ， 
选择 Open BipMap Font Maker， 打 开 流 程 和 打开 Atlas Maker 极 其 相似 。 
Mac 电 脑 可 以 通过 Unity 顶 部 沫 单 栏 中 的 NGUI 荣 单打 开 。 

然后 会 弹出 如 图 2.24 所 示 的 界面 ， 在 Type 中 选择 Imported 
Bitmap， 然 后 在 Font Data 中 选择 我 们 之 前 制作 出 的 那个 记录 文字 位 置 
言 息 的 配置 文件 〈 最 好 是 TXT 格式 ) ， 在 Texture 中 选择 我 们 之 前 制作 
出 的 那个 文字 图 集 ， 然 后 单 击 主 按钮 Create the Font， 即 可 创建 出 一 个 
静态 字体 ， 创 建 出 来 的 字体 文件 和 制作 图 集 得 到 的 文件 类 似 。 制 作 好 
后 ， 以 后 我 们 需要 用 字体 的 时 候 ， 选 择 这 个 字体 的 预 设 即 可 。 

注意 ， 制 作 完 成 后 不 要 删除 导入 的 那 张 文字 图 集 和 文字 位 置 的 配 
置 文 件 的 源 文 件 ， 如 果 删 除 将 会 导致 字体 读 不 出 文字 。 


A 图 2.24 


2.4.4 制作 动态 字体 介绍 


在 新 版 本 的 NGUI 中 〈 比 如 ，3.6 以 后 ) ， 制 作 动态 字体 非常 测 单 ， 
只 需要 从 网 上 下 载 一 个 TTF 格 式 的 字体 文件 即 可 。 然 后 将 这 个 字体 文件 
导入 Unity 中 就 算 完成 了 ， 以 后 需要 用 字体 的 时 候 ， 就 能 直接 调用 这 个 
字体 。 

注意 ， 字 体 文件 要 选择 简体 中 文 的 ，TTF 文 件 大 小 一 般 为 3 一 
6MB， 如 采 远 远 超 出 了 这 个 数 ， 一 般 来 说 很 有 可 能 是 字体 中 包含 了 很 


多 种 语言 。 


2.5 他 一 “II 


2.5.1 创建 一 个 2D UI 


制作 UI 时 ， 首 先 我 们 要 创建 UI 的 “ 根 ”。 在 Unity 顶 部 NGUI 荣 单 中 选 
择 Create， 然 后 选择 2D UI， 如 图 2.25 所 示 。 


File Edit Assets GameObject Component | NGUI Window Help 

Selection | 

Create Sprite Alt+Shift+S 
Attach Label Alt+Shift+L 
Tween Texture Alt+Shift+T 
Open Unity 2D Sprite Alt+Shift+D 
Options Widget Alt+Shift+W 
Extras 

Normalize Depth Hierarchy Alt+Shift+0 


Anchor (Legacy) 
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Help Scroll View 
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2D UI 

3D UI 


A 图 2.25 
创建 完成 后 ， 我 们 能 看 到 图 2.26 所 示 的 景象 ， 在 Scene 窗 口中 ， 
NGUI 目 动 生成 了 一 个 名 为 UI Root 的 物体 ， 其 中 市 有 一 个 Camera 作为 
子 物体 。 


Unity - Untitled - NGUC— 


File Edit Assets GameObject Component NGUI Window Help 


A 图 2.26 

这 个 新 生成 的 Camera， 是 NGUI 生 成 的 专门 用 来 渲染 UI 的 相机 ， 当 
我 们 生成 NGUI 的 UI Root 时 ， 就 上 自动 将 生成 的 UI 的 layer 设 为 了 第 8 层 。 
在 这 个 相机 中 ， 只 能 看 见 第 8 层 的 物体 ， 也 就 是 只 能 看 见 UI。 因 为 是 
2D UI， 所 以 我 们 从 图 中 可 以 看 到 相机 是 正 交 相机 。 

图 2.26 中 红色 的 和 矩形 是 相机 的 视窗 大 小 比例 ， 它 会 根据 Game 视图 
中 的 屏幕 长 宽 比 设置 自动 调整 。 


创建 3D UI 的 过 程 和 创建 2D UI 的 过 程 类 似 ， 创 建 出 来 的 3D UI 如 图 
2.27 所 示 ，NGUI 依 然 目 动 生成 了 一 个 名 为 UI Root 的 物体 ， 并 市 有 一 个 
Camera 子 物 体 ， 这 个 原理 和 2D UI 类 似 ， 其 中 最 大 的 区 别 就 是 相机 的 
模式 。3D UI 的 相机 在 Scene 视窗 中 是 一 个 正 交 摄像 机 ， 将 会 文 持 UI 的 
三 维 透视 效果 。 


在 我 们 创建 的 UI 中 ， 可 以 发 现 UI Root 物体 和 Camera 物体 上 面 都 带 
有 NGUI 特 有 的 脚本 组 件 ， 其 中 UI Root 物体 上 带 有 UIRoot 和 UIPanel 
两 个 组 件 ， 而 子 物体 Camera 市 有 一 个 UICamera 组 件 ， 这 几 个 组 件 都 是 


NGUI 体 系 中 比较 核心 的 组 件 ， 下 面 我 们 来 简单 了 解 一 下 。 


A 图 2.27 


1. UIRoot 组 件 

UIRoot 组 件 总 是 出 现在 NGUI 的 UI“ 树 ”的 最 顶层 ， 也 就 是 那个 “ 根 ” 
物体 中 。 它 的 作用 是 缩放 UI。 我 们 在 让 美术 人 员 作 图 时 知道 ，UI 一 般 
都 是 以 像素 作为 单位 ， 比 如 1920*1080 等 ， 而 Unity 中 则 是 以 米 为 单位 ， 
如 果 一 个 100*100 像 素 的 UI 元 件 放 入 到 一 块 1000*1000 分 辨 率 的 屏幕 
中 ， 按 理 说 这 个 UI 元 件 应 该 是 屏幕 大 小 的 1%， 但 是 因为 Unity 中 的 单位 
是 米 ， 所 以 它 会 从 100*100 像 素 的 大 小 变 为 100*100 米 ， 会 导致 一 个 小 


UI 元 件 变 得 非常 之 巨大 。 这 个 时 候 UIRoot 会 通过 屏幕 来 缩放 UI 控 件 ， 
让 UI 控件 从 视觉 上 是 正常 的 。 

在 UIRoot 组 件 中 ， 它 提供 了 3 种 缩放 的 方式 ， 也 就 是 UIRoot 组 件 下 
的 Type 值 。 这 3 种 方式 分 别 为 PixelPerfect、FixedSize 、 
FixedSizeOnMobiles ° 

PixelPerfect 是 指 永远 保持 像素 大 小 不 变 ， 比 如 一 张 100*100 像 素 的 
图 片 ， 在 500*500 分 辨 率 的 屏幕 上 ， 它 是 100*100 像 素 ， 在 1000*1000 分 
辩 率 的 屏幕 上 ， 它 依然 还 是 100*100 像 素 ， 因 为 它 的 源 文 件 就 是 这 个 大 
小 ， 而 PixelPerfect 让 它 一 直 保持 这 个 大 小 。 这 样 就 可 以 让 UI 的 图 片 永 
远 是 最 清晰 的 ， 但 是 会 导致 分 辨 率 高 的 屏幕 下 UI 显 得 特别 小 ， 分 辨 率 
低 的 屏幕 下 UI 显 得 特别 大 。 

FixedSize 是 和 上 一 种 缩放 方案 完全 相反 的 方案 。 在 FixedSize 下 ， 
NGUI 将 不 再 保护 图 片 的 原 尺寸 ， 只 会 天 心 NGUI 目 己 所 需要 的 缩放 参 
数 ， 这 种 模式 下 必须 设置 UIRoot 的 ManualHeight 值 ， 然 后 NGUI 会 将 所 
有 的 控件 按照 和 这 个 值 的 高 度 比例 进行 缩放 。 例 如 ,设置 ManualHeight 
为 1000， 然 后 一 张 100*100 的 图 片 在 高 度 为 1000 的 屏幕 分 辨 率 下 占 1/10 
的 高 度 ， 那 么 当 UI 放 到 一 个 分 辨 率 为 500*500 的 屏幕 上 时 ， 它 依然 占 
1/10 的 高 度 ， 只 不 过 图 片 尺寸 被 自动 放 缩 为 50*50， 这 样 就 保证 了 UI 和 
屏幕 分 辨 率 的 比例 是 一 定 的 。 

FixedSizeOnMobiles 是 两 种 方案 的 结合 体 ， 它 会 让 UI 在 PC、Mac、 
Linux 系 统 下 目 动 采用 PixelPerfect， 而 在 移动 设备 上 自动 采用 
FixedSize ° 

如 果 没 有 选择 FixedSize ， 那 么 必须 设置 另外 两 种 缩放 模式 下 的 
MinimumHeight 和 MaximumHeight 两 个 值 ， 代 表 最 大 高 度 和 最 小 高 
度 。 例 如 选择 PixelPerfect 模式 ， 将 MinimumHeight 设 置 为 720， 将 
MaximumHeight 设 置 为 900， 那 么 在 一 个 分 辨 率 为 800*600 的 屏幕 上 ， 
因为 屏幕 分 辨 率 的 高 度 小 于 UIRoot 里 的 最 小 高 度 ，UIRoot 就 会 按照 


FixedSize 模 式 下 ManualHeight 为 720 的 情况 进行 处 理 ， 同 理 ， 如 果 将 UI 
放 到 一 个 分 辩 率 为 1920*1080 的 屏幕 上 ， 因 为 该 屏幕 分 辩 率 的 高 度 1080 
大 于 设置 的 900， 于 是 UIRoot 束 会 按照 FixedSize 模 式 下 ManualHeight 为 
900 的 情况 进行 处 理 。 

值得 注意 的 是 ， 在 3.7.0 以 后 的 NGUI 上 ，UIRoot 的 缩放 模式 改 为 

eFlexible， 等 同 于 上 文 讲 到 的 PixelPerfect 。 

eConstrained， 等 同 于 上 文 讲 到 的 FixedSize。 

eConstrainedOnMobiles， 等 同 于 上 文 讲 到 的 FixedSizeOnMobiles 。 

功能 上 几乎 完全 一 样 。 

2. UIPanel 组 件 

如 图 2.28 所 示 ，UIPanel 有 很 多 属性 。 其 中 ，Alpha 属 性 顾名思义 是 
透明 度 ， 默 认为 1 不 透明 。 它 将 控制 它 旗 下 所 有 Widget (所 有 的 UI 控件 
都 将 带 有 Widget， 因 为 它们 都 继承 自 Widget) 的 透明 度 ， 也 就 是 它 会 让 
它 的 子 物体 里 的 所 有 UI 控件 都 一 起 发 生 透 明度 变化 ， 可 以 用 来 做 整个 
UI 的 淡 入 淡出 以 及 隐藏 等 。 

Depth 深 度 属性 ， 这 是 一 个 极其 重要 的 属性 。 在 NGUI 中 ， 每 一 个 
Panel 都 有 Depth， 每 一 个 widget 控件 也 有 Depth，Depth 将 决定 演 染 的 顺 
序 ， 直 接 影响 了 UI 之 间 的 前 后 重合 关系 。Depth 越 高 的 控件 将 会 显示 在 
视野 的 上 层 ，Depth 越 高 的 Panel 也 会 显示 在 视野 的 上 层 。 但 是 Panel 的 
Depth 权 重 远 远 高 于 Widget， 也 就 是 说 ， 在 大 部 分 情况 下 ， 属 于 低 Depth 
的 Panel 的 控件 ， 不 管 这 个 控件 本 吴 的 Depth 为 多 少 ， 它 都 将 显示 在 高 
Depth 的 Panel 的 控件 后 面 。 当 你 有 多 个 Panel 的 时 候 ， 例 如 你 制作 了 很 
多 面板 界面 ， 每 一 个 界面 都 有 一 个 Panel， 那 么 此 时 尽量 保证 这 些 Panel 
不 要 共用 同一 个 Depth， 因 为 这 将 导致 NGUI 在 泻 染 时 无 法 以 1 个 
DrawCall 完 成 ， 会 以 增加 DrawCall 的 方式 来 保证 泻 染 顺 序 不 混乱 ， 这 样 


束 增 大 了 性 能 的 开销 。 不 过 NGUI 在 健 到 Panel 有 共用 Depth 的 情况 时 会 
做 出 提醒 ， 如 图 2.29 红 框 部 分 所 示 。 
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A 图 2.29 
Clipping 是 剪辑 视窗 的 功能 ， 它 将 可 以 让 一 个 面板 只 显示 某 一 块 区 
域 ， 关 于 这 部 分 知识 后 文 我 们 再 讲解 。 
在 高 级 选项 中 ， 我 们 讲解 一 些 初学 者 需要 了 解 的 。Render Q 可 以 理 
解 为 泻 染 顺序 ， 默 认为 自动 设置 。 这 个 选项 在 和 粒子 系统 结合 使 用 时 
会 有 影响 ， 我 们 后 文 会 说 明 。 如 果 该 Panel 下 的 UI 需要 被 灯光 影响 到 
(NGUI 的 UI 是 默认 不 接收 灯光 照射 效果 的 )  ， 需 要 勺 选 Normals。 如 


果 该 Panel 下 面 所 有 的 UI 控件 都 不 会 被 移动 ， 那 么 可 以 勾 选 Static 来 将 它 
们 设置 为 静态 的 ， 这 样 会 导致 该 Panel 下 所 有 的 控件 都 将 忽略 位 置 、 旋 
转 、 缩 放 的 操作 ， 永 远 保持 不 动 。 虽 然 这 样 可 以 提高 一 些 性 能 ， 但 是 
慎重 使 用 。 

单 击 Show Draw Calls 按 钮 ， 可 以 看 到 该 Panel 下 所 有 的 DrawCall 消 
耗 情况 ， 如 图 2.30 所 示 。 


All Panels 


A 图 2.30 
3. UICamera 组 件 
图 2.31 所 示 为 UICamera 组 件 的 截图 ，UICamera 这 个 组 件 的 核心 作 
用 是 : 让 带 有 这 个 组 件 的 摄像 机 泻 染 出 的 物体 能 够 接收 NGUI 的 事件 。 


如 果 我 们 自己 创建 了 一 个 物体 ， 并 且 希 望 对 这 个 物体 使 用 一 些 NGUI 
中 的 事件 ， 例 如 OnPress()、OnDrag(0 等 ， 束 需要 为 渲染 这 个 物体 的 摄 
像 机 添加 UICamera 组 件 。 


A 图 2.31 

在 UICamera 中 ， 大 部 分 设置 我 们 都 不 需要 去 操心 ， 它 让 我 们 的 事 
件 支 持 多 点 触 措 、 鼠 标 键盘 触摸 屏 等 事件 的 接收 。 但 是 要 注意 的 是 
EventMask 这 个 选项 ， 这 个 EventMask 和 相机 中 的 CullingMask 非常 相 
似 ， 相 机 的 CullingMask 是 为 了 选择 泻 染 那些 层 的 物体 ， 这 里 的 
EventMask 是 为 了 选择 接收 那些 层 的 物体 的 事件 。UICamera 会 默认 只 接 
收 我 们 创建 UI 时 被 自动 设置 的 那个 layer， 但 是 ， 如 果 我 们 在 制作 UI 过 
程 中 ， 在 创建 UI 后 因为 某 些 原因 修改 了 UI 的 层 ， 一 定 要 将 UICamera 的 


EventMask 修 改过 来 ， 否 则 将 会 发 现 ， 我 们 单 击 UI 没 有 反应 ， 因 为 它 接 
收 不 到 这 个 layer 的 物体 的 事件 。 

关于 这 3 个 最 基础 的 控件 讲 了 这 么 多 ， 其 中 有 很 多 都 是 较 少 用 
到 ， 主 要 目的 是 加 快 对 NGUI 概 念 的 形成 。 具 体 在 需要 的 时 候 应 该 进行 
什么 样 的 操作 ， 我 们 后 面 的 一 些 实战 内 容 中 会 讲 到 。 


2.62DUI 和 3DUI 的 工作 原理 
2.6.1 2DUI 的 工作 原理 


先 创 建 一 个 2DUI (创建 方法 上 文 已 讲 过 ) ， 然 后 在 2DUI 的 “ 根 ” 
UIRoot 下 创建 两 个 精灵 (创建 方法 后 面 会 详解 ) 。 然 后 得 到 的 效果 如 
图 2.32 所 示 。 


A 图 2.32 
从 图 2.32 中 可 以 看 到 ， 创 建 的 两 个 Sprite 为 两 个 按钮 图 片 ， 它 们 的 
位 置 在 UIRoot 的 红 框 (视窗) 上 ， 也 就 是 Sprite 的 z 轴 、 相 机 的 z 轴 、 


UIRoot 的 z 轴 都 为 0， 因 为 2DUI 都 是 纯粹 的 2D 图 片 按 层次 显示 ， 不 会 出 


现 三 维 立体 效果 ， 所 以 都 是 直接 紧 贴 着 视窗 ， 只 要 UI 探 件 在 UIRoot 的 
红 框 范围 内 ， 那 么 UI 就 能 够 正常 显示 在 Game 上 “。 在 Game 视 图 中 ， 我 们 
看 到 的 景象 如 图 2.33 所 示 。 

2DUI 最 本 质 的 意义 是 :UI 摄像 机 是 一 个 正 交 摄像 机 。 


A 图 2.33 


2.6.2 3DUI 的 工作 原理 


同上 2.6.1 小 节 一 样 ， 先 创建 一 个 3DUI， 然 后 在 “ 根 ” 下 面 创建 两 个 
Sprite， 得 到 如 图 2.34 所 示 的 景象 。 


A 图 2.34 

从 图 2.34 中 可 以 看 到 ， 在 3DUI 下 ， 创 建 的 UI 控件 都 在 一 个 三 维 立 
体 空间 中 ， 摄 像 机 是 一 个 透视 的 摄像 机 ， 这 和 2DUI 有 着 截然 不 同 的 区 
别 ， 因 为 2DUI 是 一 个 正 交 摄像 机 。 

3DUI 中 UIRoot 的 坐标 点 如 图 2.34 所 示 ， 是 在 三 维 空间 的 一 个 点 
上 ， 这 个 位 置 是 创建 UI 时 自动 定义 好 的 ， 以 后 创建 的 UI 控件 都 会 自动 
地 在 这 个 点 所 在 的 面 上 生成 (自动 统一 到 UIRoot 的 z 轴 ， 因 为 Sprite 属 于 
UIRoot 的 子 物体 ) ， 所 以 图 2.34 中 UIRoot 根 物体 和 两 个 创建 的 Sprite 的 z 
轴 都 为 0， 而 Camera 的 z 轴 为 -700。 

我 们 在 图 2.34 生 成 的 两 个 Sprite 用 3DUI 做 出 的 效果 ， 在 Game 视 图 里 
看 ， 和 2DUI 几 乎 是 一 模 一 样 的 ， 如 图 2.35 所 示 。 

但 是 需要 注意 的 是 ， 如 果 需 要 将 2DUI 改 为 3DUI， 不 是 简单 地 将 摄 
像 机 改 为 透视 模式 就 行 了 ， 在 NGUI 3.6.0 以 后 的 某 些 版 本 中 ， 这 样 会 
导致 看 不 到 任何 UI 控件 《这些 版 本 的 2DUI 的 控件 和 Camera、UIRoot 三 
者 在 同一 个 z 轴 面 上 ， 而 变 成 3D 摄 像 机 后 是 看 不 到 和 摄像 机 同 z 轴 的 物 
体 ) ， 如 果 将 3DUI 的 摄像 机 直接 改 为 正 交 模式 ， 也 并 不 能 简单 地 变 成 


2DUI， 因 为 正 交 相机 的 Size 并 不 和 NGUI 默 认 的 值 一 样 。 所 以 ， 在 进行 
UI 开发 时 ， 最 好 先 思考 一 下 将 要 使 用 2D 还 是 3DUI 更 好 。 z 


上 文中 我 们 讲解 了 2DUI 和 3DUI 的 原理 ， 那 么 在 实际 的 项 目 开 发 
中 ， 如 何 来 判断 应 该 使 用 哪 一 种 UI 呢 ? 有 以 下 一 些 规律 可 以 参考 。 

(1) 新 版 本 的 NGUI 对 3DUI 支 持 很 好 ， 如 果 3DUI 和 2DUI 选 择 哪 一 
个 都 行 的 情况 下 ， 建 议 选择 3DUI， 扩 展 性 更 强 。 

(2) 如 果 出 现 UI 不 允许 有 远近 透视 的 大 小 变化 ， 必 须 选 择 
2DUI。 例 如 ， 角 色 头 顶 的 血 条 ， 在 人 物 跑 远 了 之 后 如 果 血 条 并 不 会 变 
小 ， 这 时 血 条 就 必须 用 2DUI 做 。 

(3) 如 果 要 出 现 UI 有 三 维 变 换 的 效果 ， 例 如 ， 由 远 及 近 的 变 大 、 
三 维 旋 转 等 ， 就 必须 用 3DUI。 

(4) 无 法 明确 知道 应 该 用 哪 一 种 UI 的 情况 下 ， 建 议 选 用 3DUI。 

(5) 不 论 用 哪 一 种 UTI， 其实 本 质 上 只 是 一 个 摄像 机 的 区 别 ， 基 本 
上 都 能 实现 UI 效果 ， 只 是 需要 的 处 理 不 一 样 ， 所 以 ， 如 果 选 择 错 了 UI 


模式 也 不 用 太 着 急 ， 总 有 很 多 办 法 来 解决 的 。 


2.7 深度 (Depth) 概念 
2.7.1 强化 对 深度 的 理解 


深度 的 概念 将 会 一 直 伴随 着 UI 的 制作 过 程 ， 是 UI 中 一 个 非常 重要 

的 概念 。 我 们 在 2.5.3 小 节 中 讲解 UIPanel 时 已 经 讲解 了 深度 的 概念 ， 这 
里 我 们 再 强化 一 下 对 深度 的 理解 。 在 老 版 本 的 NGUI 中 ，UI 的 显示 层次 
关系 是 依靠 z 轴 进行 的 。 在 新 版 本 的 NGUI 中 ， 所 有 UI 的 z 轴 都 被 统一 ， 
然后 用 深度 来 决定 和 管理 显示 的 层次 关系 。 关 于 深度 ， 我 们 要 记 住 一 
下 关键 点 。 

(1) 每 一 个 UIPanel 和 每 一 个 UI 控件 都 一 定 会 有 一 个 Depth， 深 度 
值 大 代表 显示 的 优先 级 高 (会 越 趋 向 于 在 界面 更 上 层 显 示 ) 。 

(2) Depth 决定 的 是 UI 的 显示 层级 关系 ， 一 个 UI 控件 是 否 显 示 
在 最 上 层 是 由 它 所 属 的 Panel 的 Depth 和 它 本 身 的 Depth 决 定 的 。 一 般 情 
况 下 ， 属 于 低 Depth 的 Panel 的 控件 ， 不 管 这 个 控件 本 喘 的 Depth 为 多 
少 ， 它 都 将 显示 在 高 Depth 的 Panel 的 控件 后 面 〈 被 高 Depth 的 Panel 遮 
住 )》* 

(3) 尽量 不 要 让 Panel 之 间 共 享 同 一 个 Depth， 这 样 会 导致 性 能 消 


(4) 制作 Panel 和 UI 探 件 时 ， 记 得 考虑 一 下 它 所 属 的 panel 和 它 目 
号 的 Depth 是 否 能 让 它 显 示 在 正确 的 层次 关系 上 。 


2.7.2 小 心 相机 的 深度 


我 们 在 场景 中 的 每 一 个 Camera 也 有 一 个 演 染 深度 ， 如 图 2.36 所 示 。 


A 图 2.36 
在 前 文中 我 们 学 习 到 NGUI 创 建 时 ， 都 会 创建 一 个 它 独 有 的 相机 。 

这 个 相机 其 实 就 是 Unity 中 普通 的 Camera， 然 后 为 其 附加 了 一 个 
UICamera 的 组 件 。 需 要 注意 的 是 ， 所 有 的 Camera 也 都 有 一 个 Depth， 这 
个 Depth 会 影响 到 UI 中 的 Depth， 特 别 是 场景 有 多 个 Camera 来 泻 染 不 同 
层次 的 UI 时 ， 这 个 影响 会 比较 大 。 具 体 我 们 得 遵循 以 下 这 些 规律 。 

(1) 相机 的 Depth 永 远 是 最 高 级 的 ， 也 就 是 高 Depth 相 机 所 看 到 的 
画面 ， 永 远 在 低 Depth 相 机 所 看 到 的 画面 之 上 。 

(2) 如 果 需 要 相机 有 视觉 穿 透 效 果 (只 演 染 所 看 到 的 东西 ， 其 他 
地 方 透 掉 显示 其 他 相机 所 看 到 的 画面 ) ， 需 要 将 相机 的 ClearFlags 设 置 
为 DepthOnly 。 

(3) 并 不 是 只 有 负责 泻 染 NGUI 的 相机 的 Depth 会 有 影响 ， 所 有 的 
相机 (比如 默认 存在 的 泻 染 场景 的 MainCamera) 的 Depth 都 受 此 规律 影 
响 。 例 如 ， 如 果 将 照射 UI 的 摄像 机 的 深度 设 为 0， 然 后 将 照射 场景 的 相 
机 深度 设 为 1， 那 么 ， 将 看 到 场景 把 所 有 的 UI 遮 住 。 

(4) 创建 UI 时 ，UIRoot 下 生成 的 相机 默认 Depth 是 比 场景 中 的 相 
机 深度 高 的 ， 不 过 当场 景 内 有 多 个 摄像 机 时 ， 一 定 要 管理 好 每 个 摄像 
机 的 ClearFlags 和 Depth 。 


(5) 当场 景 内 有 多 个 摄像 机 时 ， 一 定 要 检查 摄像 机 的 CullingMask 
不 要 洽 染 重复 的 Layer， 否 则 可 能 导致 显示 双重 画面 。 如 图 2.37 所 示 ， 
UI 画面 被 两 个 相机 同时 看 到 ， 显 示 了 两 份 (因为 两 个 相机 所 在 的 位 置 
不 一 样 ， 所 以 看 到 的 大 小 会 不 一 样 ) 。 


A 图 2.37 


第 3 章 核心 组 件 


3.1 什么 是 UI 


UI 控件 这 个 词 是 我 们 制作 UI 过 程 中 经 营 页 到 的 一 个 词 ， 那 么 到 底 
什么 是 UI 控件 呢 ? 具体 来 说 ，UI 控 件 是 指 一 个 界面 中 可 以 操控 的 元 
件 ， 如 按钮 、 输 入 框 等 。 但 是 在 开发 游戏 的 过 程 中 ， 一 般 来 说 UI 控件 
可 以 指 界面 中 所 有 的 UI 元 件 ， 包 括 精灵 、 贴 图 、 标 签 、 输 入 框 、 下 拉 
列表 、 按 钮 等 ， 大 家 不 需要 对 这 个 概念 深究 ， 在 使 用 NGUI 时 ， 几 是 带 
有 Widget 参 数 (后 文 要 讲 ) 的 组 件 都 是 控件 。 


3.2 制作 精灵 (UISprite) 
3.2.1 怎样 判断 是 否 应 该 使 用 精 ; 


在 一 套 UI 中 ， 精 灵 有 苹 一 种 非 第 常见 的 元 件 。 当 我 们 制作 UI 时 ， 如 
果 和 需要 显示 一 张 图 片 ， 需 要 先 判 断 这 个 图 片 是 否 应 该 制作 到 图 集 里 
去 ， 然 后 用 精灵 的 方式 去 使 用 它 ， 一 般 来 说 ， 可 以 遵循 以 下 规律 。 

(1) 首先 说 明 一 点 ， 精 灵 是 一 个 很 基础 的 UI 元 件 ， 经 常 不 会 独立 
使 用 ,很 多 其 他 控件 都 会 用 到 精灵 ， 比 如 一 个 进度 条 ， 需 要 用 到 一 个 
表示 空 权 的 精灵 ， 和 一 个 上 面 走 进度 的 条 子 精灵 。 所 以 ， 精 灵 有 的 时 
候 并 不 是 独立 使 用 的 。 


(2) 对 于 一 些 展示 型 的 图 片 ， 不 会 变化 ， 只 是 起 一 个 展示 作用 ， 
例如 ， 一 个 界面 上 的 一 个 小 花纹 装饰 ， 如 果 它 不 大 ， 它 一 般 都 古 以 精 
灵 的 方式 去 制作 。 

(3) 如 果 要 显示 一 个 图 片 ， 它 形状 不 规则 ， 长 宽 不 是 2 的 N 雇 方 ， 
那么 一 定 要 使 用 精灵 。 因 为 Unity 对 非 2 的 N 次 方 的 图 片 处 理 要 慢 很 多 。 

(4) 如 果 这 个 UI 元 件 经 常 性 地 出 现 ， 那 么 最 好 使 用 精灵 ， 因 为 ， 
这 样 它 就 可 以 和 图 集 一 起 被 载 入 内 存 ， 并 不 用 新 增 一 个 DrawCall 去 泻 


染 它 。 


3.2.2 创建 精灵 


1. 第 一 种 创建 方式 

首先 ， 我 们 创建 一 个 3DUI (2DUI 也 行 ， 这 个 没有 任何 影响 ) ， 
然后 选中 UIRoot， 单 击 Unity 顶 部 荣 单 中 的 NGUI 荣 单 ， 选 择 Creat， 然 
后 选择 Sprite， 如 图 3.1 所 示 。 这 样 就 能 在 UIRoot 下 面 自动 创建 出 一 个 带 
Sprite 组 件 的 物体 ， 这 就 算 创 建成 功 了 。 


Fle Edit Assets GameObject Component | NGUI | Window Help 


~ Sprit At+Shift+S 
Alt+Shift+L 
Alt+Shift+T 
Unity 2D Sprite Alt+Shift+D 
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A 图 3.1 


特别 说 明 一 下 ，NGUI 创 建物 体 时 会 在 你 选中 的 那个 UI 物 体 (可 视 
为 一 个 节点 ) 下 进行 创建 ， 如 果 你 没有 选中 任何 的 UI 节点 ， 它 会 默认 
在 UIRoot 下 创建 。 创 建 出 的 UI 控件 的 本 地 坐标 都 为 0 《相当 于 Reset 了 一 
下 ， 和 父 节 点 的 位 置 保持 一 样 ) ， 所 以 ， 使 用 3DUI 的 时 候 要 注意 ， 不 
要 在 UIRoot 所 附带 的 Camera 下 面 创建 UI 元 件 ， 否 则 会 导致 UI 和 相机 在 
一 个 位 置 ， 导 致 相机 看 不 到 。 

2. 第 二 种 创建 方式 

使 用 旧版 本 的 创建 方式 ， 在 Unity 顶部 菜单 中 选择 NGUI 菜单 ， 选 
择 Open ， 选 择 WidgetWizard(Legacy)， 如 图 3.2 所 示 。 
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A 图 3.2 

打开 后 ， 会 弹出 如 图 3.3 所 示 的 界面 ， 其 中 选择 想 要 创建 的 精灵 所 
在 的 Atlas， 然 后 在 Template 中 选择 Sprite， 在 Sprite 栏 单 击 会 弹出 你 所 设 
置 的 图 集中 的 所 有 精灵 ， 从 中 选择 你 要 创建 的 精灵 ，Pivot 是 精灵 的 销 
点 (中心 点 的 位 置 ， 默认 在 图 片 中心 点 ) 。AddTo 是 选择 你 要 在 哪 一 个 
UI 市 点 下 进行 创建 (可 以 通过 拖 动 的 方式 将 UI 和 点 物体 拖 到 这 里 
来 ) ， 这 个 AddTo 的 默认 值 是 你 在 打开 这 个 菜单 之 前 所 选中 的 UIT 点 物 
体 。 然 后 单 击 AddTo 按 钮 ， 即 可 完成 创建 。 


A 图 3.3 
3. 第 三 种 创建 方式 (不 推荐 ) 
这 种 方式 是 不 用 NGUI 的 菜单 来 创建 ， 通 过 Unity 的 空 物体 ， 人 然后 为 
其 附加 相应 组 件 来 自制 UI 控件 。 
首先 在 Unity 顶 部 菜单 中 选择 GameObject， 然 后 选择 CreatEmpty， 


这 样 就 在 场景 中 创建 了 一 个 空 物体 ， 然 后 将 它 的 名 字 改 为 Sprite (这 个 
物体 的 名 字 可 自由 定义 ) ， 再 将 这 个 空 物体 拖 动 到 UIRoot 下 ， 使 它 成 
为 UIRoot 下 的 一 个 子 物体 ， 将 这 个 空 物体 的 transform 组 件 Reset 一 下 ， 
这 样 这 个 物体 惑 和 UIRoot 根 节点 保持 一 样 的 位 置 了 。 然 后 将 这 个 空 物 
体 的 Layer 改 为 和 UIRoot 的 Layer 一 样 ， 否 则 UI 摄像 机 将 无 法 泻 染 它 。 在 
这 个 空 物体 的 Inspector 面 板 中 ， 单 击 Add Component 按 钮 ， 选 择 NGUTL， 
选择 UI， 再 选择 NGUI Sprite， 束 为 这 个 空 物 体 附 上 了 Sprite 组 件 ， 如 图 
3.4 所 示 。 


VUISprite (Script) 


A 图 3.4 

我 们 在 这 个 Sprite 组 件 中 单 击 第 一 行 的 Atlas 按 钮 ， 选 择 要 创建 的 精 
灵 所 在 的 图 集 ， 然 后 单 击 第 二 行 的 Sprite 按 钮 ， 会 弹出 这 个 图 集 所 有 的 
精灵 预览 界面 ， 从 中 选择 所 要 的 精灵 。 到 此 为 止 ， 精 灵 束 自制 完成 
了 o 

天 于 创建 精灵 的 方式 我 们 就 介绍 这 3 种 ， 它 的 核心 就 是 要 为 一 个 物 
体 附 加 一 个 Sprite 的 组 件 。 在 制作 过 程 中 需要 注意 创建 Sprite 的 节点 ， 
也 就 是 它 应 该 在 什么 物体 下 创建 ， 这 个 涉及 UI 结构 的 设计 ， 我 们 在 后 
面 会 详细 讲解 。 

3.2.3 Sprite 组 件 的 设置 

我 们 参照 图 3.4 所 示 的 组 件 面 板 进行 讲解 。 在 Sprite 组 件 面板 中 ， 可 

以 设置 如 下 的 一 些 参数 。 


(1) Atas。 单 击 Atlas 按 钮 将 会 弹出 图 集 选 择 界 面 ， 如 图 3.5 所 
示 ， 可 以 选择 要 使 用 哪 一 个 图 集 (如 果 弹 出 的 图 集 选择 界面 没有 我 们 


要 的 独 集 ， 记 得 单 击 该 面板 中 的 ShowAl 按 钮 ) 。 


Select an Atlas 


和 图 3.5 
(2) Sprite。 单 击 Sprite 按钮 ， 将 会 弹出 该 图 集 所 拥有 的 精灵 的 预 
多 界面 ， 我 们 只 需要 在 其 中 找到 需要 的 精灵 ， 然 后 双击 ， 就 完成 了 设 


O 


吧 


(3) Type 和 Flip。 在 这 里 Type 有 5 个 选项 : Simple (普通 类 型 ) 、 
Sliced 〈 切 片 类 型 ) 、Tiled 〈 平 铺 类 型 ) 、Filled (〈 填 满 类 型 ) 、 
Advanced 〈 高 级 类 型 ) 。Flip 选 项 是 翻转 选项 ， 相 应 的 Type 下 有 不 同 的 
设置 。 

eSimple 

这 种 类 型 下 ， 图 片 会 正常 显示 出 来 ， 图 片 是 什么 样 它 就 是 什么 样 
显示 。 当 我 们 将 一 个 精灵 的 尺寸 拉 大 时 ， 它 会 以 原 图 拉 伸 (可 能 会 导 
致 原 图 发 生 形 变 ) 的 方式 来 完成 ， 如 图 3.6 所 示 ， 我 们 将 精灵 的 大 小 通 
过 拉动 四 周 的 蓝 色 销 扣 拉 大 ， 精 灵 束 被 拉 伸 了 。 

在 这 种 类 型 下 ，Flip 有 几 个 选项 ， 分 别 是 : Nothing (不 翻转 ) 、 
Horizontally (水 平 翻转 ) 、Vertically 〈 坚 直 翻 转 ) 、Both 〈 既 水 平 又 
坚 直 翻转 ) 。 

这 里 的 翻转 和 Photoshop 中 的 图 片 翻转 是 一 个 意思 ， 如 图 3.7 所 示 。 


eSliced 
切片 风格 ， 这 种 类 型 知识 量 比较 大 ， 和 九宫 格 的 制作 联系 比较 紧 
密 ， 所 以 在 后 文 讲解 九宫 格 的 制作 时 ， 会 详细 讲解 


A 图 3.7 


eTiled 

平 铺 类 型 ， 选 择 了 之 后 ， 精 灵 尺 寸 会 保持 原来 的 尺寸 不 变 ， 然 后 
将 精灵 的 尺寸 拉 大 时 ， 精 灵 会 以 平 铺 的 方式 来 填充 ， 并 不 会 以 拉 伸 的 
方式 来 填充 。 如 图 3.8 所 示 ， 我 们 将 精灵 的 大 小 通过 拉动 四 周 的 蓝 色 销 
点 拉 大 ， 精 灵 变 成 了 平 铺 模式 。 


A 图 3.8 


eFilled 

填 满 模式 ， 这 种 模式 可 以 设置 图 片 填充 一 块 区 域 的 方式 ， 例 如 ， 
技能 CD 时 技能 图 标 前 面 有 一 层 灰 色 的 图 片 蒙 住 ， 这 个 灰色 的 图 片 要 顺 
时 针 旋 转 消 失 ，， 直到 转 完 为 止 灰 色 的 蒙 层 彻 的 消失 、 图 标 恢复 正 
党 表示 CD 完成 。 

在 Filled 模式 下 ， 会 多 出 Fill Dir、FillAmount、Invert Fill3 个 设置 
项 。 其 中 FillDir 是 指 选 择 填 充 的 方式 ， 默 认为 360° 填 充 。Fill Amount 
可 以 设置 填充 的 比例 ， 默 认为 1 全 部 填充 。InvertFill 是 设置 填充 的 方 
问 ， 不 勾 选 是 正方 向 ， 勾 选 是 反方 问 。 

如 图 3.9 所 示 ， 图 中 1 部 分 FilDir 设 置 为 Horizontally 水 平 填充 ， 
FillAmount=0.5，InvertFill 不 勺 移 默认 为 从 左 至 右 为 正方 辐 ， 图 片 相当 
于 从 左 往 右 水 平 填充 了 0.5， 也 就 是 50% 


A 图 3.9 

图 中 2 部 分 为 FilDir 设 置 为 Yertically 坚 直 填 充 、FillAmount=0.5， 
InvertFill 不 勺 选 默认 从 下 至 上 为 正方 向 ， 图 片 相当 于 从 下 往 上 竖 直 填充 
了 0.5， 也 残 是 50%。 

图 中 3 部 分 FilDir 设 置 为 Radial90 填 充 (90° 旋 转 填 充 ) 、 
FillAmount=0.5，InvertFill 不 勺 选 默认 从 右 下 角 到 左上 角 90° 旋 转 为 正方 
向 ， 图 片 相当 于 从 右 下 角 到 左上 角 旋 转 填 充 了 0.5， 也 就 是 50% 。 

图 中 4 部 分 FilDir 设 置 为 Radial180 填 充 (180? 旋 转 填充 ) 、 
FillAmount=0.25，InvertFill 不 勾 选 默认 从 左下 角 到 右 下 角 180? 旋 转 为 正 
方向 ， 图 片 相 当 于 从 左下 角 到 右 下 角 180° 旋 转 填 充 了 0.25， 也 就 是 
25% 。° 

图 中 5 部 分 FillDir 设 置 为 Radial360 填 充 (360° 旋 转 填 充 ) 、 
FillAmount=0.65，InvertFill 不 勾 选 默认 为 逆 时 针 360?° 旋 转 为 正方 辐 ， 图 


厂 相 当 于 以 中 心 扣 为 中 心 逆 时 针 旋 转 填 元 了 0.65， 也 就 是 65%。 
eAdvanced 
高 级 设置 因为 比较 复杂 ， 将 会 在 后 面 讲 九 宫 格 的 时 候 详细 讲解 。 
(4) Widget 模 块 。 
Widget 模 块 是 NGUI 的 控件 组 件 都 具有 的 一 个 模块 ， 如 图 3.10 所 


示 “。 该 模块 的 参数 设置 如 下 。 


和 Widget 


图 3.10 

eColor 

通过 这 里 可 以 整体 改变 控件 的 颜色 和 透明 度 ， 改 变 颜色 的 规则 
为 : 原色 值 乘 以 这 里 设置 的 色 值 Unity 中 ， 会 把 RGB 色 值 从 0~255 转 
变 为 0 一 1 的 一 个 浮 点 数 ) 。 

我 们 单 击 这 个 白色 区 域 会 弹出 调 色 板 ， 如 图 3.11 所 示 。 可 以 随意 
地 在 这 里 设置 控件 的 颜色 值 和 透明 度 。 

值得 注意 的 是 ， 如 果 通 过 这 个 控件 改变 了 透明 度 ， 那 么 这 个 物体 
的 子 物体 的 控件 透明 度 也 会 跟着 被 改变 。 

@Pivot 

锚 点 设置 ， 默 认为 中 心 点 。 通 过 这 一 排 按 钮 可 以 设置 出 左上 、 顶 
中 、 右 上 、 中 左 、 中 心 、 中 右 、 左 下 、 底 中 、 右 下 一 共 9 个 点 。 

这 个 销 点 设置 ， 改 变 的 是 图 片 的 中 心 点 位 置 ， 这 个 UI 控件 和 其 他 
UI 控件 之 间 的 相对 位 置 就 是 以 这 个 点 作为 标准 的 。 
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A 图 3.11 

e Depth 

深度 设置 ， 前 文 已 经 详细 讲 过 。 可 以 通过 单 击 Back 和 Forward 来 减 
1 和 加 1， 也 可 以 直接 输入 一 个 深度 数字 来 完成 设置 。 

eDimensions 

尺寸 ， 这 里 指 的 古 控件 的 像素 尺寸 。 单 击 Snap 可 以 将 图 片 的 像素 
尺寸 直接 设置 为 原 大 小 (这 个 图 片 被 改 成 图 集 之 前 的 图 片 大 小 ) 。 

e® AspectRatio 

宽 高 比 ，AspectRatio 后 面 的 数字 为 当前 该 控件 的 宽 高 尺寸 比例 。 
后 面 有 一 个 模式 选择 按钮 ， 默 认为 Free， 可 为 图 片 随意 设置 高 和 宽 。 这 
里 除了 Free 以 外 ， 还 有 两 个 模式 : 以 宽 为 基础 、 以 高 为 基础 。 如 有 果 选 择 
以 宽 为 基础 ， 那 么 图 片 的 高 度 设 置 不 论 怎么 设置 都 无 效 ， 都 会 以 宽度 
和 当前 的 宽 高 比 计 算得 出 。 同 理 ， 如 果 选 择 了 以 高 为 基础 ， 那 么 图 乒 


的 蜗 度 就 无 法 被 设置 ， 它 的 宽度 都 会 以 高 度 和 当前 的 宽 高 比 计算 得 
出 o 
(5) Anchors 模 块 。 
这 个 模块 是 控件 位 置 适 配 的 销 点 设置 ， 在 后 面 讲解 屏幕 自 适 应 时 
会 详细 说 明 。 


3.3 示 签 (Label 
3.3.1 怎样 判断 是 否 应 当 使 用 标签 


当 游 戏 中 出 现 需 要 程序 输出 文字 的 地 方 ， 就 要 使 用 标签 。 例 如 ， 
物品 的 名 字 王 变 万 化 ， 无 法 提前 预知 有 哪些 名 字 ， 束 需要 程序 人 员 做 
一 个 Label 来 动态 显示 物品 的 名 字 。 


3.3.2 创建 标签 


标签 的 创建 方式 也 多 种 多 样 ， 具 体 和 Sprite 的 创建 差不多 ， 这 里 就 
不 浪费 篇 幅 讲 解 了 。 一 般 来 说 ， 可 以 直接 在 Unity 顶 部 选 则 NGUI 菜 单 、 
选择 Creat、 选 择 Label， 即 可 创建 一 个 Label。 


3.3.3 Label 的 文字 设置 


Label 组 件 的 Inspector 面 板 如 图 3.12 所 示 ， 我 们 来 了 解 一 下 它 的 各 项 
设置 。 

1. 设置 字体 

如 果 新 创建 的 Label 的 组 件 面板 为 一 片 灰 色 (不 可 设置 ) 的 话 ， 说 
明 还 没有 设置 字体 。 单 击 图 3.12 中 Unity 按 钮 ， 会 弹出 两 个 选项 : NGUI 


和 Unity， 如 果 和 硕 望 使 用 NGUI 的 静态 字体 ， 则 选择 NGUI;， 如 果 和 希望 使 


用 动态 字体 ， 则 选择 Unity。 
V UILabel (Script) 


- 方正 侍 求 简体 


A 图 3.12 

然后 单 击 Font， 如 果 之 前 选择 的 NGUI， 那 么 这 里 会 弹出 所 有 的 静 
态 字 体 以 供 选择 。 如 果 之 前 选择 的 是 Unity， 那 么 这 里 将 会 弹出 所 有 的 
动态 字体 文件 ， 以 供 选择 。 

如 采 在 其 中 没有 找到 你 制作 或 者 导入 的 字体 ， 记 得 单 击 ShowAll。 

2.， 设置 字号 

可 以 在 FontSize 中 设置 我 们 希望 文字 的 字号 大 小 。 但 是 文字 真正 
显示 出 来 的 大 小 还 要 受 overflow 设 置 的 影响 (下 面 讲 解 ) 

在 动态 字体 模式 下 (选择 的 Unity 中 导入 的 字体 文件 ) ，FontSize 
后 面 有 一 个 字体 模式 的 设 定 ， 默 认为 普通 状态 。 其 中 可 以 设置 字体 


为 : Bold (加 粗 ) 、Italic (斜体 ) 、BoldAndItalic (加 粗 并 斜体) 。 

3. 设 定 字体 内 容 (Text) 

我 们 可 以 在 Text 选 项 中 ， 输 入 需要 它 显示 的 文字 ， 文 持 回 车 换行 。 

4. Overflow 充 满 设置 

要 小 心 这 个 设置 ， 因 为 字体 虽然 设置 了 字号 ， 但 是 每 一 个 Label 其 
实 依 然 是 一 个 控件 ， 它 也 有 斥 寸 。 如 采 字 体 的 字号 大 小 导致 字体 超出 
了 这 个 控件 的 尺寸 ,这 里 的 Overflow 设置 就 会 对 字体 进行 处 理 。 

eShrinkContent 

收缩 内 容 。 黑 认为 这 个 选项 ， 意 思 为 不 管 字 体 的 字号 设 为 多 大 ， 
只 要 它 超出 了 这 个 控件 的 尺寸 ， 束 将 文字 缩小 到 尺寸 范围 内 。 

eClampContent 

选择 这 个 设置 意味 着 如 果 文 字 的 字号 大 小 导致 文字 超出 了 控件 的 
尺寸 ， 束 将 不 显示 文字 。 

eResizeFreely 

选择 这 个 设置 意味 着 不 管控 件 多 大 尺寸 ， 只 要 文字 字号 设 定 了 ， 
文字 会 保持 这 个 字号 应 有 的 大 小 ， 然 后 控件 会 目 动 依照 文字 的 大 小 调 
整 宽 高 太 寸 。 

eResizeHeight 

选择 这 个 和 ResizeFreely 类 似 ， 只 不 过 这 个 选项 只 会 去 自动 调整 控 
件 尺 寸 的 高 度 ， 并 不 会 让 控件 尺寸 的 宽度 变 大 。 

5. Alignment 

这 里 是 设置 对 齐 方式 ， 一 共有 : Auto (自动 ， 一般 会 设 为 大 
中 ) 、Left ( 左 对 齐 ) 、Right ( 右 对 齐 ) 、Center (居中 ) 、justfied 

(调整 ， 会 自动 变换 ) 。 

这 里 的 对 章 和 居中 的 参照 标准 是 控件 的 尺寸 ， 也 束 是 说 左 对 齐 ， 

其 实 是 对 齐 到 这 个 Label 控 件 的 最 左边 。 如 采 选 择 了 justfied， 那 么 文字 


会 在 控件 扩 才 缩小 到 一 定 范围 时 ， 目 动 增 大 文字 的 间距 来 使 文字 刚好 
充满 它 。 

6. Keepcrisp 

字面 翻译 为 保持 脆性 ， 默 认为 OnDesktop。 如 果 选 择 Always， 则 当 
字体 缩小 时 会 变 模 糊 ， 一 般 情况 我 们 必须 要 去 设置 它 。 虽 然 能 市 来 一 
些 性 能 优化 ， 但 是 非常 渺小 。 

7. Gradient 

梯度 ， 可 以 理解 为 字体 的 渐变 ， 默 认为 勾 选 状态 。 如 果 人 勾 选 ， 则 
字体 从 上 到 下 会 有 一 个 渐变 ， 在 后 面 Top 和 Bottom 两 个 色 板 中 可 以 设置 
上 部 分 和 下 部 分 渐变 的 颜色 。 如 有 果 不 选 择 这 个 选项 ， 那 么 字体 将 不 再 
有 渐变 色 ，Top 和 Bottom 将 不 可 用 ， 此 时 字体 的 颜色 将 完全 地 以 该 控件 
的 颜色 为 准 。 

8. Effect 

字体 的 效果 设置 ， 一 共有 3 个 选择 : None (无 效果 ) 、Shadow 
(阴影 效果 ) 、Outline 〈 描 边 效 果 ) 。 如 果 选 择 了 阴影 或 者 描 边 效 
果 ， 可 以 在 后 面 的 色 板 中 设置 阴影 或 者 描 边 的 颜色 ， 并 可 以 在 下 面 的 X 
和 Y 中 设置 阴影 和 描 边 的 XY 厚 度 〈 约 等 于 像素 单位 ) 。 

9. Spacing 

字体 间距 ， 可 以 设置 X ( 字 间 距 ) 和 Y ( 行 间 距 ) 的 间距 。 

10. Maxlines 

最 大 行 数 。 后 面 的 BBcode 选 项 可 以 不 用 管 。 

11. Widget 和 Anchors 

Widget 在 Sprite 精 灵 的 讲解 中 已 经 讲 过 ， 这 里 是 完全 一 样 的 。 
Anchors 在 后 文 讲 适 配 的 时 候 一 起 讲 。 


3.4 UI 纹理 (UITexture 


3.4.1 什么 情况 下 使 用 UITexture 


UITexture 的 功能 是 在 屏幕 上 显示 一 张 图 片 ， 在 这 一 点 上 它 和 Sprite 
有 着 相似 的 功能 ， 但 是 UITexture 会 消耗 单独 的 DrawCall 去 泻 染 ， 并 会 
单独 加 载 进 内 存 ， 所 以 ， 会 增 大 性 能 的 开销 。 当 我 们 判断 是 否 应 该 使 
用 UITexture 时 ， 可 以 遵循 以 下 规律 。 

(1) 当 图 片 过 大 ， 不 适合 成 图 集 时 ， 可 以 使 用 UITexture， 此 时 要 
尽量 保证 图 片 的 视 高 是 2 的 N 次 方 〈 宽 高 不 必 相 等 ， 不 过 在 iOS 平 台 下 必 
须 宽 高 相等 才能 支持 压缩 ) 。 

(2) 当 图 片 尺寸 为 2 的 N 次 方 ， 但 出 现 频 率 不 高 时 ， 可 以 使 用 
UITexture。 例 如 ， 游 戏 的 Logo， 一 般 出 现 它 都 是 在 游戏 开始 的 时 候 偶 
尔 出 现 一 下 ， 此 时 可 以 使 用 UITexture 。 

(3) 修改 更 换 特别 频繁 的 图 片 ， 为 了 减少 每 次 更 新 维护 的 麻烦 ， 
可 以 考虑 使 用 UITexture。 

(4) 如 有 果 图 片 很 小 ， 尽 量 将 图 片 放 入 图 集 通 过 精灵 的 方式 使 用 。 


3.4.2 创建 纹理 


UITexture 的 创建 方式 和 Sprite、Label 等 一 样 ， 通 过 Unity 顶 部 的 
NGUI 菜 单 ， 选 择 Creat 进 行 创建 。 其 他 创建 方式 就 不 做 介绍 了 。 


3.4.3 纹理 的 设置 


UITexture 的 Inspector 组 件 设置 界面 如 图 3.13 所 示 ， 我 们 来 了 解 一 下 
UITexture 组 件 的 各 项 设置 。 

1. Texture 

纹理 设置 ， 将 要 显示 的 贴图 文件 拖 到 此 处 即 可 完成 设置 。 


2. Material 


材质 设置 ， 一 般 不 用 去 设置 它 ， 如 果 有 特殊 材质 需求 可 以 拖 到 这 
里 来 * 

3. Shader 

着 色 器 设置 ， 默 认为 囊 透 明 的 着 色 贴图 着 色 方 式 ， 如 果 有 特殊 的 
着 色 和 需求 ， 可 以 将 其 Shader 拖 到 这 里 ， 不 过 ， 一些 特殊 的 Shader 将 大 幅 
增加 性 能 开销 ， 要 谍 慎 使 用 Shader 。 


V UITexture (Script) 


Texture 


A 图 3.13 
4. UVRect 
UV 矩形 的 设置 ， 如 果 在 width 和 height 中 各 填 为 2， 那 么 将 会 是 4 张 
纹理 拼 在 一 起 。 如 图 3.14 所 示 ， 一 般 游戏 开发 中 ， 这 个 UVRect 都 不 需 
要 进行 设置 。 


A 图 3.14 


5. Type/Flip 

这 个 和 Sprite 一 样 ， 请 参看 前 文 对 Sprite 的 讲解 。 
6. Widget/Anchors 

略 。 


按钮 是 我 们 制作 UI 过 程 中 最 核心 、 最 重要 的 控件 之 一 ， 在 一 个 游 
戏 中 ， 按 钮 站 用 户 操作 最 依赖 的 控件 之 一 ， 几 乎 无 处 不 在 。 按 钮 的 核 
心 作用 就 是 :， 能 接收 我 们 的 单 击 事 件 ， 然 后 触发 一 个 啊 应 事件 。 

当 我 们 在 判断 是 否 应 该 使 用 按钮 时 ， 可 以 先 了 解 按 钮 的 核心 作 
用 。 


(1) 按钮 能 接收 单 击 并 触发 响应 事件 。 
(2) 按钮 被 单 击 时 能 同时 触发 多 个 响应 事件 。 
(3) 按钮 可 以 有 普通 、 最 停 、 单 击 、 禁 用 等 多 个 状态 的 不 同 表 


现 。 

(4) 不 用 去 区 别 一 个 按钮 是 普通 Button 还 是 ImageButton， 在 新 版 
NGUI 中 这 俩 已 经 合并 ， 只 有 一 种 Button 了。 

(5) 广泛 的 说 ， 按 钮 的 核心 在 于 接收 事件 ， 任 何 可 以 接收 用 户 操 
作 事 件 的 ， 都 可 以 称 之 为 按钮 。 


图 3.15 展 示 了 一 些 按 钮 的 案例 。 


A 图 3.15 


3.5.2 创建 按钮 


在 旧版 本 的 NGUI 中 ， 按 钮 分 为 了 两 种 按钮 : 普通 Button (在 一 个 
背景 底板 上 面 写 有 按钮 的 文字 ) 和 ImageButton (按钮 是 一 张 纯 图 片 ， 
并 且 不 同 状 态 可 以 变 为 不 同 的 图 片 ，。 旧 版 本 中 的 按钮 创建 方式 也 是 
由 WidgetWizard 来 创建 。 但 是 ， 将 普通 的 按钮 和 ImageButton 分 开 并 不 
是 很 科学 ， 因 为 在 游戏 开发 过 程 中 ， 这 两 种 按钮 的 应 用 太 广 泛 了 ,每 
次 都 需要 去 区 分 创建 普通 Button 和 ImageButton 是 一 件 很 麻烦 的 事 。 所 
以 ， 在 新 版 本 的 NGUI 中， 普通 Button 和 ImageButton 合 并 了 。 

创建 按钮 ， 可 以 用 以 下 任 一 种 简单 的 方式 。 


(1) 创建 一 个 Sprite， 这 个 Sprite 将 会 是 按钮 的 外 形 。 
(2) 选中 创建 的 这 个 Sprite， 然 后 在 Unity 顶 部 菜单 中 选择 NGUI、 
选择 Attach、 选 择 Collider 。 
(3) 选中 创建 的 这 个 Sprite， 然 后 在 Unity 顶部 菜单 中 选择 
NGUI、 选 择 Attach、 选 择 ButtonScript。 
我 们 可 以 用 Label、Texture 等 其 他 控件 来 代 奉 Sprite 去 制作 一 个 按 
钮 ， 方 法 一 模 一 样 ， 并 不 一 定 非 要 以 Sprite 作 为 基础 进行 创建 。 只 是 用 
Sprite 制 作 按钮 在 游戏 开发 中 更 为 普遍 ， 所 以 以 它 作 为 例子 。 
如 果 需 要 在 创建 好 的 这 个 按钮 上 写 上 文字 ， 例 如 , “确定 >”、“ 取 消 ” 
等 ， 只 需要 选中 这 个 按钮 ， 然 后 在 它 下 面 创建 一 个 Label， 并 写 上 “ 确 
定 ” 即 可 ， 注 意 ，Label 的 深度 要 高 于 这 个 按钮 的 深度 ， 这 样 就 完成 了 一 
个 “确定 ”的 按钮 。 
小 提示 ， 创 建 出 来 的 Sprite 记得 单 击 Snap， 让 它 回 归 到 原 尺寸 大 
小 ， 然 后 再 去 等 比例 调整 它 的 大 小 ， 这 样 可 以 尽量 减少 图 乒 的 形变 。 


3.5.3 核心 组 件 BoxCollider 


首先 ， 按 钮 要 接收 单 击 事件 ， 必 须要 有 一 个 控件 形态 ， 它 可 以 是 
Sprite、Label、Texture 等 。 人 至 于 这 个 组 件 的 使 用 ， 我 们 前 文 讲 过 了 ， 整 
不 浪费 篇 幅 多 讲 了。 我 们 直接 讲解 按钮 的 另外 两 个 核心 组 件 。 

1. 核心 组 件 : BoxCollider 

BoxCollider 是 一 个 物理 组 件 ， 准 确 地 说 是 一 个 物理 碰撞 盒 ， 所 有 
的 需要 接收 外 部 输入 事件 的 (如 单 击 、 拖 动 等 ) UI， 都 需要 拥有 一 个 
BoxCollider， 这 个 BoxCollider 代 表 的 是 啊 应 事件 的 范围 。 如 琳 没 有 
BoxCollider， 那 么 这 个 控件 无 论 如 何 都 无 法 接收 到 外 部 事件 ， 这 是 
NGUI 的 一 个 底层 原则 。 


愤然 BoxCollider 代 表 的 是 接收 事件 的 啊 应 范围 ， 那 么 ， 如 果 我 们 
将 一 个 按钮 的 BoxCollider 大 小 设 为 全 屏幕 ， 则 单 击 屏幕 上 任何 一 个 地 
方 ， 都 相当 于 单 击 了 这 个 按钮 。 

我 们 可 以 通过 上 一 广 讲 的 Attach 方 法 目 动 生成 一 个 BoxCollider， 世 
可 以 通过 Inspector 面 板 中 单 击 AddCompent 手动 附加 一 个 BoxCollider 。 
区 别 在 于 : 通过 NGUI 菜单 Attach 的 BoxCollider 的 大 小 ， 会 目 动 刚好 
包围 控件 的 范围 ， 而 手动 创建 的 BoxCollider， 大 小 需要 手动 去 调整 。 

BoxCollider 的 组 件 设 置 如 图 3.16 所 示 ， 图 3.16 中 按钮 的 边框 变 成 了 
一 个 绿 框 ， 这 个 绿 框 就 是 BoxCollider 的 包围 框 ， 只 要 在 Inspector 面 板 中 
展开 BoxCollider 的 组 件 ， 就 能 看 到 这 个 绿 框 ， 如 有 果 Inspector 面 板 中 
BoxCollider 组 件 的 设置 某 单 补 收 起 来 了 ， 则 不 会 出 现 这 个 绿 框 。 

在 BoxCollider 中 ， 我 们 可 以 看 到 它 的 设置 很 简单 ， 先 来 熟悉 一 下 
它 的 设置 。 

(1) Is Trigger 。 

是 否 打 开 触 发 器 ， 这 个 设置 对 于 NGUI 没 什么 用 ， 它 打开 的 作用 是 

可 以 通过 物理 碰撞 触发 事件 《如 相 拉 爆炸 等 ) 。 


A 图 3.16 


(2) Material 。 
材质 设 定 ， 这 里 设 定 的 是 物理 材质 ， 对 NGUI 也 没有 什么 用 ， 它 的 
作用 是 为 这 个 碰撞 盒 包 围 的 物体 设 定 一 个 物理 的 表面 ， 例 如 ， 一 块 地 
面 是 草地 、 还 是 木板 、 还 是 金属 。 
(3) Center 。 
中 心 位 置 的 偏 移 。BoxCollider 都 有 一 个 中 心 点 ， 这 里 的 Center 就 
是 设置 它 的 中 心 点 相对 于 控件 的 中 心 点 的 偏 移 ， 是 一 个 相对 量 ， 所 以 
需要 注意 一 点 : BoxCollider 的 这 个 Center 会 受到 控件 本 吴 的 Pivot 中 心 
点 设置 的 影响 。 如 图 3.17 所 示 的 BoxCollider 的 Center 偏 移 量 为 (0，0， 
0) ， 但 是 ， 因 为 控件 的 Pivot 将 中 心 点 设置 为 了 右上 和 角 的 点 ， 所 以 形成 
了 图 3.17 所 示 的 情况 。 


A 图 3.17 


(4) Size 。 

尺寸 设置 。 这 是 一 个 非常 重要 和 常用 的 设置 ， 经 常 配 合 Center 设 
置 一 起 使 用 ， 以 此 来 调整 控件 响应 区 域 的 大 小 和 位 置 。 例 如 ， 假 设 我 
们 要 做 一 款 手 机 游戏 ， 在 屏幕 中 有 一 个 很 小 的 关闭 按钮 ， 经 常 导 致 玩 
家 点 不 中 它 ， 我 们 就 可 以 依靠 设置 Size 来 将 它 的 啊 应 区 域 变 大 ， 这 样 
玩家 只 要 单 击 到 关闭 按钮 周围 的 区 域 ， 都 能 触发 天 闭 按钮 的 啊 应 事 
件 。 值 得 注意 的 是 ， 这 里 Size 的 Z 值 在 UI 中 是 几乎 没有 用 的 ，X 和 Y 的 值 
都 是 以 像素 为 单位 。 

需要 注意 的 是 ，BoxCollider 一 般 需 要 依赖 于 一 个 非 空 的 、 实 质 的 
物体 ， 例 如 ， 如 果 这 个 BoxCollider 物 体 身 上 没有 控件 (Sprite、Label、 
Texture 等 ) ， 只 有 一 个 孤零零 的 BoxCollider， 那 么 在 大 部 分 情况 下 ， 
这 个 BoxCollider 是 无 法 接收 事件 的 。 

男 一 个 核心 组 件 如 3.5.4 市 所 讲 。 


3.5.4 核心 组 件 UIButton 


首先 我 们 要 明确 的 是 ，UIButton 并 不 是 一 个 按钮 的 必须 组 件 ， 也 
瓯 是 说 ， 没 有 UIButton 时 ， 我 们 也 能 完成 一 个 按钮 。 只 要 这 个 控件 上 
有 BoxCollider ， 我 们 就 可 以 在 脚本 中 通过 OnClick()、OnHover() 等 事 
件 监 听 画 数 去 触发 一 个 啊 应 事件 。 那 么 ，UIButton 的 价值 到 压 是 什么 ? 
什么 情况 下 使 用 UIButton? UIButton 有 以 下 一 些 重要 的 用 途 。 

(1) 可 以 设置 不 同 状态 下 的 颜色 ， 比 如 普通 状态 、 单 击 状态 、 鼠 
标 光 标 巧 停 状 态 、 华 用 状态 ， 可 以 有 不 同 的 颜色 来 表示 。 

(2) 可 以 设置 不 同 状态 下 的 图 片 ， 这 就 是 所 谓 的 ImageButton， 比 
如 我 们 希望 图 片 A 在 鼠标 光标 巧 停 在 上 面 时 ， 变 成 图 片 B 。 

(3) 可 以 很 方便 地 被 动态 赋予 响应 事件 并 分 发 事件 。 也 就 是 说 ， 
我 们 可 以 临时 地 在 A 物体 号 上 的 脚本 里 动态 让 B 按 钮 拥有 一 个 或 者 很 
多 个 完全 不 同 的 啊 应 事件 。 以 前 的 旧版 本 NGUI 中 ， 都 是 用 
EventListener 来 实现 ， 新 版 本 中 将 会 更 加 方便 和 快捷 。 


A 图 3.18 


我 们 来 了 解 一 下 按钮 组 件 的 设置 ，UIButton 按 钮 组 件 的 Inspector 面 
板 设 置 界 面 如 图 3.18 所 示 。 
(1) TweenTarget° 
动画 目标 ， 默 认为 按钮 自己 。 按 钮 在 光标 基 停 时 变色 、 被 单 击 时 
变换 图 片 等 ， 都 是 动画 。 绝 大 部 分 情况 下 ， 这 个 设置 都 需要 设 为 自己 
(默认 就 是 按钮 自己 ) 。 
(2) DragOver 。 
拖 动 结束 事件 ， 默 认为 Do Nothing。 这 里 有 两 个 选项 : Do Nothing 
和 Press。 之 所 以 有 这 个 选项 ， 是 因为 按钮 在 被 拖 动 时 ， 有 一 个 事件 的 
交叉 : 如 采 我 们 拖 动 一 个 按钮 ， 那 么 不 仅仅 拖 动 了 它 ， 同 时 也 按 下 了 
它 。 这 个 设置 的 目的 就 是 ， 定 义 它 被 拖 动 结束 后 ， 是 否 还 执行 按 下 事 
件 。 


(3) Transition 。 

过 渡 时 间 。 这 里 是 动画 过 渡 的 时 间 ， 例 如 ， 我 们 设 定 按钮 在 鼠标 
光标 滑 过 时 ， 要 变 黑 ， 这 个 设置 就 症 设 置 它 在 光标 消 过 时 由 正常 到 变 
黑 的 时 间 ， 

(4) Colors 模 块 。 

这 里 是 改变 颜色 ， 可 以 设置 在 不 同 状态 下 按钮 的 颜色 和 透明 度 。 
一 共 提 供 了 4 种 状态 可 设置 : 普通 状态 、 按 钮 被 鼠标 光标 滑 过 时 的 状 
态 、 按 钮 被 按 下 的 状态 、 按 钮 不 可 单 击 时 (BoxCollider 被 禁用 ) 的 状 
态 。 设 置 颜色 的 方式 前 文 已 讲 过 ， 束 不 再 著述 。 

(5) Sprites 模 块 。 

这 里 是 精灵 设置 模块 ， 也 就 是 整合 进来 的 ImageButton 模 块 。 值 得 
注意 的 是 ， 如 果 制 作 按钮 时 不 是 使 用 一 个 精灵 控件 作为 基础 制作 的 ， 
那么 将 不 会 有 这 个 模块 。 人 例如， 我们 为 一 个 Texture 附 加 BoxCollider 和 
UIButton 来 制作 按钮 ， 此 时 UIButton 组 件 就 不 会 有 这 个 模块 。 


在 这 里 可 以 设置 按钮 在 不 同 的 状态 下 显示 什么 样 的 图 片 。 一 共 支 
持 4 种 状态 ， 普通 状态 、 按 钮 被 鼠标 光标 滑 过 时 的 状态 、 按 钮 被 按 下 的 
状态 、 按 钮 不 可 单 击 时 (BoxCollider 被 禁用 ) 的 状态 。 

当 我 们 通过 Sprite 制 作 一 个 按钮 时 ， 我 们 创建 的 Sprite 会 默认 出 现在 
Normal 设 置 中 ， 然 后 任何 状态 下 ， 按 钮 图 片 都 是 这 个 精灵 不 会 再 变 
化 。 

如 果 我 们 需要 按钮 在 不 同 状态 下 进行 变化 ， 我 们 可 以 分 别 对 每 个 
状态 需要 显示 的 精灵 进行 设置 ， 设 置 的 方法 为 单 击 状态 名 称 的 按钮 ， 
会 弹出 图 集中 所 有 精灵 的 预览 (图 集 是 Normal 状 态 显 示 的 精灵 所 属 的 
图 集 ) 。 

如 果 我 们 要 取消 一 个 状态 下 显示 精灵 的 设置 ， 可 以 单 击 该 状态 后 
面 的 小 减 号 。 但 是 ， 普 通 状 态 下 的 精灵 无 法 被 取消 ， 当 其 他 状态 没有 
设置 精灵 时 ， 将 会 默认 显示 普通 状态 的 精灵 。 

PixelSnap 是 指 保 持原 像素 尺寸 ， 当 我 们 设置 了 不 同 状 态 下 显示 不 
同 的 Sprite 时 ， 只 有 人 义 选 了 这 个 框 ， 才 会 让 显示 的 不 同 的 Sprite 都 以 原 
像素 尺寸 显示 。 如 果 不 勾 选 ， 则 所 有 状态 下 的 Sprite 都 会 统一 以 这 个 按 
钮 控件 (制作 按钮 时 所 用 的 Sprite) 的 尺寸 大 小 进行 显示 。 

(6) OnClick° 

这 里 是 设置 按钮 响应 单 击 事件 的 地 方 。 我 们 设置 按钮 响应 事件 时 
可 以 通过 以 下 操作 。 

将 该 按钮 要 响应 的 事件 函数 的 脚本 所 在 的 物体 拖 入 到 Notify 中 ， 
然后 该 物体 的 名 称 就 会 出 现在 Notify 的 设置 框 中 ， 会 自动 出 现 该 物体 下 
所 有 脚本 中 的 Public 芳 数 ， 然 后 选择 要 按钮 啊 应 的 那个 贸 数 即 可 。 

也 就 是 说 ， 在 这 里 可 以 让 按钮 响应 任何 一 个 物体 身上 的 、 任 何 一 
个 脚本 的 、 任 何 一 个 Public 函 数 。 

在 这 里 当 你 设置 了 第 一 个 啊 应 事件 之 后 ， 会 目 动弹 出 第 二 个 啊 应 
事件 的 设 定 ， 也 就 是 说 ， 通 过 这 里 的 设置 ， 可 以 让 按钮 被 单 击 之 后 响 


应 任何 多 个 事件 ， 如 图 3.19 所 示 。 


A 图 3.19 


3.5.5 制作 按钮 的 放 缩 动画 


如 果 我 们 硕 望 单 击 按钮 时 ， 按 钮 会 有 一 个 放 缩 动画 (如 突然 变 大 
并 蹦 一 下 ) ， 我 们 可 以 单 击 AddCompent、 选 择 NGUI、 选 择 
Interaction， 在 里 面 找到 ButtonScale 脚 本 ， 附 加 到 按钮 物体 上 ， 如 图 
3.20 所 示 。 


| VUIButton Scale (Script) 
Script 国 UIButtonScale 
None (Transform) 


A 图 3.20 
ButtonScale 的 核心 作用 残 是 控制 按钮 的 放 缩 动画 ， 我 们 来 了 解 一 
下 它 的 设置 。 
(1) Script° 
文 个 是 它 所 调用 的 脚本 ， 我 们 不 用 管 ， 它 会 目 动 定 位 好 。 
2) TweenTarget ° 


这 个 是 它 所 控制 的 动画 作用 的 目标 物体 ， 我 们 不 用 管 。 在 运行 
时 ， 它 会 自动 设 定 为 当前 所 属 的 按钮 物体 。 
(3) Hover。 


当 鼠 标 光 标 划 过 时 ， 按 钮 控件 的 大 小 变化 。 
(4) Pressed 。 
当 按 钮 按 下 时 ， 按 钮 控件 的 大 小 变化 。 
(5) Duration ° 
完成 缩放 动画 的 时 间 ， 以 秒 为 单位 ， 默 认为 0.2 秒 完成 。 
需要 注意 的 是 ， 这 个 组 件 一 般 只 用 于 按钮 ， 如 果 非 按钮 要 做 动 
， 请 参看 后 文 讲解 的 Tween 动 画 制 作 。 


3.5.6 制作 按钮 的 偏 移动 画 


如 采 硕 望 按 钮 有 一 个 偏 移动 画 ， 例 如 ， 单 击 按钮 时 按钮 会 癌 右 下 
方 蹦 一下， 我 们 可 以 为 按钮 制作 一 个 仿 移 动画 。 方 法 和 制作 缩放 动画 
类 似 ， 在 AddCompent 来 单 中 ， 选 择 NGUI、 选 择 Pnteraction， 然 后 找到 


El 


ButtonOffset， 附 加 到 按钮 上 。 


~ 


A 图 3.21 
图 3.21 束 是 ButtonOffset 组 件 的 设置 界面 ， 我 们 来 了 解 一 下 它 的 设 
置 o 


(1) Script、TweenTarget 和 ButtonScale 组 件 一 模 一 样 ， 都 不 用 管 
这 俩 设置 。 
(2) Hover。 
按钮 在 鼠标 光标 滑 过 时 的 位 置 偏 移 。 这 里 偏 移 的 是 相对 坐标 。 
(3) Pressed 。 
按钮 在 按 下 时 的 位 置 偏 移 ， 这 里 也 是 相对 坐标 。 


(4) Duration 。 


持续 时 间 。 
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7 钮 也 男 


如 果 我 希望 按钮 在 被 单 击 时 能 旋转 一 下 ， 就 可 以 为 按钮 制作 一 个 
旋转 动画 ， 方 法 和 制作 缩放 偏 移动 画 一 模 一 样 ， 旋 转动 画 的 脚本 是 
ButtonRotation。 有 具体 设置 和 其 他 动画 类 似 ， 这 里 就 不 多 效 述 了 。 


3.5.8 添加 按钮 单 击 音效 


在 游戏 开发 中 ， 一 般 情况 下 我 们 都 需要 为 按钮 增加 单 击 音效 ， 为 
按钮 添加 音效 的 办 法 很 简单 ， 可 以 在 AddCompent 中 ， 选 择 NGUI、 选 
择 Interaction， 然 后 将 PlaySound 组 件 附加 到 按钮 上 。 


UIPlay Sound (Script) 
script 国 UIPlaySound 
Audio Clir 3 


Triggel 
olume 
Pitch 


A 图 3.22 

图 3.22 是 PlaySound 组 件 的 设置 界面 ， 我 们 来 了 解 一 下 它 的 设置 。 

(1) AudioClip 。 

音效 的 源 文件 ， 将 音效 文件 拖 到 此 处 即 可 。 

(2) Trigger。 

触发 模式 ， 就 是 在 什么 情况 下 触发 音效 ， 默 认为 OnClick。 这 里 给 
了 以 下 几 种 模式 : OnClick 〈 单 击 触发 ) 、OnMouseOver 《鼠标 光标 移 
上 来 ) 、OnMouseOut 《鼠标 光标 移 开 触发 ) 、OnPress 〈 按 下 触 
发 ) 、OnRelease (释放 触发 ) 、Custom ( 自 定义 触发 ， 即 脚本 中 控制 
触发 ) 。 

(3) Volume 。 


音量 大 小 ， 为 0 到 1 之 间 的 一 个 浮 点 数 。 
(4) Pitch 。 
音调 ， 也 为 0 到 1 之 间 的 一 个 浮上 点数 。 


eeaQ 任何 二 
3.5.9 1 工作 | 地 


利用 按钮 的 原理 ， 可 以 将 任何 事物 变 成 一 个 按钮 。 下 面 举 个 例 
子 : 我 们 把 一 个 三 维 模型 变 成 按钮 ， 让 它 可 以 接收 事件 。 

首先 ， 我 们 单 击 Unity 顶 部 菜单 的 GameObject， 选 择 Creat、 选 择 
Cube 创 建 一 个 立方 体 模型 (也 可 以 从 外 部 导入 模型 文件 ， 这 里 为 了 讲 
解 方便 ， 直 接 采 用 简单 的 立方 体 ) 。 为 了 证 它 看 得 更 清楚 ， 可 以 加 一 
个 灯光 ， 创 建 好 之 后 如 图 3.23 所 示 。 


A 图 3.23 
然后 我 们 要 进行 如 下 的 关键 步骤 。 


1. 让 摄像 机 能 够 监听 事件 

根据 前 文 所 讲 ， 只 有 带 有 UICamera 组 件 的 摄像 机 照射 到 的 物体 ， 
才能 接收 事件 啊 应 。 我 们 可 以 看 到 这 个 Cube 是 由 场景 中 MainCamera 渔 
染 出 来 的 ， 我 们 先 为 MainCamera 附 加 一 个 UICamera 组 件 。 

选中 MainCamera， 在 Inspector 面 板 中 单 击 AddCompent 按 钮 ， 选 择 
NGUI、 选 择 UI， 然 后 选择 那个 NGUI Event System， 这 个 组 件 就 是 
UICamera 组 件 。 这 样 我 们 整 为 主 摄像 机 附加 了 NGUI 的 事件 监听 。 

2， 为 Cube 附 加 按钮 的 天 键 组 件 BoxCollider 

选择 Cube， 首 完 为 其 附加 一 个 BoxCollider。 可 以 通过 AddCompent 
按钮 选择 Physics， 然 后 BoxCollider (也 可 以 通过 Unity 顶 部 NGUI 表 单 去 
Attach 一 个 BoxCollider) 。 

默认 情况 下 这 个 BoxCollider 的 尺寸 为 0， 我 们 需要 为 它 调整 尺 
寸 ， 值 得 注意 的 是 ， 这 个 Cube 因 为 不 是 UIRoot 的 子 物体 ， 所 以 ， 这 里 
的 尺寸 单位 是 : 米 。 我 们 将 尺寸 设 为 (1,1,1) ， 然 后 就 能 看 到 Cube 被 
一 个 绿 框 所 包围 。 设 置 尺寸 的 时 候 要 注意 ， 这 个 Cube 并 不 是 一 个 UI 图 
片 ， 所 以 一 定 要 设置 Z 轴 的 尺寸 。 

3， 为 Cube 附 加 UIButton 

附加 方法 可 以 通过 Unity 顶 部 NGUI 识 单 去 Attach， 也 可 以 通过 
AddCompent。 制 作 好 之 后 ， 我 们 会 发 现 这 个 Cube 之 下 并 没有 
ImageButton 才 拥有 的 Sprites 模 块 ， 前 文 我 们 有 讲 过 ， 只 有 以 Sprite 作 为 
基础 制作 出 来 的 按钮 才 会 有 这 个 Sprites 模 块 。 

到 此 为 止 ， 我们 就 已 经 将 Cube 变 成 了 一 个 按钮 ， 鼠标 光标 移动 上 
去 ， 会 发 现 它 闫 色 改 变 为 Hover 状 态 下 的 颜色 了 ， 说 明 它 已 经 接收 事件 
Te 


3.6 进度 条 (UISlider 


3.6.1 怎样 判断 是 否 应 当 使 用 进度 条 


之 前 我 们 介绍 了 Sprite、Label、Texture、Button 的 用 法 ， 之 前 的 4 
种 都 是 比较 常用 的 基础 控件 。 而 进度 条 ， 是 一 种 更 为 高 级 的 控件 ， 它 
是 多 个 控件 的 结合 体 。 用 进度 条 的 主要 目的 是 为 了 用 一 根 管子 的 充满 
程度 来 直观 地 表示 某 种 数值 的 百分比 ， 进 度 条 分 为 可 拖 动 和 不 可 拖 动 
两 种 。 图 3.24 所 示 为 两 种 进度 条 ， 上 方 的 为 可 以 拖 动 的 进度 条 ， 下 方 的 
是 不 能 拖 动 的 进度 条 。 


A 图 3.24 

可 拖 动 进度 条 和 不 可 拖 动 进度 条 的 原理 几乎 是 一 模 一 样 ， 唯 一 的 
区 别 是 可 拖 动 进度 条 上 多 了 一 个 拖 动 块 和 BoxCollider 来 接收 事件 ， 而 
不 可 拖 动 的 进度 条 只 能 显示 一 个 数字 的 百分比 ， 无 法 由 玩家 去 操控 。 

我 们 在 判断 是 否 应 该 使 用 进度 条 时 ， 有 以 下 的 规律 可 以 遵循 。 

(1) 如 果 某 一 种 值 ， 它 有 最 大 值 ， 我 们 需要 表达 它 当 前 的 值 的 占 
比 ， 这 个 时 候 用 进度 条 会 非常 直观 。 此 时 应 当 用 不 可 拖 动 的 进度 条 。 
例如 : 角色 的 生命 值 、 法 力 值 、 角 色 升 级 经 验 等 。 

(2) 如 果 某 一 种 值 ， 它 有 最 大 最 小 值 ， 我 们 希望 玩家 去 自由 拖 动 
设置 ， 如 音量 调 世 、 亮 度 调节 等 ， 我 们 就 可 以 使 用 可 拖 动 的 进度 条 。 

需要 强调 的 是 ， 可 拖 动 进度 条 和 不 可 拖 动 进度 条 ， 他 们 的 原理 是 
一 模 一 样 的 ， 本 质 区 别 只 是 可 拖 动 进度 条 有 一 个 BoxCollider 。 它 们 都 
有 三 大 核心 要 素 构 成 ， 底 构 Sprite、 进 度 条 Sprite、 滑 动 块 。 


3.6.2 创建 进度 条 


进度 条 因为 是 多 种 基础 控件 的 一 个 集合 体 ， 所 以 创建 方式 有 多 
种 。 下 面 就 介绍 两 种 创建 方式 : 上 自己 拼装 和 使 用 预 设 。 
1. 第 一 种 方法 : 自己 拼装 出 一 个 进度 条 
(1) 创建 一 个 底 槽 Sprite 。 
(2) 为 底 模 Sprite 附加 一 个 UISlider 组 件 。 附 加 方法 为 
AddCompent =» NGUI— Interaction 一 NGUI Slider 。 
(3) 在 底 槽 Sprite 下 创建 一 个 进度 条 Sprite 作 为 子 物体 ， 调 整 好 尺 
寸 用 以 和 压 模 相 吻 合 。 
(4) 在 底 模 Sprite 下 创建 一 个 滑动 块 Sprite 作 为 子 物体 (如 果 不 需 
要 拖 动 可 以 不 创建 这 个 物体 ， 省 去 这 一 步 ) ， 然 后 在 底 槽 Sprite 上 
Attach 一 个 BoxCollider 。 
(5) 将 底 槽 Sprite 拖 动 到 自身 UISlider 组 件 上 的 Background 选 项 
中 ， 将 进度 条 Sprite 拖 动 到 底 槽 的 UISlider 组 件 上 的 Foreground 选 项 中 ， 
将 滑动 块 Sprite 拖 动 到 底 槽 的 UISlider 组 件 上 的 Thumb 选 项 中 ， 这 样 三 大 
要 素 束 并 备 了 ， 如 图 3.25 所 示 。 


二 图 525 
(6) 如果 和 希望 显示 当前 进度 的 百分比 数字 ， 则 在 滑动 块 下 创建 一 
个 Label 《如 果 不 硕 望 数 字 的 位 置 跟 着 滑动 块 走 ， 也 可 以 在 别 的 地 方 创 
建 Label) ， 然 后 将 该 Label 物体 拖 动 到 底 槽 的 UISlider 组 件 的 OnValue 
Change 模块 下 的 Notify 中 ， 然 后 在 出 现 的 Method 选项 中 选择 
UILabel.SetCurrent Percent 方 法 。 
一 个 进度 条 到 此 就 创建 完成 了 。 


2. 第 二 种 方法 : 使 用 PrefabToolBar 直 接 创建 

在 新 版 本 的 NGUI 中 ， 它 自身 制作 了 一 些 常用 的 UI 控件 的 预 设 ， 当 
我 们 需要 使 用 时 ， 直 接 拖 动 预 设 到 场景 中 ， 束 可 以 直接 完成 创建 。 

在 Unity 顶 部 菜单 中 选择 NGUI 菜 单 ， 选 择 Open、 选 择 
PrefabToolBar， 然 后 会 弹出 如 图 3.26 所 示 的 界面 ， 这 里 面 就 是 NGUI 已 
经 制作 好 的 一 些 预 设 。 


Prefab Toolbar 


A 图 3.26 
拖 动 其 中 想 要 的 预 设 到 UIRoot 下 (或 者 其 他 的 UI 节点 下 ) ， 就 可 
以 完成 创建 了 。 创 建 完成 之 后 记得 去 修改 它 的 各 个 Sprite 为 你 所 要 用 的 
Sprite ° 
因为 NGUI 创 建 的 预 设 是 固定 的 ， 具 有 一 些 缺 点 ， 比 如 UI 结构 不 一 


定 符 合 我 们 实际 项 目的 需求 ， 比 如 某 些 组 件 我 们 并 不 需要 。 所 以 ， 当 
你 足够 熟悉 理解 和 运用 NGUI 的 情况 下 ， 在 实际 的 游戏 项 目 开 发 中 ， 建 
议 自 己 制 作 进度 条 。 


3.6.3 核心 组 件 UISlider 设 置 


对 于 一 个 进度 条 控件 来 说 ， 不 管 是 不 是 可 以 拖 动 的 进度 条 ， 它 的 
核心 组 件 是 UISlider 脚 本 ， 它 的 组 件 设 置 界面 如 图 3.27 所 示 : 


我 们 来 了 解 一 下 它 的 工作 原理 。 

1. Value 

进度 值 ， 这 是 为 了 显示 当前 数值 在 “总 槽 ”里 的 百分比 ， 一 般 我 们 
制作 游戏 时 ， 都 会 在 代码 中 调用 这 个 参数 ， 让 它 由 游戏 中 相应 的 数据 
动态 计算 得 出 来 。 

2. Alpha 

透明 度 ， 默 认为 1。 这 里 会 控制 整个 进度 条 控件 的 透明 度 ， 可 以 用 
来 做 一 些 淡 入 淡出 的 效果 。 
图 
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A 图 3.27 

3. Steps 

每 次 变动 的 步伐 大 小 。 默 认为 0，0 就 是 无 限制 ， 也 就 是 Value 值 可 
以 是 任意 一 个 值 ， 如 有 果 设 置 了 ， 那 么 Value 就 会 “一 段 一 段 的 ”变化 。 一 
般 游 戏 开 发 中 ， 我 们 都 不 需要 设置 这 个 值 。 

它 的 填 值 效果 为 “关键 点 数量 的 概念 ”， 例 如 ， 填 入 5， 则 代表 完整 
进度 条 只 有 5 个 点 ， 相 当 于 进度 条 的 值 将 会 只 有 : 0、0.25、0.5、 
0.75、1 一 共 5 个 值 。 

4. Appearance 模 块 

这 里 是 设置 滑动 条 的 一 些 组 件 。 


eForeground 

这 是 进度 条 上 层 表示 进度 的 Sprite， 将 它 拖 动 到 这 里 就 算 完 成 了 设 
置 。Foreground 的 长 度 会 随 着 Value 的 变化 而 自动 变化 。 

eBackground 

这 是 进度 条 的 底 槽 Sprite， 将 它 拖 动 到 这 里 就 算 完成 了 设置 。 底 覃 
的 长 度 是 不 会 发 生变 化 的 。 

eThumb 

这 是 拖 动 块 的 设置 ， 将 任何 一 个 物体 拖 动 到 这 里 来 ， 它 就 将 随 着 
Value 的 变化 而 发 生 位 置 的 变化 。 

例如 ， 如 果 希 望 在 进度 条 的 当前 进度 位 置 显示 一 个 数字 ， 就 可 以 
将 这 个 数字 作为 Thumb 拖 到 这 里 。 然 后 数字 的 位 置 就 会 跟着 进度 条 移 
动 ， 永 远 处 于 进度 条 的 当前 进度 位 置 。 如 图 3.28 所 示 ，Thumb 数 字 的 位 

会 随 着 Value 变化 ， 永 远 显 示 在 当前 进度 的 位 置 。 

eDirection 

进度 条 的 正方 向 ， 默 认为 从 左 至 右 。 里 面 提 供 了 4 种 选择 : 从 左 至 
右 、 从 右 至 左 、 从 上 到 下 、 从 下 到 上 。 


A 图 3.28 


5. On Value Change 
这 是 进度 变量 发 生变 化 时 的 一 个 回调 函数 ， 当 Value 值 发 生变 化 
时 ， 束 会 执行 这 里 的 函数 。 这 里 的 设 定 方法 ， 和 设置 Button 的 回调 方法 


是 一 模 一 样 的 。 

值得 注意 的 是 ， 如 果 我 们 希望 在 值 发 生变 化 时 ， 上 自动 改变 一 个 百 
分 比 数字 (Label) 的 显示 ，NGUI 为 我 们 提供 了 一 个 简单 的 方法 : 将 要 
显示 该 进度 条 百分比 的 Label 物 体 拖 入 到 Notify 中 ， 然 后 在 Method 栏 中 
选择 UILabel.SetCurrentPercent 方 法 ， 这 样 ， 当 进度 条 的 Value 值 改 变 
时， 它 就 能 目 动 地 改变 这 个 Label 文 本 的 显示 。 


3.6.4 进度 条 的 BoxCollider 说 明 


eBoxCollider 只 有 附加 a 到底 模 上 才 有 用 。 

e 如 条 没有 BoxCollider， 进 度 条 无 论 如 何 都 无 法 进行 拖 动 设置 。 

eBoxCollider 将 会 接收 进度 条 上 任何 一 个 位 置 的 消息 来 直接 设置 进 
度 。 例 如 ， 不 去 拖 滑动 块 ， 直 接 在 90% 的 位 置 点 一 下 ， 那 么 进度 会 直接 
变 为 90% 。 

eBoxCollider 和 拖 动 块 Thumb 没 有 必然 联系 ， 如 果 没 有 
BoxCollider， 那 么 即使 有 拖 动 块 ， 也 无 法 通过 拖 动 和 单 击 等 来 设置 进 
度 o 

e 只 要 有 BoxCollider， 即 使 没有 拖 动 块 ， 我 们 也 能 直接 拖 动 和 单 击 
来 设置 进度 位 置 。 


3.7 制作 输入 框 (Imnputb 


3.7.1 怎样 判断 是 否 应 当 使 用 输入 框 


输入 框 ， 就 是 用 户 可 以 目 由 输入 文本 的 地 方 ， 输 入 框 因为 其 功能 
的 单一 性 非常 好 判断 是 否 应 当 使 用 输入 框 。 当 我 们 需要 判断 是 否 需 要 


使 用 输入 框 时 ， 可 以 遵循 一 条 原则 : 凡是 需要 用 户 目 主 输入 文本 的 地 
方 ， 几 乎 都 必须 使 用 输入 框 。 

输入 框 的 闻 见 用 法 : 输入 登录 账号 和 密码 、 输 入 角色 名 称 、 输 入 
聊天 内 容 等 。 


3.7.2 创建 输入 框 
我 们 来 学 习 创 建 一 个 如 图 3.29 所 示 的 输入 框 。 
图 3.29 
首先 ， 我 们 要 了 解 输入 框 控 件 的 3 个 核心 控件 BoxCollider 组 件 
允许 UI 能 输入 事件 、UIInput 组 件 允 许 玩家 能 输入 目 己 的 文字 、 一 个 
UILabel 来 显示 输入 的 文字 。 
1. 第 一 种 创建 方式 ， 目 己 拼装 
(1) 创建 一 个 Sprite 作 为 输入 框 的 底板 (就 如 图 3.29 中 的 底 框 )。 
(2) 为 这 个 输入 框 的 底板 附 上 UIInput 组 件 ， 附 加 方法 为 
AddCompent =» NGUI—= UI Input Field ° 
(3) 为 这 个 输入 框 附加 一 个 BoxCollider， 附 加 方法 为 先 选中 底板 
Sprite， 然 后 选择 Unity 顶 部 NGUI 菜 单 并 选择 Attach 一 BoxCollider。 或 者 
AddCompent 一 Physics ~ BoxCollider (此 种 方式 创建 的 需要 自主 调整 
Box 的 尺寸 用 以 匹配 输入 框 大 小 ) 。 
(4) 在 这 个 输入 框 下 面 创建 一 个 Label 子 物体 ， 创 建 方法 为 选中 输 
入 框 ， 然 后 选择 Unity 顶 部 NGUI 羔 单 ， 选 择 Creat Label 即 可 。 
(5) 将 这 个 新 创建 的 Label 子 物体 拖 入 到 底 框 的 mput 组 件 中 的 
Label 选 项 (Input 组 件 的 第 一 个 选项 ) 中 。 
2. 第 二 种 创建 方式 : Prefab Tool Bar 中 直接 拖 入 


之 前 我 们 讲 过 ， 在 新 版 本 的 NGUI 中 ， 它 制作 了 一 批 常用 控件 的 预 
设 。 在 Unity 顶 部 选择 NGUI 深 单 ， 选 择 Open ~” Prefab Tool Bar， 就 能 打 
开 预 设 预 宽 业 单 ， 人 然后 在 其 中 将 名 为 Simple Input Field 的 预 设 体 拖 入 到 
Hierarchy 窗 口中 我 们 要 创建 的 UI 节点 下 即 可 。 


3.7.3 核心 组 件 Imput 设 置 


Input 组 件 是 输入 框 的 核心 组 件 ， 我 们 之 前 讲 Label 时 说 过 NGUI 显 
示 文 字 儿 乎 全 部 依赖 Label 组 件 ， 所 以 ，Input 组 件 它 本 身 是 无 法 显示 文 
字 的 ， 它 必须 和 一 个 Label 有 一 定 的 关联 ， 让 这 个 Label 来 帮助 显示 Input 
的 文本 内 容 。 

Input 组 件 的 界面 如 图 3.30 所 示 。 


@ VUIInput (Script) 
®Label (UILabel 


starting Value 


Selection Colc 

Input Type 
| 1 Type 

alidation 

haracter Limit 

起 On Submit 

Notify Control - Simple Input Field 

Method UIInput,RermoveFocUs 


Notif None (MonoBehaviou! 


4 On Change 


Notity 


A 图 3.30 
我 们 首先 来 熟悉 一 下 Input 组 件 的 设置 内 容 。 
1. Label 设 置 


这 个 是 最 核心 的 设置 之 一 ， 刚 才 我 们 已 经 讲 过 ，NGUI 中 所 有 的 文 
本 显示 都 依赖 于 Label， Input 本 身 是 无 法 显示 文本 内 容 的 ， 所 以 ， 它 需 
要 借助 一 个 Label 来 显示 玩家 输入 的 文本 ， 这 也 是 我 们 之 前 在 学 习 目 己 
拼装 输入 框 控件 时 为 什么 要 在 输入 框 下 面 创建 一 个 Label 子 物体 的 用 

我 们 将 一 个 Label 拖 入 到 这 里 就 算 完 成 了 设置 ， 以 后 这 个 输入 框 中 
玩家 输入 的 所 有 内 容 都 将 显示 在 这 个 Label 上 。 

如 有 果 在 这 里 我 们 不 设置 Label， 运 行 之 后 单 击 输入 框 将 会 报错 导 ， 
致 输入 框 无 法 使 用 。 

2. Starting Value 

默认 输入 的 文字 。 这 里 一 定 要 注意 区 别 “ 默 认输 入 的 文本 ”和 “初始 
显示 的 文本 ”两 个 概念 的 区 别 ! 

默认 输入 的 文本 当 运 行 游戏 时 ， 输 入 框 默 认输 入 的 文本 ， 这 个 
文本 是 模拟 玩家 输入 进去 的 ， 就 好 像 登 录 QQ 时 目 动 填充 了 你 的 QQ 号 
一 样 ， 这 个 文本 是 一 个 属于 输入 的 文本 、 真 实 有 效 的 输入 文本 (只 不 
过 它 是 初始 自动 就 输入 进去 了 而 已 ) 。 

初始 显示 的 文本 : 这 个 是 输入 框 在 没有 接收 用 户 输 入 时 显示 的 提 
示 文 本 ， 例 如 : “请 输入 密码 *”、“ 请 在 这 里 单 击 进行 聊天 ”等 提示 性 文 
字 ， 用 户 单 击 输入 框 之 后 文字 就 消失 了 变 成 了 用 户 输入 的 文本 的 显 
示 。 这 个 初始 显示 的 文本 只 有 一 个 纯粹 的 提示 作用 ， 不 属于 输入 的 文 
古人 小 刀 歼 的 文本: 

这 里 的 Starting Value 变量 设置 的 是 默认 和 输入 的 文本 。 初 始 显示 的 
文本 在 Input 相关 联 的 Label 中 进行 设置 ， 这 个 关联 的 Label 的 文本 内 容 
瓯 是 输入 框 初 始 显示 的 内 容 。 

3. Saved As 

输入 的 内 容 在 Player Pref 中 的 哪个 字段 保存 。 这 个 我 们 一 般 用 不 
到 ， 而 且 它 会 自动 保存 ， 基 本 不 用 去 管 它 。 如 果 有 特殊 需求 ， 可 以 在 


这 里 设置 。 

4. Active Text Color 

活动 文本 的 颜色 和 透明 度 设置 ， 也 就 是 用 户 在 输入 文字 时 的 文字 
颜色 和 透明 度 。 默 认为 日 色 ， 有 需求 的 可 以 上 自行 设 定 。 

5. Inactive Color 

不 活动 的 文字 颜色 和 透明 度 ， 这 个 可 以 用 来 设 定 初 始 显示 的 文字 
的 颜色 和 透明 度 。 

6. Caret Color 

这 个 可 以 设 定 插入 符 的 颜色 和 透明 度 。 

7. Selection Color 

选中 的 颜色 和 透明 度 ， 这 个 表示 的 是 我 们 选中 输入 的 文本 时 ， 履 
盖 在 文本 上 的 那 一 层 迟 单 的 颜色 ， 就 像 在 Word 办 公 软 件 中 ， 我 们 输入 
的 字 可 以 通过 拖 动 鼠标 光标 来 选中 它们 一 样 。 如 图 3.31 所 示 ， 我 们 设 定 
了 寺中 之 后 如 香 为 红色 。 


A 图 3.31 


8. Input Type 

输入 类 型 的 设 定 ， 默 认为 Standard 标 准 输入 。 

eStandard 

标准 输入 类 型 ， 输 入 的 文字 会 正常 一 个 挨 一 个 地 显示 出 来 。 它 的 
对 齐 方式 全 部 由 Input 相 关联 的 Label 决 定 。 

® AutoCorrect 

自动 调 整 模式 ， 类 似 于 Label 中 的 自动 调整 模式 。 


ePassword 


密码 模式 ， 在 这 种 模式 下 ， 输 入 的 文字 会 自动 地 变 成 * 符 号 ， 如 图 
3.32 所 示 。 


A 图 3.32 

9. Keyboard Type 

这 是 输入 文本 时 ， 键 盘 的 类 型 设 定 。 它 有 以 下 几 种 类 型 : 

eDefault; 

eASCCapable 〈 任 何 格式 都 允许 ) ， 

eNumbersAndPunctuation ; 

@URL; 

e NumberPad; 

ePhonePad; 

eNamePhonePad; 

eEmailAddress; 

eHiddenInput ° 

10. Validation 

验证 。 上 默认 为 none 没 有 验证 ， 可 以 验证 整数 、 浮 点数 等 ， 如 果 输 
入 的 字符 不 属于 验证 类 型 将 无 法 输入 〈 整 数 允 许 视 为 浮 点 型 ) 。 

11. Character Limit 

可 输入 的 最 大 字符 数 限 制 。 需 要 注意 的 是 ， 一 个 汉字 要 占用 两 个 
字符 。 

12. On Submit 

这 里 是 提交 输入 内 容 时 的 触发 事件 函数 设 定 。 

13. On Change 

这 里 是 当 输 入 内 容 改变 时 的 触发 事件 函数 设 定 。 


3.7.4 输入 框 使 用 的 一 些 注音 事项 


输入 框 是 一 个 集成 了 很 多 功能 的 组 件 ， 我 们 在 使 用 输入 框 控 件 
时 ， 要 注意 以 下 一 些 要 点 ， 以 免 发 生 不 必要 的 困扰 。 

(1) 输入 框 Input 本 身 是 无 法 显示 文字 的 ， 它 必须 借助 于 一 个 
Label 来 帮 它 显示 输入 的 文本 。 

(2) 输入 框 输入 文本 的 字体 ， 是 在 输入 框 关联 的 Label 中 设 定 的 ， 
这 个 天 联 的 Label 用 的 什么 字体 ， 则 输入 框 中 输入 的 内 容 束 会 是 什么 字 
体 。 


(3) 输入 框 必须 要 有 一 个 BoxCollider 和 一 个 Sprite 底 框 ， 否 则 无 法 
输入 。 

(4) 输入 框 中 对 输入 的 文本 的 设 定 都 受 关联 的 Label 的 影响 ， 因 为 
它 本 身 是 借助 这 个 Label 来 显示 文字 的 。 但 是 ， 如 果 发 生 冲 突 ， 比 如 在 
Input 组 件 中 设 定 文字 颜色 为 红色 ， 而 在 关联 的 Label 中 设 定 文字 颜色 为 
白色 ， 那 么 将 会 以 mput 中 的 设置 为 准 。 

(5) 如 有 果 发 生 以 下 情况 ， 都 将 造成 输入 框 无 法 显示 文字 : 

e 超 出 最 大 字符 数 限 定 了 ; 

e 输 入 的 字符 不 符合 要 求 的 验证 类 型 

e 关 联 的 Label 所 选用 的 字体 中 没有 这 个 文字 ; 

e 关 联 的 Label 中 设 定 了 文字 大 小 超出 范围 则 不 显示 ; 

e 将 文字 设 为 全 透明 了 。 

(6) 输入 的 文字 可 以 从 Input 中 的 value 变 量 读 取 ， 也 可 以 从 关联 的 
Label 中 的 text 变 量 读 取 。 

(7) 请 将 相关 联 的 Label 设 为 输入 框 的 子 物体 ， 这 样 就 可 以 保证 输 
入 的 文字 和 发 框 保持 相对 位 置 不 变 。 


3.8 深 动 视 ScrollView 
3.8.1 怎样 判断 是 否 应 当 使 用 滚动 视图 


所 请 的 滚动 视图 ， 是 指 一 个 可 以 滑动 的 视窗 ， 视 窗 大 小 和 位 置 固 
定 不 变 ， 视 窗 内 的 内 容 用 户 可 以 通过 手指 消 动 或 者 抑 动 深 动 条 来 进行 
滚动 浏 斋 。 比 如 说 浏览 融 浏 贤 网 页 时 ， 我 们 可 以 通过 拖 动 右 侧 的 滚动 
条 来 滚动 浏 宽 网 页 内 容 。 

深 动 视图 的 目的 是 为 了 解决 同类 内 容 过 多 ， 一 个 UI 版 面 显 示 不 下 
的 情况 。 如 果 同 类 内 容 过 多 ， 我 们 一 般 可 以 采取 设置 多 个 页 面 ， 然 后 
通过 翻 页 浏 贤 的 方式 来 浏览 ， 但 是 很 明显 ， 深 动 视图 会 比 翻 页 更 方 
便 ， 因 为 在 移动 设备 上 可 以 很 方便 地 划 屏 进行 滚动 ， 在 PC 上 可 以 通过 
鼠标 的 滚轮 进行 滚动 。 

当 我 们 需要 判断 是 否 应 该 使 用 滚动 视图 制作 UI 时 ， 可 以 遵循 以 下 
规律 : 


(1) 有 很 多 同类 内 容 一 个 版 面 显示 不 完 ， 却 必须 要 让 用 户 很 方便 
地 进行 浏览 ; 
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2) 它 的 核心 目的 是 方便 浏览 。 


3.8.2 创建 滚动 视图 


滚动 视图 的 创建 方式 有 两 种 : 通过 荣 单 直接 创建 ， 或 自己 拼装 。 
它们 的 基本 原理 都 一 样 ， 都 是 为 了 旋 齐 儿 个 核心 组 件 。 

我 们 来 了 解 一 下 最 简单 的 创建 方式 。 

(1) 选择 要 创建 滚动 视图 的 UI 节 点 ，ScrollView 将 会 在 这 个 UI 
点 物体 下 作为 子 物体 进行 创建 。 

(2) 单 击 Unity 顶 部 NGUI 琛 单 ， 选 择 Creat、 选 择 ScrollView， 这 
样 将 会 自动 创建 一 个 ScrollView 的 子 物 体 在 选中 的 UIP 点 下 。 


(3) 到 此 ， 我 们 已 经 创建 完成 ， 我 们 可 以 将 它 的 名 字 改 为 我 们 需 
要 的 和 名字 方便 自理 ” 


目前 为 止 只 是 创建 的 一 个 最 基本 的 滚动 视图 视窗 ， 现 在 还 无 法 进 
行 拖 动 看 效果 ， 因 为 滚动 视图 是 一 个 相对 复杂 的 UI 控 件 组 合 ， 所 以 ， 
将 会 分 儿 个 章节 慢 慢 讲解 它 是 如 何 工作 起 来 的 。 

我 们 创建 完 的 一 个 滚动 视图 的 最 基础 的 视窗 如 图 3.33 所 示 ， 图 3.33 
中 选中 的 那个 红 框 就 是 深 动 视图 的 视窗 。 


和 图 3.33 
3.8.3 滚动 心 组 件 UIPanel 


我 们 创建 完 滚动 视图 之 后 ， 发 现 它 身 上 自动 附带 了 3 个 组 件 : 
UIPanel、UIScrollView、Rigidbody。 其 中 Rigidbody 这 是 NGUI 为 了 优化 
UI 被 移动 等 的 性 能 开销 而 自动 附加 的 ， 我 们 可 以 不 用 管 它 。 而 另外 两 
个 组 件 UIPanel 和 UIScrollView 则 是 核心 组 件 ， 它 俩 构成 深 动 视图 的 基本 
窗口 。 

首先 我 们 来 了 解 一 下 UIPanel 在 滚动 视图 中 的 核心 作用 ， 它 的 组 件 
截图 如 图 3.34 所 示 。 
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A 图 3.34 
至 于 UIPanel 这 个 组 件 的 作用 ， 我 们 在 第 2 章 讲解 NGUI 的 几 大 基础 
核心 组 件 时 已 经 介绍 过 了 ， 这 里 就 不 多 芍 述 了 。 我 们 从 图 3.34 中 可 以 看 
到 ， 我 们 创建 的 ScrollView 身 上 的 UIPanel 组 件 有 很 多 地 方 都 自动 设 定好 
了 ， 我 们 来 一 起 了 解 一 下 它 的 工作 原理 。 
(1) 在 ScrollView 被 生成 时 ， 为 了 让 它 能 够 在 上 层 显 示 ， 所 以 它 
自动 给 Panel 设 定 了 一 个 深度 ， 这 个 深度 大 小 是 当前 情况 下 刚好 可 以 显 
示 在 最 上 层 的 深度 ， 也 就 是 当前 UIRoot 的 UI 树 中 深度 最 大 的 Panel 的 
深度 +1。 
(2) 我 们 可 以 看 到 它 的 Clipping 被 自动 设 为 了 SoftClip。 之 前 我 们 
讲 过 这 是 UIPanel 的 面板 榴 辑 ， 也 就 古 说 UIPanel 可 以 让 目 己 的 面板 上 只 
剪辑 一 块 区 域 出 来 进行 显示 。 这 样 在 议 辑 区 域 之 外 的 UI 元 件 就 将 看 不 
见 了 。 
Clipping 一 共 提 供 了 3 种 模式 。 


1. None 

无 剪辑 模式 ， 这 种 模式 下 ， 滚 动 视窗 中 的 物体 可 以 被 拖 动 ， 但 是 
视窗 因为 没有 剪辑 ， 所 以 是 没有 边界 的 ! 这 将 可 能 导致 内 容 被 拖 出 屏 
幕 外 再 也 拖 不 回来 。 惑 像 我 们 往 下 拖 动 浏览 网 页 时 会 拖 到 一 个 所 谓 的 
“/ 奈 ”"，none 模 式 就 是 没有 这 个 “ 奈 ”"， 你 可 以 将 内 容 全 部 拖 出 屏幕 以 外 。 

2. SoftClip 

柔和 可 辑 模式 ， 我 们 一 般 都 会 使 用 这 种 模式 来 制作 ScrollView 。 

在 这 种 模式 下 ，Panel 将 会 术 辑 一 块 可 视 区 域 出 来 显示 ， 这 个 补 竖 
辑 出 来 的 区 域 以 外 的 部 分 将 会 被 剪辑 掉 而 无 法 显示 出 来 。 

在 柔和 可 辑 模 式 下 ， 我 们 可 以 看 到 以 下 几 个 设置 项 。 

eOffset 

视窗 的 俩 移 ， 以 像素 为 单位 ， 设 置 这 个 参数 将 会 导致 视窗 以 Panel 
的 中 心 点 为 基准 进行 偏 移 。 


eCenter 
调整 视窗 的 中 心 点， 效果 和 Offset 一 样 。 
eSize 


视窗 的 大 小 ， 一 般 情 况 下 ， 我 们 都 需要 调整 视窗 的 剪辑 窗口 的 大 
小 ， 以 此 来 匹配 背景 底板 的 大 小 。 如 有 果 视 窗 Size 比 底板 大 ， 将 会 导致 
视窗 内 容 会 滑动 出 底板 的 边框 ， 如 果 比 底板 小 ， 则 会 导致 视窗 内 容 齐 
动 还 没有 到 底板 边 毕 就 已 经 被 前 辑 掉 消失 了 。 

eSoftness 

剪辑 边缘 的 柔和 程度 ， 视 窗 中 ， 内 容 被 拖 动 到 边缘 部 分 时 ， 会 有 
一 个 渐 隐 的 效果 。 如 果 这 个 Softness 的 值 设 为 0， 则 内 容 被 拖 动 到 边缘 
时 ， 会 像 被 刀 切 掉 一 样 被 航 辑 掉 。 

如 图 3.35 中 红 框 所 示 部 分 则 为 Softness 的 X 为 50 的 剪辑 边缘 ， 我 们 可 
以 看 到 X 方 回 的 左右 两 边 剪 辑 的 边 绿 变 得 更 柔和 了 。 


A 图 3.35 


3. Constrain but don't Clip 

这 种 模式 下 是 指 视窗 会 尽量 地 包含 所 有 内 容 但 是 不 剪辑 它们 ， 效 
果 大 约 等 同 于 有 边界 但 是 边界 为 全 屏 ， 无 法 完全 将 内 容 拖 到 屏幕 外 面 
去 ， 只 要 在 屏幕 范围 内 ， 都 能 看 到 内 容 ， 内 容 并 不 会 被 剪辑 掉 。 

图 3.36 则 是 一 颗 巨 大 的 桃 树 图 片 放 在 了 一 个 ScrollView 中 ， 被 
UIPanel 驶 辑 了 的 景象 。 通 过 这 个 图 我 们 可 以 进一步 加 深 了 解 UIPanel 在 
深 动 视图 中 的 作用 。 
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”人 ) 区 
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粉红 色 的 框 为 滚动 视图 小 -UIPanel 胃 
辐 出 来 航 可 视窗 口 范 周 '; 于 是 我 们 只 能 
堵 见 桃 树 的 一 部 分 


和 图 3.36 


3.8.4 滚动 视图 核心 组 件 UIScrollView 


刚才 我 们 了 解 了 UIPanel 是 深 动 视图 中 控制 视窗 大 小 的 核心 组 件 ， 
而 UIScrollView 则 是 滚动 视图 中 控制 滚动 功能 的 核心 组 件 。 没 有 
UIScrollView 组 件 的 视窗 是 无 法 进行 滚动 的 。 

我 们 先 来 了 解 一 下 UIScrollView 的 组 件 ， 组 件 界面 如 图 3.37 所 示 。 


园 VUIScroll View (Script) 
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1. ContentOrigin 
这 是 滚动 视图 所 包含 的 内 容 的 起 点 ， 默 认 设置 为 左上 角 。 
2. Movement 


深 动 视图 的 深 动 方向 ， 也 束 是 内 容 的 移动 方 辐 。 一 共 提 供 了 4 种 方 


式 o 

eHorizontal 

水 平方 同 拖 动 ， 也 就 是 左右 。 
® Vertical 

竖 直 方 同 拖 动 ， 也 就 是 上 下 。 
eUnrestricted 

目 由 拖 动 

eCustom 


目 定 义 方 向 ， 会 弹出 新 的 X 和 YY 设置 框 ， 可 以 通过 对 XX、Y 的 设置 
来 定义 一 个 特殊 的 方 同 。 

3. Drag Effect 

拖 动 效果 。 里 面 提供 了 3 种 效果 。 


eNone 

无 效果 ， 拖 到 哪 算 哪 。 手 指 停 下 或 者 离开 屏幕 的 一 瞬间 视图 内 容 
也 停 下 了 。 

eMomentum 


带动 能 的 拖 动 ， 也 就 是 有 一 个 惯性 ， 当 我 们 手指 松 开 时 ， 视 窗 内 
容 还 会 继续 朝 之 前 的 方向 清 动 一 会 儿 ， 中 途 如 果 遇 到 边界 才 会 立即 停 
下 ， 和 否则 会 等 惯性 没 了 才 会 自动 停 下 。 这 种 效果 主要 目的 是 让 用 户 用 
最 少 的 操作 来 滑动 视图 内 容 。 

eMomentumAndSpring 

动能 和 弹性 兼备 的 一 种 方式 ， 这 种 方式 和 上 一 种 动能 方式 很 相 
似 ， 区 别 在 于 ， 在 这 种 方式 下 ， 当 滑动 内 容 拖 到 了 视窗 边界 时 ， 它 可 


以 被 继续 拖 动 “越界 ”， 在 松 开 手指 时 立即 像 弹 移 一 样 弹 回 并 回 到 正常 
视窗 范围 内 。 

4. Scroll Wheel Factor 

滚轮 因素 的 设 定 ， 这 个 值 越 大 鼠标 次 轮 的 滚动 融会 越 灵 敏 。 

5. Momentum Amount 

动能 因素 的 设 定 ， 这 个 值 越 大 ， 滑 动 时 的 惯性 惑 越 大 〈 前 提 有 是 
Drag Effect 有 动能 效果 ) 。 

6. Restrict Within Panel 

选中 后 拖 动 将 会 被 限制 在 Panel 内 ， 这 个 是 默认 色 选 的 。 如 有 果 不 勾 
选 这 个 选项 ， 则 将 会 导致 内 容 被 拖 到 视窗 的 剪辑 部 分 以 外 再 也 无 法 回 
来 。 


7. Cancel Drag If Fits 

当 它 刚好 适合 视窗 内 时 ， 则 自动 退出 拖 动 。 

8. Smooth Drag Start 

在 开始 的 时 候 拖 动 平 消 ， 义 迁 上 后 ， 我 们 拖 动 时 内 容 会 有 一 个 速 
度 从 0 变 到 我 们 拖 动 的 那个 速度 的 一 种 平滑 自然 的 效果 。 如 果 不 勾 选 ， 
在 我 们 开始 滑动 时 ， 内 容 会 瞬间 与 手指 的 速度 一 样 ， 束 像 条 在 手指 上 
了 一 样 ， 体 验 比 较 差劲 。 

9. IOS Drag Emulation 

模拟 iOS 系 统 的 拖 动 效果 。 这 也 是 一 种 为 了 增强 拖 动 体验 的 选项 。 

10. ScrollBars 

为 深 动 视窗 指定 拖 动 条 ， 拖 动 条 我 们 将 会 在 下 文 介绍 。 这 个 设置 
是 个 非 必 选项 ， 可 以 设置 也 可 以 不 设置 ， 不 设置 的 话 深 动 视窗 一 样 能 
正常 工作 ， 因 为 在 移动 设备 上 ， 我 们 可 以 用 手指 滑动 ， 在 PC 上 我 们 可 
以 通过 按 住 鼠 标 键 不 放 来 拖 动 ， 而 拖 动 条 ， 可 以 理解 为 我 们 拖 动 的 进 
度 条 ， 束 像 我 们 浏览 网 页 时 最 右边 的 那 根 竖 直 的 进度 条 一 样 。 

拖 动 条 一 共 可 以 指定 两 个 ， 一 个 水 平 的 、 一 个 竖 直 的 。 


我 们 可 以 在 Show Condition 中 设 定 拖 动 条 出 现 的 规则 ， 有 以 下 3 种 
规则 可 选 。 

® Always 

不 管 什么 情况 ， 滑 动 条 总 十 出 现 。 

egOnlyIfNeed 

只 有 当 需 要 的 时 候 出 现 。 那 么 什么 时 候 是 需要 的 时 候 呢 ? 当 我 们 
的 内 容 在 深 动 视窗 内 显示 不 完 的 时 候 ， 就 会 出 现 ， 如 果 我 们 在 视窗 内 
不 需要 拖 动 束 可 以 看 到 全 部 内 容 ， 则 不 需要 出 现 。 

eWhenDragging 

当 拖 动 时 出 现 。 只 要 拖 动 内 容 ， 它 驶 一 定 会 出 现 。 


3.8.5 创建 一 个 拖 动 条 


拖 动 条 有 多 种 创建 方式 ， 拖 动 条 非常 像 一 个 进度 条 ， 鉴 于 拖 动 条 
的 不 同 需求 ， 它 有 非常 多 的 创建 方式 ， 我 们 来 简单 介绍 几 种 。 拖 动 条 
般 只 有 水 平方 向 的 拖 动 条 和 竖 直 方向 的 拖 动 条 两 种 形态 ， 图 3.38 展 示 
了 一 个 拖 动 条 的 样子 ， 这 是 一 个 水 平方 同 的 拖 动 条 。 


| 


A 图 3.38 
1. 通过 WidgetWizard (Legacy) 创建 
在 Unity 顶 部 NGUI 荣 单 ， 选 择 Open 选 项 ， 打 开 WidgetWizard 
(Legacy) ， 会 弹出 3.39 的 界面 。 


mm 
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Template Scroll Bal Select a widget template to use 


Background IHiohlighe = Thin sprite used for the backgroun: 


sprite used for the foreground (thum 
v 


arent In the Hierarchy View 


A 图 3.39 

这 个 界面 我 们 在 之 前 也 讲 过 其 用 法 ， 它 是 旧版 本 的 NGUI 的 控件 创 
建 系统 。 在 这 个 界面 中 ， 我 们 设 定 好 图 集 和 字体 (如 无 需要 可 以 不 设 
定 ) 后 ， 在 Template 中 选择 ScrollBar， 然 后 在 Background 中 设 定 它 的 
底板 的 Sprite， 在 Foreground 中 设 定 拖 动 块 的 Sprite， 在 Direction 中 设 定 
它 的 请 动 方向 。 然 后 单 击 Add To 就 可 以 在 相应 的 UI 节点 下 创建 出 一 个 
拖 动 块 。 

通过 这 种 方式 创建 的 滚动 条 我 们 需要 调整 它 的 Background 和 
Foreground 到 我 们 需要 的 样子 。 

2. 通过 PrefabToolBar 创 建 

我 们 依然 在 Unity 顶 部 NGUI 荣 单 中 选择 Open， 打 开 Prefab Tool 
Bar， 弹 出 NGUI 的 预 设 界面 ， 从 中 将 “Simple Horizontal” (水 平方 同 的 
拖 动 条 ) 或 者 “Simple Vertical”《 坚 直方 各 的 拖 动 条 ) 拖 动 到 场景 中 我 
们 需要 的 UI 节点 下 ， 即 可 完成 创建 。 

通过 这 种 方式 创建 的 滚动 条 因为 是 预 设 体 ， 所 以 需要 调整 它 的 大 
小 和 颜色 。 

3. 目 己 组 效 一 个 拖 动 条 


拖 动 条 在 旧版 本 中 是 用 ScrollBar 组 件 来 实现 的 ， 但 是 ， 在 新 版 本 的 
NGUI 中 ， 可 以 利用 制作 进度 条 的 原理 来 方便 地 制作 它 。 为 了 了 解 它 的 
组 件 原 理 ， 我 们 还 是 需要 学 习 一 下 怎样 目 我 组 装 一 个 拖 动 条 出 来 。 

我 们 观察 拖 动 条 具有 以 下 特点 : 

(1) 有 一 个 确 板 槽 来 显示 可 以 拖 动 的 范围 ; 

(2) 有 一 个 滑动 块 ， 可 以 在 范围 内 滑动 。 

通过 对 比 我 们 可 以 发 现 拖 动 条 和 进度 条 的 区 别 : 拖 动 条 就 是 一 个 
缺少 表层 进度 条 的 可 拖 动 进度 条 ! 

所 以 ， 我 们 通过 3.6 节 讲 的 方法 ， 创 建 一 个 可 以 拖 动 的 进度 条 即 
可 ， 在 制作 这 个 进度 条 时 ， 我 们 需要 设置 Thumb， 但 是 却 摊 Foreground 
的 设置 ， 一 个 拖 动 条 殉 制 作 完成 了 。 


3.8.6 拖 动 条 说 明 


通过 不 同 的 方式 创建 的 滑动 条 有 着 不 同 的 结构 和 不 同 的 组 件 ， 可 
能 会 让 我 们 迷 收 ， 比 如 说 我 们 通过 WidgetWizard (Legacy) 创建 的 滑 
动 条 和 通过 PrefabToolBar 创建 的 滑动 条 功能 都 一 样 ， 但 是 结构 完全 不 
一 样 、 组 件 也 完全 不 一 样 。 前 者 依赖 于 ScrollBar 进行 工作 ， 后 者 依赖 
于 制作 进度 条 使 用 的 核心 组 件 UISlider 进 行 工 作 。 在 这 里 我 们 通过 如 下 
说 明 来 理 清 概 念 ， 避 免 混 消 。 

(1) ScrollBar 和 UISlider 我 们 观察 组 件 界面 可 以 发 现 ， 它 们 非常 相 
似 。 它 俩 创建 的 滑动 条 从 本 质 上 说 工作 原理 是 一 模 一 样 的 ， 没 有 任何 
分 别 ， 所 以 不 用 去 担心 哪 一 种 更 正规 哪 一 种 更 好 ， 因 为 它们 都 一 样 。 

(2) ScrollBar 是 旧版 本 的 NGUI 用 来 制作 滑动 条 的 ， 在 新 版 本 的 
NGUI 中 ， 随 独 UISlider 的 强大 起 来 ， 我 们 可 以 更 方便 地 使 用 UISlider 制 
作 滑 动 条 了 ， 所 以 推荐 使 用 UISlider， 也 就 是 制作 进度 条 的 方式 来 制作 
滑动 条 。 


(3) 我 们 依然 推荐 使 用 自己 手动 制作 的 方式 去 制作 拖 动 条 ， 而 不 
是 使 用 旧 的 控件 创建 系统 (WidgetWizard) 和 PrefabToolBar。 即 使 
PrefabToolBar 是 新 版 NGUI 的 功能 ， 因 为 我 们 每 个 人 的 项 目 中 的 UI 体系 
设计 都 不 一 样 ， 所 以 熟悉 NGUI 的 控件 原理 后 ， 推 荐 自己 去 拼装 控件 。 
(4) 切记 ， 滑 动 条 就 是 一 个 没有 Foreground 的 UISlider 。 


3.8.7 让 视图 内 的 内 容 可 以 被 拖 动 


我 们 从 上 文中 已 经 学 会 了 制作 ScrollView 和 消 动 条 等 知识 ， 但 是 到 
目前 为 止 ， 我 们 的 滑动 视图 依然 没有 看 到 效果 ， 因 为 现在 为 止 还 不 知 
道 怎 样 去 拖 动 内 容 。 如 果 只 是 填充 一 些 内 容 进去 ， 我 们 会 发 现 ， 即 使 
有 ScrollView 也 无 法 滑动 里 面 的 内 容 。 这 是 因为 需要 对 ScrollView 所 包 
含 的 内 容 进 行 一 些 配 对 设置 ， 以 使 它 能 够 在 ScrollView 内 被 滚动 起 来 。 

如 图 3.40 所 示 ， 我 们 创建 了 一 个 ScrollView， 在 其 下 面 创建 了 一 个 
Texture 子 物体 。 子 物体 的 Texture 我 们 设置 了 一 张 巨 大 的 桃 树 图 片 。 从 
图 3.40 中 可 以 看 到 ， 桃 树 在 滚动 视图 的 范围 内 只 能 显示 一 小 部 分 。 

下 面 我 们 要 让 桃 树 可 以 被 滑动 以 进行 浏览 ， 这 就 是 滚动 视图 的 意 
义 有 所 在 * 

我 们 选中 桃 树 的 Texture 物 体 ， 首 先 为 其 Attach (Unity 顶 部 NGUI 荣 
单 选 择 Attach) 一 个 BoxCollider， 因 为 ， 既 然 我 们 需要 拖 动 这 个 桃 树 的 
图 片 来 查看 ， 束 必须 让 桃 树 能 接收 到 我 们 拖 动 的 事件 ， 所 以 一 定 得 有 
一 个 BoxCollider 。 

然后 为 桃 树 的 Texture 物 体 附 加 一 个 核心 组 件 : Drag ScrollView， 附 
加 方式 可 以 在 Inspector 面 板 中 单 击 
AddCompent~ NGUI- Interaction ~ Drag ScrollView。 添 加 好 组 件 之 后 
无 需 进 行 任何 设置 ， 运 行 游 戏 时 它 会 自动 地 去 读 取 父 物体 中 的 


ScrollView ° 


然后 运行 游戏 ， 拖 动 视窗 内 的 桃 树 图 片 ， 发 现 已 经 可 以 通过 拖 动 
桃 树 图 片 来 进行 浏览 了 。 可 以 拖 动 的 方 同 是 ScrollView 中 Movement 移 项 
中 设置 的 方 同 。 


roll Vi 
Texture 


滚动 视图 是 一 种 比较 复杂 的 控件 类 型 ， 它 需要 多 种 控件 配合 使 

用 ， 我 们 在 使 用 时 如 有 果 忘 掉 了 一 些 制作 的 细节 ， 则 会 导致 BUG 出 现 。 
所 以 ， 我 们 在 制作 滚动 视图 时 ， 一 定 要 深刻 的 理解 它 的 工作 原理 ， 除 
此 之 外 ， 还 要 牢记 以 下 一 些 注意 事项 ; 

(1) 通常 情况 下 ， 滚 动 视图 一 定 要 有 一 个 UIPanel 来 进行 窗口 剪 
辑 。 这 个 UIPane] 组 件 在 创建 ScrollView 时 会 自动 生成 。 

(2) 拖 动 条 对 于 滚动 视图 来 说 可 有 可 无 ， 没 有 它 滚动 视图 也 能 通 
过 移动 设备 的 触 屏 和 PC 设备 的 姐 标 光标 来 进行 滚动 。 

(3) 深 动 视图 内 包含 的 内 容 ， 一 定 要 有 一 个 BoxCollider， 否 则 无 
法 接收 事件 。 


(4) 滚动 视图 内 包含 的 内 容 ， 一 定 要 有 一 个 DragScrollView 组 
件 ， 这 个 组 件 会 和 ScrollView 相 互 作用 ， 在 运行 时 ， 它 会 自动 去 找到 父 
物体 中 的 ScrollView， 然 后 和 它 相 互 作用 ， 让 视图 内 的 内 容 可 以 被 滚动 
起 来 。 

(5) 滚动 视图 的 内 容 ， 最 好 放 到 创建 的 ScrollView 节 点 下 面 作为 
子 物 体 存 在 ， 这 样 可 以 免 去 大 量 的 烦恼 和 隐患 。 

(6) 滚动 视图 的 深 动 方向 不 要 弄 错 了 。 

(7) 滚动 视图 的 剪辑 窗口 的 尺寸 一 定 要 调整 到 位 ， 尽 量 别 去 调整 
Clip 的 Center。 


3.9 制作 复 选 框 〈Toggle) __ 
3.9.1 怎样 判断 是 否 应 当 使 用 复 选 框 


复 选 框 ， 就 古 对 一 个 选项 做 上 一 个 标记 ， 表 示 这 个 选项 已 经 被 克 
中 了 。 例 如 ， 我 们 在 餐厅 点 菜 时 ， 经 常会 有 服务 员 弟 给 我 们 一 个 菜 
单 ， 每 一 项 菜品 后 面 都 有 一 个 方 框 ， 需 要 点 什么 菜 束 在 后 面 的 方 框 内 
划 上 一 个 勾 表 示 这 个 菜品 选中 了 。 在 游戏 中 ， 复 选 框 一 般 用 来 做 一 些 
选项 的 控制 ， 这 种 选项 一 般 部 只 有 两 种 答案 是 和 否 。 例 如 ， 单 击 一 
下 开局 音乐 的 复 选 枉 ， 这 个 复 选 枉 上 束 打 了 一 个 勺 ， 然 后 音乐 在 游戏 
中 就 会 开局， 如 果 再 单 击 一 下 ， 则 这 个 勾 会 取消 掉 ， 然 后 首 乐 将 会 在 
游戏 中 关闭 。 这 束 是 复 克 框 最 第 见 的 用 法 。 

当 我 们 要 判断 是否 要 使 用 复 选 框 时 ， 可 以 锭 循 以 下 规律 。 

(1) 该 功能 只 有 两 种 选择 状态 : 是 、 否 。 

(2) 该 功能 同一 时 间 只 能 激活 且 必 须 激活 一 种 选择 状态 。 


(3) 该 功能 的 两 种 状态 为 互 不 关系 ， 如 果 选 择 了 一 种 状态 ， 则 自 
动 天 闭 另 一 种 状态 。 

人 简单 地 说 ， 复 克 框 其 实 就 是 一 个 开关 ， 我 们 可 以 通过 单 击 它 
换 打 开 和 关闭 。 一 般 开关 的 应 用 包括 了 选项 勾 选 和 页 签 。 页 签 是 
框 功能 的 一 个 高 级 应 用 ， 我 们 后 文 会 讲 。 

根据 以 上 的 规律 可 以 发 现 ， 游 戏 中 很 多 地 方 都 运用 了 复 选 框 。 例 
如 ， 系 统 设 鞋 中 ， 通 过 复 选 框 功能 来 设 定 是 否 播 放 至 景 首 乐 。 在 角色 
界面 中 ， 通 过 复 选 框 来 确定 是 人 否 显 示 时 狐 ， 打 钓 则 为 显示 时 流 ， 取 消 
打 钩 则 为 不 显示 时 姜 。 


3.9.2 创建 复 选 框 


创建 复 选 框 的 方法 有 很 多 ， 我 们 这 里 介绍 两 种 方法 : 自己 通过 组 
件 来 拼装 复 选 框 控件 和 使 用 预 设 直 接 创建 。 

1. 使 用 预 设 直 接 创建 

NGUI 提 供 的 预 设 中 有 复 选 框 这 个 控件 ， 可 以 从 Unity 顶 部 NGUI 采 
单 中 选择 Open， 然 后 打开 Prefabs ToolBar， 在 界面 中 选中 Colored 
CheckBox 或 者 Simple CheckBox 拖 动 到 我 们 希望 创建 的 UIP 点 下 即 可 。 

2. 目 己 拼装 复 选 框 控 件 

(1) 首先 选中 我 们 希望 创建 复 选 框 的 UI 六 点 ， 通 过 Unity 顶 首 
NGUI 荣 单 Creat 中 选择 创建 一 个 Sprite， 然 后 设置 它 的 图 片 ， 让 这 个 
Sprite 作 为 复 选 框 的 底 框 。 

(2) 因为 需要 这 个 复 选 框 来 接收 单 击 事件 ， 所 以 为 这 个 底 框 
Sprite 制 作 一 个 BoxCollider， 方 法 可 以 使 用 Unity 顶 部 NGUI 深 单 中 Attach 
一 个 BoxCollider 。 

(3) 下 面 需 要 为 这 个 复 选 框 创建 一 个 复 选 框 的 核心 组 件 : 
UIToggle， 选 中 底 杠 后， 通过 选择 


AddCompent~NGUI-~ Interaction ~ UIToggle 为 这 个 复 选 框 的 底 框 附 加 
一 个 UIToggle 组 件 。 

(4) 我 们 在 这 个 底 框 的 Sprite 下 面 创建 一 个 新 的 、 表 示 选 中 状态 
的 Sprite， 比 如 一 个 勾 。 

(5) 我 们 将 这 个 表示 选中 状态 的 Sprite 拖 动 到 底 框 UIToggle 组 件 中 
StateTransition 模 块 下 的 Sprite 选 项 中 ， 然 后 将 瓜 框 的 UIToggle 组 件 中 的 
StartingState 义 上 。 

到 此 为 止 , 复 选 框 就 算 创 建 完成 了 ， 运 行 一 下 可 以 发 现 默认 情况 
下 ， 写 是 打 移 选中 状态 ， 单 击 一 下 则 勾 消 失 ， 只 琵 一 个 展 框 ， 再 单 击 
一 下 又 打上 了 邹 ， 选 中 了 。 如 图 3.41 所 示 ， 左 边 表示 选中 状态 ， 右 边 
表示 未 选中 状态 。 

一 般 情 况 下 ， 我 们 都 会 在 复 选 框 的 旁边 写 上 一 些 文字 ， 表 示 这 个 
复 选 框 代 表 的 什么 选项 。 有 具体 做 法 也 是 在 底 框 物体 下 面 创建 一 个 Label 
作为 子 物体 ， 然 后 调整 位 置 即 可 。 


A 图 3.41 


3.9.3 复 选 框 的 核心 组 件 UITToggle 


在 制作 复 选 框 时 ， 已 经 发 现 它 的 核心 组 件 除了 接收 事件 的 
BoxCollider 以 外 ， 就 是 一 个 我 们 新 认识 的 UIToggle 组 件 。 这 个 组 件 的 
主要 作用 是 一 个 开关 ， 通 过 它 在 打开 和 关闭 之 间 进 行 切换 。 

UIToggle 组 件 的 设置 如 图 3.42 所 示 ， 我 们 移 来 了 解 一 下 它 的 设置 。 

1. Group 


开关 组 的 设置 。 默 认为 0， 表 示 没 有 开关 组 。 


A 图 3.42 

当 有 多 个 Toggle 肘 Group 相 等 昌都 不 为 0 的 时 候 ， 表 示 它 们 在 同一 个 
开关 组 当中 ， 同 一 个 开关 组 内 的 开关 只 人 允许 打开 一 个 。 例 如 ， 我 们 有 
开关 A、B、C， 它 们 的 的 Group 都 为 1， 当 打开 A 的 时 候 ，B 和 C 会 目 
动 关闭 ; 同 理 ， 当 打开 B 的 时 候 ，A 和 C 会 关闭 。 

当 一 个 Toggle 不 属于 某 一 个 开关 组 ， 既 Group 为 0 时 ， 它 就 属于 一 个 
独立 开关 ， 可 以 通过 上 自身 来 进行 开关 ， 当 它 属于 某 一 个 开关 组 时 ， 怠 
无 法 通过 单 击 目 身 来 进行 开局 和 关闭 了 ， 因 为 一 个 开关 组 内 必须 要 有 
一 个 开关 是 处 于 开局 状态 ， 它 必须 通过 开关 组 内 部 的 多 个 Toggle 之 间 
的 切换 来 进行 关闭 和 开局， 例如， 刚才 举 的 A、B、C3 个 开关 的 例子 ， 
如 果 A 是 打开 的 ， 我 们 希望 关闭 A， 则 我 们 需要 打开 B 或 者 C 才 能 使 A 天 
闭 ， 因 为 A 已 经 不 是 一 个 独立 开关 ， 而 是 ABC 开关 组 的 一 部 分 。 

开关 组 的 使 用 原理 和 一 个 非常 利用 的 UI 控 件 功能 很 像 : 页 签 。 页 
签 也 有 着 类 似 的 功能 需求 ， 有 很 多 个 页 签 ， 我 们 同一 时 间 内 只 能 查看 
一 个 页 签 ， 如 果 选 择 了 一 个 页 签 ， 则 之 前 打开 的 页 签 自动 关闭 。 

页 签 是 Toggle 的 一 个 高 级 应 用 ， 我 们 这 里 暂时 只 讲 复 选 框 的 制作 。 

2. Starting State 

是否 初始 状态 ， 如 有 宁 选 中 ， 则 为 初始 状态 ， 不 选中 则 不 是 。 


这 个 设置 项 的 意义 在 于 : 当 开 关 是 一 个 独立 开关 (Group 为 0) 
时 ， 勾 选 Starting State 意 味 着 在 初始 状态 下 ， 开 关 属 于 开启 状态 。 当 开 
关 属 于 一 个 开关 组 时 ， 色 选 Starting State 则 意味 着 在 初始 状态 下 ， 这 个 
开关 组 中 初始 处 于 打开 状态 的 为 这 一 个 开关 。 

当 一 个 开关 组 中 有 一 个 以 上 的 开关 都 勾 选 了 Starting State 时 ， 则 以 
这 个 组 中 排 在 最 后 的 一 个 勺 选 了 Starting State 的 Toggle 为 默认 开启 的 开 
天 o 

3.， State Transition 模 块 

这 个 模块 是 为 了 设置 义 选 的 时 候 的 一 些 天 联 UI 表 现 。 

eSprite 是 设置 选中 状态 下 要 显示 出 来 的 Sprite， 也 就 是 之 前 创建 复 
选 框 时 创建 的 那个 用 来 表示 选中 的 打 勾 的 Sprite。 设 置 的 方法 为 ， 将 表 
示 选 中 的 Sprite 拖 动 到 这 个 选项 中 即 可 。 

eAnimation 是 设置 状态 切换 时 的 动画 ， 例 如 ， 需 要 选中 时 会 有 一 
个 勺 从 确 框 中 蹦 出 来 弹 两 下 ， 那 么 瓯 可 以 制作 一 个 蹦 出 来 弹 两 下 的 动 
画 拖 动 到 这 个 选项 中 。 

eTransition 是 选择 开关 切换 时 的 一 个 平 请 效果 ， 里 面 提 供 了 两 种 
选项 进行 选择 : Smooth 和 Instant， 如 采 我 们 选择 Smooth， 则 在 进行 开 
关切 换 时 ， 表 示 选 中 的 那个 Sprite 的 消失 和 出 现 会 显得 更 加 平 请 一 些 ; 
如 采 选 择 Instant， 则 开关 切换 时 ， 表 示 选 中 的 那个 Sprite 的 消失 和 出 现 
会 瞬间 消失 和 了 瞬间 出 现 。 这 个 选项 默认 的 设置 为 Smooth， 一 般 情 况 下 
Smooth 的 用 户 体验 更 舒服 一 些 ， 所 以 ， 一 般 情 况 下 我 们 不 需要 去 调整 
它 。 

4. On Value Change 

这 里 是 设置 当 开 关 状 态 改变 时 触发 的 函数 ， 设 置 方法 和 其 他 控件 
一 样 ， 束 不 再 详细 描述 了 。 


3.10 制作 下 拉 菜 单 (PopupList) 
3.10.1 怎样 判断 是 否 应 当 使 用 下 拉 菜 单 


下 拉 菜 单 ， 吏 旦 将 一 系列 的 选项 隐藏 ， 通 过 单 击 茶 一 个 控件 将 会 
弹出 一 个 包含 这 些 选 项 的 列表 ， 在 其 中 选择 想 要 的 选项 。 这 样 做 不 但 
可 以 市 省 屏幕 空间 ， 也 可 以 让 用 户 在 进行 选择 时 更 加 方便 快捷 。 

下 拉 沫 单 本 质 上 还 是 一 个 单 选 框 ， 与 Toggle 的 功能 有 一 些 类 似 ， 
对 于 下 拉 沫 单 玩家 必须 选择 一 个 选项 《有 一 个 默认 的 初始 选项 ) ， 在 
同一 时 间 也 只 能 选择 一 个 选项 ( 单 选 性 质 ) 。 在 游戏 开发 过 程 中 ， 如 
果 碰 到 了 以 下 特点 的 需求 ， 就 可 以 考虑 使 用 下 拉 菜 单 了 。 

(1) 有 一 系列 选项 需要 玩家 做 出 选择 ， 这 些 选项 是 有 限 多 的 。 

(2) 这 些 选 项 玩家 必须 选择 一 个 ， 也 只 能 选择 一 个 。 

(3) 这 些 选 项 如 果 全 部 列 出 来 用 Toggle 制 作 单 选 功能 会 非常 占用 
屏幕 空间 。 

如 图 3.43 所 示 为 一 个 典型 的 下 拉 采 单 。 


3.10.2 创建 下 拉 菜 单 


我 们 可 以 有 多 种 方式 来 创建 下 拉 荣 单 ， 这 里 主要 学 习 两 种 方式 。 

1. 第 一 种 方法 : 使 用 NGUI 做 好 的 下 拉 有 菜单 预 设 体 

在 Unity 顶 部 NGUI 末 单 ， 依 次 选择 Open ~ Prefab ToolBar ， 打 开 了 
NGUI 内 置 的 预 设 工具 界面 ， 在 其 中 选择 Simple PopupList 拖 动 到 希望 创 
建 的 UI 节点 下 ， 就 算 创建 完成 了 。 但 是 ， 这 种 方法 含有 很 多 预定 义 的 
东西 ， 如 有 果 对 PopupList 的 原理 非常 熟练 ， 那 么 不 建议 使 用 这 种 方法 。 


A 图 3.43 

2. 第 二 种 方法 : 目 我 拼 淡 一 个 

首先 选中 希望 创建 下 拉 菜 单 的 UI 市 点 ， 在 Unity 顶部 菜单 ， 依 次 
选择 Creat 一 Sprite， 这 样 就 在 UI 方 点 下 创建 了 一 个 Sprite 子 物体 。 

然后 在 这 个 子 物 体 身 上 添加 一 个 PopupList 组 件 ， 添 加 方式 为 ， 在 
Inspector 面 板 中 依次 单 击 
AddComponent 一 NGUI- Interaction =» PopupList ° 

因为 下 拉 沫 单 需要 单 击 ， 所 以 ， 还 需要 为 它 添 加 一 个 BoxCollider 
组 件 ， 添 加 方法 为 选中 这 个 控件 ， 在 Unity 顶 部 NGUI 衣 单 ， 依 次 选择 
Attach =» BoxCollider ° 

这 样 就 算 创 建 完成 了 ， 组 件 截图 如 图 3.44 所 示 。 
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A 图 3.44 
可 以 在 图 3.44 中 红 框 所 示 部 分 输入 一 些 选项 ， 每 输入 完 一 个 选项 ， 
就 必须 回 车 换行 再 进行 输入 下 一 行 ， 因 为 NGUI 会 按 行 数 来 识别 选项 。 
我 们 在 图 3.44 中 输入 了 1、2、3、4 4 个 选项 ， 运 行 游戏 后 ， 单 击 这 个 
PopupList 物 体 ， 可 以 看 到 弹出 了 一 个 下 拉 菜 单 ， 如 图 3.45 所 示 。 


A 图 3.45 


3.10.3 显示 当前 选中 的 选项 


在 图 3.44 中 可 以 看 到 我 们 制作 的 下 拉 荣 单 并 没有 显示 当前 选中 的 选 
项 ， 如 有 果 需 要 显示 当前 选中 的 选项 ， 则 可 以 在 这 个 下 拉 沫 单 的 控件 下 
创建 一 个 Label 子 物体 ， 创 建 方法 为 选中 这 个 下 拉 菜 单 的 物体 ， 在 Unity 
顶部 NGUI 琛 单 ， 依 次 选择 Creat~Label。 

然后 需要 将 这 个 Label 和 下 拉 沫 单 关 联 起 来 ， 我 们 将 Label 拖 动 到 
下 拉 菜 单 PopupList 组 件 的 On Value Change 回调 中 ， 选 择 
SetCurrentSelection 方法 ， 这 样 当 PopupList 的 选项 被 改变 时 ， 当 前 被 选 
中 的 选项 会 实时 更 新 到 这 个 被 天 联 的 Label 上 显示 出 来 ， 如 图 3.46 中 红 
框 部 分 所 示 。 


A 图 3.46 


3.10.4 下 拉 菜 单 核心 组 件 PopupL ist 


制作 下 拉 沫 单 需要 一 个 Sprite 来 被 单 击 ， 需 要 一 个 BoxCollider 来 接 
收 单 击 事 件 ， 但 是 ， 最 核心 的 功能 几乎 全 部 依赖 于 一 个 核心 组 件 : 
PopupList。 这 个 组 件 的 界面 如 图 3.47 所 示 。 


A 图 3.47 


e@ Options 

这 里 是 下 拉 菜 单 的 各 个 选项 录入 的 地 方 ， 识 别 方式 为 按 行 识别 ， 
也 就 是 说 每 填 入 一 个 选项 后 ， 需 要 回 车 换行 才能 继续 录入 下 一 个 先 
项 。 


eDefault 

默认 情况 下 选中 的 选项 ， 这 个 选项 会 目 动 填 充 为 我 们 了 永 入 的 第 一 
个 选项 。 

@Position 

位 置 ， 这 里 给 了 3 个 选项 。 

Auto: 莱 单 将 会 目 动 决定 是 从 上 方 弹出 还 是 下 方 弹 出 。 


Above: 菜单 将 会 从 上 方 弹 出 。 
Blow: 有 菜单 将 会 从 下 方 弹 出 。 


eAlignment 
对 齐 方式 ， 这 里 和 Label 里 的 对 齐 方式 一 样 ， 就 不 多 约 述 了 。 
eOpen on 


打开 的 方式 ， 这 里 提供 了 以 下 的 方式 可 选择 。 

ClickOrTap: 单 击 出 现 末 单 。 

RightClick: 右键 单 击 出 现 末 单 。 

DoubleClick: 双击 出 现 菜 单 。 

Manual: 手动 出 现 ， 这 种 模式 下 任何 输入 都 不 会 出 现 ， 必 须 代码 
控制 它 出 现 。 

eLocalized 

这 里 是 指 菜单 中 的 文本 是 否 被 本 地 化 。 

所 谓 本 地 化 ， 可 以 理解 为 多 语言 翻译 ， 例 如 ， 我 们 的 游戏 是 英文 
的 ， 那 么 游戏 中 的 所 有 UI 文 本 都 将 会 被 转换 为 英文 版 本 。 那 么 这 个 
Localized 选 项 吕 是 决定 这 个 下 拉 沫 单 是 否 被 转换 的 。 

如 果 打 上 义 ， 则 表示 这 个 菜单 里 的 选项 也 会 被 本 地 化 转换 语言 。 
如 果 不 打 钓 ， 则 表示 这 些 选 项 里 的 文本 不 会 被 翻译 ， 永 远 会 保持 它 本 
来 的 样子 。 

为 什么 要 有 这 么 个 选项 昵 ? 比如 我 们 在 选择 语言 的 下 拉 沫 单 里 ， 
里 面 的 每 一 种 语言 选项 不 能 被 翻译 ， 因 为 玩家 要 依赖 里 面 它 认 识 的 选 
项 去 选择 目 己 要 的 语言 。 如 采 这 里 的 选项 被 翻译 成 同一 种 语言 了 ， 那 
么 就 没有 选择 语言 的 意义 了 。 

e Atlas 

图 集 设 定 ， 这 里 有 很 多 设置 项 。 

Atlas: 选择 图 集 。 


Background: 设 定 下 拉 采 蛙 的 背景 的 精灵 图 片 ， 还 可 以 设置 颜 
色 。 

Highlight: 设 定 下 拉 染 单 出 现 后 ， 鼠 标 光 标 移 到 选项 上 高 亮 显 示 时 
显示 的 图 片 ， 也 可 以 设 定 颜色 。 

e@Font 

设 定 琳 单 文本 的 字体 、 字 号 大 小 等 。 

eOn Value Change 

当 这 个 下 拉 琳 单 当前 选中 选项 变化 时 ， 触 发 的 事件 。 

可 能 我 们 会 有 疑问 ， 为 什么 这 个 下 拉 有 琳 蛙 会 单独 进行 是 否 本 地 化 
和 使 用 Font 字体 的 指定 呢 ? 这 十 因为 NGUI 考 虑 到 大 多 数 游戏 在 制作 上 
有 语言 版 本 时 ， 都 会 使 用 下 拉 荣 单 来 让 玩家 选择 它 所 认识 的 语言 ， 这 
种 情况 下 选项 不 能 被 翻译 ， 使 用 的 字体 也 可 能 很 特殊 要 亢 兰 很 多 种 语 
言 文字 ， 所 以 ，NGUI 十 一 个 非常 贴心 好 用 的 插件 。 


3.10.5 制作 下 拉 菜 单 的 注意 事项 


我 们 在 制作 下 拉 菜 单 时 ， 一 定 要 注意 以 下 事项 : 

(1) 一 定 要 有 接收 单 击 事件 的 BoxCollider; 

(2) 填写 选项 时 ， 一 定 要 注意 换行 ; 

(3) 如 采制 作 下 拉 菜 单 是 为 了 让 玩家 选择 语言 ， 则 要 更 加 注意 本 
地 化 的 设置 和 Font 的 设置 。 


4 章 UI 动 画 


4.1 常见 邓 UI 动画 介 乡 


4.1.1 要 区 分 UI 动画 和 UI 个 概念 


UI 动 画 的 目的 是 为 了 让 UI 能 够 动 起 来 ， 它 的 本 质 原理 是 通过 每 隅 
一 定时 间 去 改变 UI 的 某 个 参数 来 实现 动画 效果 。 例 如 ， 每 阳 0.5 秒 就 让 
UI 的 Transform 组 件 的 Position 的 X 轴 正 加 移动 1 个 单位 ， 持 续 5 秒 ， 那 么 
瓯 构成 了 一 个 5 秒 内 UI 瑚 X 轴 正 回 运动 的 动画 。 也 束 是 说 ， UI 动画 是 在 
改变 UI 的 组 件 参 数 ， 让 UI 实 实在 在 地 动 起 来 了 。 

而 UI 特 效 ， 虽 然 效 果 上 看 着 是 UI 特 别 绚丽 的 动态 效果 ， 但 是 ， 它 
的 本 质 是 车 加 了 一 个 特效 在 UI 上 ，UI 本 和 里 是 没有 发 生 任 何 变 化 的 。 例 
如 ， 我 们 经 常 在 游戏 中 看 到 领取 奖励 的 UI 按钮 在 可 以 领取 奖励 时 ， 会 
不 停 地 闪烁 发 区， 这 其 实 是 在 领 奖 按钮 上 县 加 了 一 层 内 烁 发 光 的 特 
效 ， 当 可 以 领 交 时， 这 个 特效 就 没 活 。 

所 以 ，UI 动 画 和 UI 特效 是 两 个 概念 ，UI 特 效 具有 独立 性 ， 可 以 通 
过 车 加 特效 让 UI 看 上 去 很 绚丽 ， 但 是 无 法 让 UI 本 身 动 起 来 。 而 UI 动画 
可 以 让 UI 本 身 动 起 来 ， 却 无 法 给 UI 贼 予 额外 的 特效 效果 。UI 特 效 需 要 
额外 的 特效 资源 ，UI 动 画 不 需要 任何 的 额外 资源 。 


4.1.2 关于 Tween 动 画 


Tween 动 画 是 动画 中 一 种 非常 币 用 ， 同 时 也 非常 商 单 的 一 种 动画 。 
Tween 动 画 简 单一 点 的 解释 是 :中间 动画 。 它 的 原理 苹 设 定 动 画 的 起 后 
和 终点 ， 以 及 这 过 程 中 每 一 个 中 间 操 的 值 ， 然 后 让 物体 按照 设 定 的 这 
个 流程 去 插值 地 改变 值 。 

例如 ， 我 们 通过 Tween 动 画 来 做 一 个 物体 的 X 轴 位 置 改变 的 动画 ， 
设 定 该 物体 X 轴 位 置 的 Tween 路 线 为 0、10、5 这 3 个 点 ， 设 定好 了 之 后 ， 
物体 的 X 轴 位 置 整 会 变化 为 0， 然 后 很 平 渭 地 变 到 1、2、3...…...10， 这 个 
过 程 会 根据 时 间 计 算出 它 变化 的 速度 ， 然 后 一 点 一 点 地 去 改变 ， 而 不 
会 瞬间 变 为 10， 这 就 是 所 谓 的 插值 。 当 物体 的 X 轴 位 置 变 为 10 之 后 ， 它 
又 会 很 平 消 地 慢 慢 变 为 5， 然 后 动画 结 

利用 Tween 动 画 可 以 做 很 多 UI 的 动画 效 霖 ， 比 如 按钮 被 单 击 时 会 弹 
一 下 、 按 钮 在 某 种 情况 下 开始 目 己 一 蹦 一 嘴 地 上 下 浮动 等 。 

在 NGUI 中 ， 目 市 了 一 僚 非 党 精简 实用 的 迷你 Tween 动画 库 ， 这 个 
动画 库 虽 然 不 能 文 持 强大 的 Tween 动 画 效果 ， 但是， 在 UI 的 动画 表现 中 
已 经 非 单 实用。 我 们 将 会 在 后 文 详细 讲解 这 个 迷你 Tween 动 画 库 。 


Animation 动 画 葡 是 Unity 引 警 自 身 的 Animation 动 画 系统 ， 它 的 功能 
非常 强大 ， 从 原理 上 来 说 ， 它 和 Tween 动画 几乎 是 一 样 的 原理 ， 通 过 
插值 去 平 请 地 过 小 每 一 个 天 键 帧 。 但 是 ， 它 文 持 Unity 引 擎 中 绝 大 部 分 
组 件 的 绝 大 部 分 参数 ， 而 且 文 持 各 种 各 样 的 运动 曲线 编辑 ， 可 以 让 动 
画 按照 一 个 自 定 义 的 、 任 意 的 节奏 进行 变换 ， 类 似 于 Tween 动 画 的 终极 
形态 。 

在 NGUI 中 目 市 的 迷你 Tween 动画 库 有 一 定 的 局 限 性 ， 它 只 能 实现 
一 些 常 用 的 人 简单 的 动画 效果 ， 而 Animation 是 Unity3| 敬 原生 的 动画 系 
统 ， 非 常 强 大 。 例 如， 我 们 希望 让 一 个 点 光源 的 灯光 不 停 地 明暗 变 


化 ， 做 出 一 种 夜晚 灯光 闪烁 的 效果 ， 或 者 天 上 星星 内 烁 的 效果 ， 我 们 
使 用 NGUI 自 带 的 Tween 动 画 库 就 难以 做 到 ， 就 需要 求助 于 一 些 专 业 的 
Tween 动 画 库 ， 但 是 ， 我 们 也 可 以 使 用 Animation 轻 松 做 到 类 似 效 果 。 

使 用 Animation 来 制作 UI 的 动画 主要 是 对 付 一 些 复杂 的 动画 效果 ， 
一 般 情 况 下 ， 优 先 使 用 NGUI 自 市 的 Tween 动 画 ， 因 为 它 简 单 ， 利 于 操 
作 和 维护 。 在 碰 到 特殊 情况 下 ， 才 去 使 用 Unity 目 且 的 Animation 动 画 系 
统 。 


下 面 我 们 将 逐一 介绍 NGUI 的 迷你 Tween 动 画 库 中 的 一 些 第 用 的 动 


4.2 渐 隐 渐 现 动画 〈 透 明度 动画 


4.2.1 透明 度 动 画 的 介绍 和 应 用 


透明 度 动 画 的 原理 是 改变 UI 控 件 的 Alpha 值 来 实现 。 在 前 文 我 们 讲 
解 UI 控 件 的 时 候 ， 讲 到 了 很 多 UI 控件 都 市 有 Widget 的 设置 ， 如 Sprite 、 
Label 等 都 有 Widget 的 设置 ， 在 Widget 设 置 里 可 以 改变 控件 的 颜色 (其 
中 包括 了 透明 度 ) 、 尺 寸 、 深 度 等 。 透 明度 动画 改变 的 Alpha 值 就 是 改 
变 的 这 里 的 颜色 设置 中 的 Alpha 值 。 

使 用 透明 度 动画 可 以 做 UI 的 渐 隐 和 渐 现 ， 比 如 一 个 UI 按钮 出 现 
时 ， 它 征 慢 慢 地 从 透明 变 为 不 透明 出 现 ， 请 失 时 也 走 慢 慢 地 透明 醒 。 

我 们 也 可 以 使 用 透明 上 度 动 画 做 UI 的 若隐若现 效果 ， 例如， 界面 中 
有 一 行文 字 时 而 消失 时 而 出 现 ， 不 停 地 重复 这 个 动画 过 程 构成 了 一 个 
奉 隐 大 现 的 效果 。 


4.2.2 使 用 透明 度 动画 TweenAlpha 


我 们 需要 为 某 个 UI 增 加 透明 度 动画 时 ， 可 以 通过 为 它 增 加 一 个 
TweenAlpha 组 件 ， 这 个 组 件 在 NGUI 的 Tween 动画 库 中 ， 添 加 方式 为 
依次 选择 AddCompent 一 NGUI 一 Tween 一 TweenAlpha。 

添加 成 功 后 的 TweenAlpha 组 件 设置 界面 如 图 4.1 所 示 ， 我 们 来 了 解 


一 下 如 何 设 置 它 来 制作 一 个 透明 度 动 画 。 


图 辟 Tween Alpha (Script) 


业 On Finished 


Notity 


A 图 4.1 

1. From 和 To 

这 是 Tween 动 画 的 核心 设置 项 ， 起 始点 的 设 定 。 值 得 注意 的 是 ， 在 
NGUI 目 带 的 迷你 Tween 动 画 库 中 ， 一 个 Tween 动 画 一 般 只 文 持 起 始点 的 
插值 动画 。 

在 TweenAlpha 中 ， 我 们 可 以 在 From 和 To 中 设置 动画 的 初始 透明 度 
和 结束 时 的 透明 度 ， 0 为 全 透明 。1 为 默认 值 ， 也 就 是 不 透明 。 

2. Play Style 

这 里 是 播放 的 风格 ， 可 以 理解 为 循环 模式 ， 一 共有 以 下 3 种 形式 。 

eOnce 

只 播放 一 次 ， 播 放 完 了 之 后 ， 就 停止 。 

eLoop 


循环 播放 ， 播 放 完 了 之 后 它 会 立即 瞬间 回 到 起 点 接着 播放 。 我 们 
举 一 个 比较 形象 的 例子 : 有 一 个 动画 是 从 透明 度 为 1 变 为 透明 度 为 0， 
那么 Loop 模 式 下 ， 动 画 播放 时 透明 度 的 变化 为 1~ 《中 间 插 值 ) 一 0 一 
瞬间 变 为 1~ 《中 间 插 值 ) 一 0 一 ……. 如 此 无 限 循环 下 去 。 注 意 : 这 里 
从 0 慢 慢 插值 达到 终点 1 之 后 ， 征 瞬间 变 回 0 进行 下 一 过 播放 的 。 

ePingPong 

乒乓 模式 ， 顾 名 思 义 ， 动 画 会 像 乒乓 球 一 样 来 回 播放 ， 它 和 Loop 
最 大 的 区 别 在 于 ，Loop 在 播放 完了 之 后 是 瞬间 回 到 起 点 然后 继续 播 
放 ， 而 PingPong 模 式 在 动画 播放 完了 之 后 ， 会 倒 痢 插值 播放 。 还 走 那 


个 例子 : 有 一 个 动画 是 从 透明 度 为 1 变 为 透明 度 为 0， 在 PingPong 模 式 
下 ， 动 画 播放 时 透明 度 的 变化 为 : 1 (中 间 插 值 ) 0- (中 间 插 
值 ) ~1-~ 《中 间 插 值 ) 0 一 .……. 如 此 无 限 循 环 下 去 。 

3. Animation Curve 

这 是 动画 的 曲线 编辑 ， 可 以 编辑 一 些 动 画 的 丰 委 。 我 们 单 击 这 个 
设置 项 中 的 曲线 图 片 ， 会 乔 出 以 下 界面 ， 如 图 4.2 所 示 。 


Curve 


A 图 4.2 


从 图 4.2 中 可 以 看 到 一 条 默认 的 曲线 ， 为 一 条 直线 。 它 是 单 次 动画 
内 的 曲线 编辑 ， 直 线 的 意思 是 起 点 的 值 会 在 持续 时 间 内 ， 非 常平 均 地 
进行 插值 改变 ， 最 后 变 为 终点 。 我 们 在 图 4.2 中 瓜 部 的 几 个 小 灰 块 中 可 
以 看 到 ， 有 几 条 预 设 好 的 曲线 供 我 们 选择 ， 熟 悉 画 数 的 应 该 都 明日 它 
的 意思 ， 我 们 只 需要 单 击 其 中 一 种 曲线 ， 即 可 将 这 条 预 设 好 的 曲线 作 
为 我 们 需要 应 用 的 曲线 。 

我 们 人 简单 介绍 一 下 儿 种 预 设 好 的 曲线 。 

如 图 4.3 所 示 ， 为 水 平 的 一 条 横 线 ， 这 种 模式 比较 特殊 ， 代 表 痢 没 
有 插值 动画 ， 动 画 在 过 渡 时 ， 不 论 动画 需要 过 渡 多 少时 间 ， 它 都 会 一 
瞬间 跳 到 终点 ， 完 全 没有 中 间 过 程 ， 动 画 一 旦 开始 播放 就 会 立即 达到 
终点 播放 完成 。 


A 图 4.3 
如 图 4.4 所 示 ， 为 直线 ， 动 画 将 会 匀速 从 起 点 过 渡 到 终点 。 


Curve 原 


A 图 4.4 
如 图 4.5 所 示 ， 为 先 慢 后 快 的 曲线 ， 动 画 将 会 以 先 慢 后 快 的 方式 从 
起 点 过 渡 到 终点 。 


Curve 原 


A 图 4.5 
如 图 4.6 所 示 ， 为 先 快 后 慢 的 曲线 ， 动 画 将 会 以 先 快 后 慢 的 方式 从 
起 点 过 渡 到 终点 。 
Curve 加 | 


A 图 4.6 


如 图 4.7 所 示 ， 为 先 慢 后 快 最 后 再 慢 的 方式 ， 动 画 过 渡 时 ， 在 开始 
时 比较 慢 ， 然 后 变 快 ， 快 到 达 终 点 时 又 开始 变 慢 。 

如 果 我 们 对 它 预 设 的 曲线 还 不 满意 ， 我 们 可 以 在 曲线 中 进行 拖 动 
设置 ， 方 法 和 Unity 的 Animation 曲 线 一 样 (这 个 属于 Unity 的 原生 系统 
我 们 就 不 多 讲述 了 ) 。 我 们 也 可 以 通过 单 击 预 设 曲线 左边 的 齿轮 符 
号 ， 在 弹出 的 预 设 曲线 界面 中 单 击 New 来 新 创建 一 个 预 设 曲 线 ， 以 便 
于 以 后 我 们 更 方便 地 应 用 自 定 义 的 曲线 。 


A 图 4.7 

4. Duration 

持续 时 间 ， 和 单位 为 秒 ， 默 认为 1 秒 。 这 里 可 以 填 浮 点 数 ， 如 0.5 秒 。 

5. Start Delay 

播放 延迟 时 间 ， 单 位 为 秒 ， 默 认为 0 秒 ， 文 持 浮 点 数 。 

6. Tween Group 

动画 所 属 的 组 ， 默 认为 0° 这 个 设置 会 在 后 文 讲解 UIPlayTween 时 
讲 到 ， 它 的 主要 作用 是 通过 分 组 来 整体 控制 多 个 Tween 动 画 。 

7. Ignore TimeScale 

是 否 忽略 时 间 缩 放 ， 默 认为 是 。 


这 个 选项 用 得 极 少 ， 但 是 知识 点 很 重要 。 我 们 都 知道 Unity 中 有 一 
个 TimeScale 的 概念 ， 我 们 在 某 些 比较 简单 的 情况 下 会 直接 使 用 
TimeScale=0 这 种 方式 来 使 游戏 中 的 时 间 停 下 ， 达 到 游戏 暂停 的 效果 。 
而 这 里 的 是 否 忽略 时 间 缩 放 ， 束 是 指 当 游 戏 中 的 TimeScale 改 变 时 ， 这 
个 动画 的 时 间 是 人 否 跟着 受 影响 。 

8. On Finished 

在 动画 播放 完毕 时 候 触 发 的 函数 ， 这 里 的 设置 和 之 前 UI 控件 的 回 
调 函 数 设 置 方法 一 样 ， 束 不 多 搞 述 了 。 


4.2.3 使 用 透明 度 动画 的 注意 点 


NGUI 的 Tween 动 画 看 上 去 都 比较 简单 ， 容 易 操 作 。 但 是 ， 在 实际 
开发 中 使 用 透明 度 动画 时 ， 我 们 要 注意 一 些 比 较 隐 藏 的 、 又 比较 重要 
的 规律 。 

(1) 从 起 点 播放 到 终点 ， 就 算 动画 播放 完了 一 过 。 但 是 ， 在 动画 
结束 的 触发 事件 中 ， 我 们 需要 注意 的 是 ， 如 果 动 画 模式 是 Loop 或 者 
PingPong， 那 么 它 将 永远 不 会 结束 。 

(2) 透明 度 动 画 会 实 实在 在 地 改变 UI 的 透明 度 ， 并 不 是 一 个 “ 临 
时 ”透明 度 。 例 如 ， 我 们 设置 了 一 个 透明 度 从 1 变 为 0 的 渐渐 消失 动画 ， 
当 透 明度 变化 到 0.5 时 ， 我 们 就 将 动画 组 件 关 闭 ， 此 时 UI 的 透明 度 将 会 
一 直 停 留 在 0.5 。 

(3) 如 果 有 目 定 义 动 画 曲 线 ， 那 一 定 要 检查 曲线 是 否 和 自己 想 要 
的 效果 一 致 。 

(4) 动画 组 件 激 活 后 ， 它 会 立即 开局 StartDelay 的 计时 ， 然 后 播放 
动画 。 

(5) 如 果 动 画 播放 设 定 为 播放 一 次 ， 那 么 动画 播放 一 次 之 后 ， 就 
会 目 动 天 闭 该 组 件 。 


4.3 颜色 变化 动画 (变色 动画 
4.3.1 变色 动画 的 介绍 和 应 用 


变色 动画 是 通过 NGUI 的 TweenColor 组 件 来 实时 改变 UI 控件 的 颜色 
来 实现 动画 效果 。 我 们 之 前 讲 过 UI 探 件 的 widget 中 改变 Color 的 设置 
中 ， 原 理 是 颜色 的 相 乘 。UI 图 片 中 的 每 个 像素 都 有 一 个 RGB 值 来 表示 
这 个 像素 的 颜色 ， 在 Unity 中 会 将 RGB3 个 值 由 0~255 的 数值 转变 为 0 一 1 
的 一 个 数 ， 然 后 和 UI 控件 的 widget 的 Color 中 设 定 的 颜色 值 (设置 的 时 
候 是 为 RGB 分 别 填 入 0~255 的 数 ， 但 是 也 会 被 转换 为 0 一 1 的 数 ) 进行 
相 乘 。 在 变色 动画 中 ， 原 理 也 是 色 值 相 乘 。 

例如 ， 设 置 动 画 的 起 点 是 日 色 ， 终 点 是 黑色 ， 那 么 UI 的 最 终 颜 色 
将 会 是 : UI 图 厂 的 原色 * 白 色 一 UI 图 片 的 原色 * 黑 色 。 这 个 动画 变化 过 
程 也 是 插值 的 。 

变色 动画 在 游戏 中 的 应 用 非常 广泛 ， 比 如 我 们 选中 某 个 UI 时 ， 它 
会 明暗 内 炼 ， 则 是 一 个 白色 到 黑色 的 PingPong 动 画 。 再 比如 当 某 个 UI 
我 们 无 法 单 击 时 ， 它 会 不 停 地 内 红色 ， 则 是 一 个 白色 到 红色 的 
PingPong 动 画 。 

值得 注意 的 是 ， 我 们 在 制作 游戏 的 UI 动 画 时 ， 一 定 要 区 分 透明 度 
动画 和 颜色 动画 ， 比 如 说 明暗 变化 ， 如 果 用 透明 度 动 画 来 制作 ， 它 其 
实 没 有 变 蜡 ， 是 变 得 半 透 明了 看 上 去 有 一 点 变 暗 的 效果 ， 而 用 颜色 动 
画 ， 则 透明 度 没有 变化 ， 是 颜色 实 实在 在 变 暗 了 。 


4.3.2 使 用 颜色 动画 TweenColor 


我 们 需要 为 某 个 UI 增 加 变色 动画 时 ， 可 以 通过 为 它 增 加 一 个 
TweenColor 组 件 ， 这 个 组 件 在 NGUI 的 Tween 动画 库 中 ， 话 加 方式 
为 ， 依 次 选择 AddCompent~ NGUI- Tween 一 TweenColor 。 


添加 成 功 后 的 TweenColor 组 件 设置 弄 面 如 图 4.8 所 示 ， 我 们 来 了 解 


一 下 如 何 设置 它 来 制作 一 个 变色 动画 。 


园 人 Tween Color (Script) 


A 图 4.8 

从 图 4.8 中 可 以 看 到 ， 变 色 动 画 的 组 件 和 透明 度 动 画 的 组 件 从 界面 
上 来 看 非常 相似 。 是 的 ， 所 有 的 NGUI 自 带 的 Tween 动 画 ， 几 乎 都 是 一 
模 一 样 的 结构 ， 只 是 其 中 的 设置 有 一 些 不 同 。 

TweenColor 一 样 只 文 持 起 点 和 终点 两 个 点 的 设置 ， 然 后 通过 插值 
曲线 来 过 渡 。 其 中 Tweener 模块 和 之 前 讲 过 的 透明 度 动画 的 Tweener 模 
块 是 一 样 的 ， 这 里 就 不 多 攻 述 。 如 果 对 Tweener 模 块 还 不 了 解 ， 可 以 参 
看 4.2 节 。 

天 于 这 个 TweenColor 组 件 ， 我 们 要 着重 讲 一 下 它 的 起 始点 设置 。 
它 的 起 始点 设置 是 两 个 颜色 设置 板 ， 和 UI 探 件 的 widget 模块 中 的 颜色 设 
置 板 一 模 一 样 。 我 们 可 以 点 进去 设置 想 要 的 颜色 。 既 然 是 用 UI 控 件 的 
widget 模块 中 的 颜色 设置 板 来 设置 颜色 ， 颜 色 有 RGBA4 个 值 ， 所 以 也 
可 以 通过 设置 它 的 A 值 来 实现 一 个 透明 度 动画 。 


4.3.3 使 用 颜色 动画 的 注意 点 


使 用 颜色 动画 的 时 候 ， 需 要 注意 以 下 一 些 注意 点 。 

(1) 从 起 点 播放 到 终点 ， 就 算 动 画 播 放 完 了 一 遍 。 但 是 ， 在 动画 
结束 的 触发 事件 中 ， 需 要 注意 的 是 ， 如 果 动 画 模式 是 Loop 或 者 
PingPong， 那 么 它 将 永远 不 会 结 

(2) 颜色 动画 是 实 实在 在 地 改变 了 UI 控件 的 颜色 ， 并 不 是 “临时 
改变 ”。 例如， 一 个 动画 是 将 UI 从 日 变 黑 ， 那 么 当 动 画 播放 完毕 之 后 ， 
UI 是 真 的 变 黑 了 ， 并 不 会 自动 变 回 原来 的 颜色 。 

(3) 颜色 改变 的 原理 是 将 UI 控件 的 原色 和 动画 中 设置 的 颜色 进 
行 相 乘 ， 这 个 原理 一 定 要 深刻 理解 ， 如 图 4.9 所 示 ， 则 是 一 个 动画 的 范 
例 ， 在 TweenColor 中 设置 动画 的 起 点 为 白色 ， 终 点 为 红色 。 
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4.4.1 位 移动 画 的 介绍 和 应 用 


NGUI 中 的 每 一 个 UI 控 件 其 实 都 是 一 个 市 有 NGUI 脚 本 的 Unity 游 戏 
物体 (GameObject) ， 它 们 都 有 一 个 Transform 组 件 来 管理 这 个 物体 的 
位 置 、 旋 转 、 缩 放 。 位 置 变换 动画 ， 就 是 通过 改变 这 个 UI 物 体 的 
Transform 组 件 的 Position 实 现 的 。 


值得 注意 的 是 ， 在 NGUI 的 UIRoot 树 状 结构 中 的 物体 ，Transform 的 
Position 一 般 都 是 本 地 坐标 (经 过 了 UIRoot 的 缩放 ) ， 而 位 移动 画 的 核 
心 组 件 TweenPosition 改 变 的 是 Position 中 显示 的 坐标 。 也 就 是 说 ， 如 果 
我 们 对 UIRoot 下 的 UI 物 体 使 用 TweenPosition， 则 单位 可 以 理解 为 像 
妹 ， 如 采 我 们 目 己 在 摄像 机 中 挂 上 一 个 UICamera， 然 后 对 这 个 Camera 
照射 到 的 物体 (不 属于 某 个 UIRoot) 使 用 TweenPosition， 则 单位 是 
Unity 中 的 标准 单位 : 米 。 

位 移动 画 也 是 在 开发 游戏 时 经 第 使 用 的 一 种 动画 ， 比 如 某 个 按钮 
或 者 图 片 一 直 不 停 地 上 下 漂浮 等 。 再 比如 我 们 制作 比较 常用 的 “ 抽 居 界 
面 ? 都 会 用 到 位 移动 画 ,“ 抽 屠 界 面 ? 的 制作 我 们 后 面 会 讲解 。 


4.4.2 使 用 动画 TweenPosition 


我 们 需要 为 某 个 UI 增 加 位 移动 画 时 ， 可 以 通过 为 它 增 加 一 个 
TweenPosition 组 件 ， 这 个 组 件 在 NGUI 的 Tween 动画 库 中 ， 添 加 方式 
为 ， 依 次 选择 AddCompent 一 NGUI 一 Tween 一 TweenPosition 。 

添加 成 功 后 的 TwetenPosition 组 件 设 置 界 面 如 图 4.10 所 示 ， 我 们 了 
解 一 下 如 何 设置 它 来 制作 一 个 位 移动 画 。 


YY On Finished 


Notit 


A 图 4.10 
TweenPosition 的 组 件 设 置 和 其 他 Tween 动 画 很 相似 ， 惟 一 的 区 别 在 
于 From 和 To 是 一 个 Vector3 变 量 ， 起 始点 的 设置 都 需要 分 别 填 入 又 、Y、 
Z 的 值 。 当 我 们 成 功 添 加 了 该 组 件 之 后 ， From 和 To 中 会 目 动 读 取 该 物 
体 当 前 的 Transform 中 Position 的 值 作为 默认 值 。 


4.4.3 使 用 位 移动 画 的 注意 点 


使 用 位 移动 画 的 注意 点 可 以 参看 4.2 节 讲解 透明 度 动 画 时 的 一 些 注 
意 点 ，Tween 动 画 的 很 多 注意 点 几乎 都 是 一 样 的 ， 比 如 动画 如 果 选 择 了 
Loop 和 PingPong， 那 么 吏 不 会 有 结束 的 那 一 刻 。 

除 此 之 外 ， 在 制作 位 移动 画 时 ， 需 要 特别 注意 的 是 位 移 的 单位 问 
题 。 因 为 如 果 物 体 属 于 一 个 UIRoot， 那 么 它 的 位 置信 息 是 相对 位 置 ， 
单位 也 是 像素 。 如 果 物 体 不 属于 UIRoot， 那 么 它 的 位 置信 息 是 空间 位 
置 ， 单 位 是 米 。 

在 制作 位 移动 画 时 ， 动 画 在 执行 时 会 先 瞬间 改变 到 起 始点 ， 然 后 
开始 插值 位 移 ， 所 以 ， 我 们 一 定 要 注意 起 始点 的 位 置 是 否 是 想 要 的 位 
置 ， 一 般 情 况 下 ， 需 要 起 始点 的 位 置 是 物体 的 当前 位 置 。 虽 然 添 加 完 
组 件 之 后 它 会 目 动 读 取 当 前 位 置信 息 作为 默认 的 位 置 ， 但是， 如 果 改 
变 了 物体 的 位 置信 息 ，TweenPosition 组 件 中 的 值 是 不 会 再 次 自动 地 去 
读 取 的 ， 所 以 ， 需 要 经 常 检查 From 和 To 的 值 。 
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4.5 化 到 


4.5.1 旋转 动画 的 介绍 和 应 用 


Unity 的 每 一 个 GameObject 都 有 一 个 Transform 组 件 ， 每 一 个 
Transform 组 件 上 都 有 Position、Rotation、Scale3 个 信息 。 上 文 我 们 讲解 
的 位 移动 画 则 是 通过 改变 Transform 的 Position 来 实现 的 ， 这 里 要 讲 的 旋 
转动 画 则 是 通过 改变 Transform 组 件 的 Rotation 来 实现 的 。 

旋转 动画 在 游戏 中 的 应 用 相对 要 少 一 些 ， 比 如 说 通过 某 个 操作 会 
使 UI 图 厂 旋 转 一 下 。 


4.5.2 使 用 旋转 动画 TweenRotation 


我 们 需要 为 某 个 UI 增加 旋转 动画 时 ， 可 以 通过 为 它 增 加 一 个 
TweenRotation 组 件 ， 这 个 组 件 在 NGUI 的 Tween 动画 库 中 ， 添 加 方式 
为 ， 依 次 选择 AddCompent 一 NGUI- Tween 一 TweenRotation 。 

添加 成 功 后 的 TwetenRotation 组 件 设置 界面 如 图 4.11 所 示 ， 我 们 了 
解 一 下 如 何 设置 它 来 制作 一 个 旋转 动画 。 


¥ On Finished 
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A 图 4.11 
从 图 4.11 中 可 以 看 到 ， 它 的 设置 界面 和 位 移动 画 非 常 相似 。 相 同 的 
一 些 设置 就 不 多 敖 述 了 。 主 要 来 讲 一 下 它 的 From 和 To 起 始点 设置 。 


旋转 动画 的 From 和 To 需要 填 入 的 是 3 个 方向 的 旋转 角度 ，0 就 是 
0"， 也 就 是 不 旋转 。 需 要 注意 的 是 ，360。， 并 不 等 于 0 度 ， 因 为 动画 有 
插值 算法 ， 例 如 ， 在 X 中 填写 360， 则 会 顺 着 X 轴 的 方向 将 图 片 翻转 360° 
一 整 圈 o 

关于 旋转 动画 的 旋转 方向 ， 它 会 根据 填 入 的 X、 YY、`Z 值 合成 一 个 
方向 〈 这 个 X\、 Y、Z 值 本 身 就 组 成 了 Vector3 向 量 ) ， 如 果 和 希望 它 是 
朝 着 轴 正 向 的 ， 则 填 入 正 数 ， 如 果 和 希望 它 是 反 向 的 ， 则 填 入 负数 。 

例如 ， 设 置 From 的 X、Y、Z 都 为 0， 也 就 是 以 当前 原始 姿态 作为 起 
点 ， 然 后 在 To 中 的 XxX、Y、Z 中 分 别 填写 X 为 60、Y 为 180、Z 为 -360。 则 
在 持续 时 间 内 ， 它 会 插值 的 沿 着 X 轴 正 向 旋转 60"， 同 时 朝 着 Y 轴 正 向 旋 
转 180。， 同 时 朝 着 Z 轴 的 负 方 向 旋转 360"， 然 后 在 同一 个 时 间 点 〈 动 画 
的 结束 时 间 ) 旋转 结束 。 

我 们 在 设置 From 和 To 时 ， 虽 然 填 写 的 是 一 个 旋转 度数 ， 我 们 可 以 
填写 超过 360 的 数字 ， 例 如 ， 在 To 中 填写 720， 则 是 单 次 动画 过 程 中 旋 
转 720"， 也 就 是 两 圈 。 


4.5.3 使 用 旋转 动画 的 注意 点 


使 用 旋转 动画 时 ， 我 们 要 注意 以 下 几 点 。 

(1) 动画 的 方向 不 要 和 弄 错 ， 它 是 由 X、Y、Z 上 的 3 个 方向 合 加 
起 来 的 。 如 果 只 需要 UI 朝 一 个 方向 旋转 ， 请 将 男 外 两 个 方向 的 值 设 为 
05° 


(2) 只 有 From 的 XxX、Y、Z 都 为 0 时 ， 才 是 从 原始 形态 开始 旋转 。 

(3) 0 和 360。 区 别 很 大 。 昌 然 0 和 360。 看 到 的 结果 是 一 样 的 ， 但 
是 ， 因 为 动画 有 一 个 插值 过 渡 的 过 程 ， 所 以 0° 不 会 旋转 ， 而 360° 则 会 旋 
转 一 整 圈 回 到 原样 。 

(4) 记 住 正 数 为 正方 向 ， 负 数 为 负 方向 。 


(5) 填写 的 数值 可 以 超过 360， 例 如 ， 填 写 一 个 720° 旋 转 ， 则 是 
单 次 动画 转 两 圈 的 意思 。 
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4.6 大 小 变化 动画 挥 动画 


4.6.1 放 缩 动画 的 介绍 和 应 用 


放 缩 动画 和 旋转 动画 和 位 移动 画 一 样 ， 都 是 通过 改变 物体 的 
Transform 组 件 来 实现 的 。 位 移动 画 是 改变 的 Transform 的 Position 信 息 ， 
旋转 动画 改变 的 是 Transform 的 Rotation 信息 ， 而 放 缩 动画 ， 则 是 改变 的 
Transformb 的 Scale 信息 。 

放 缩 动画 在 游戏 中 比较 常用 ， 比 如 某 个 图 片 不 停 地 变 大 变 小 造成 
一 种 “不 停 的 蹦 ” 的 效果 。 


4.6.2 使 用 放 缩 动画 TweenScale 


我 们 需要 为 某 个 UI 描 加 放 缩 动画 时 ， 可 以 通过 为 它 增 加 一 个 
TweenScale 组 件 ， 这 个 组 件 在 NGUI 的 Tween 动画 库 中 ， 添 加 方式 
为 ， 依 次 选择 AddCompent 一 NGUI 一 Tween 一 TweenScale 。 

添加 成 功 后 的 TwetenScale 组 件 设置 界面 如 图 4.12 所 示 ， 我 们 了 解 
一 下 如 何 设置 它 来 制作 一 个 放 缩 动画 。 

从 图 4.12 中 依然 看 到 了 一 个 非常 熟悉 的 设置 界面 ， 依 然 是 设置 
From 和 To 的 起 始 值 和 Tweener 模 块 ， 以 及 OnFinished 回 调 函 数 模 块 。 
这 里 就 不 多 讲解 了 。 

但 是 在 图 4.12 中 我 们 发 现 这 个 TweenScale 组 件 和 其 他 组 件 不 一 样 的 
地 方 在 于 多 了 一 个 选项 : Update Table， 这 是 一 个 Bool 型 变量 ， 打 和 勾 为 


选中 ， 不 打 义 则 为 不 选 。 这 个 选项 在 开发 时 暂时 没什么 用 ， 可 以 不 用 


入 已 * 


值得 注意 的 是 ，TweenScale 改 变 的 是 LocalScale。 
图 民 Tween scale (Script) 
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A 图 4.12 
4.6.3 使 用 放 缩 动画 的 注意 点 


放 缩 动画 比较 简单 ， 在 使 用 时 注意 两 点 即 可 : WO 它 改变 的 是 
LocalScale。( 它 会 连同 子 物 体 一 起 给 改变 了 。 


4.7 Tween 动 画 总 结 


在 前 几 个 小 节 中 ， 我 们 已 经 讲解 了 游戏 开发 中 最 币 用 的 一 些 UI 动 
画 效 末 。 在 NGUI 中 还 提供 了 一 些 其 他 的 Tween 动 画 ， 比 如 说 : 改变 音 
量 的 动画 、 整 体 Transform 改 变 的 动画 、 摄 像 机 的 正 交 尺寸 动画 等 。 

因为 NGUI 的 Tween 动 画 的 原理 和 结构 几乎 都 一 样 ， 所 以 ， 对 于 其 
他 的 Tween 动 画 我 们 束 不 多 讲述 了 ， 大 家 有 兴趣 的 可 以 去 笑 试 一 下 。 我 


们 现在 来 总 结 一 下 Tween 动 画 的 特点 。 

(1) 都 要 设置 From 和 To， 也 就 是 动画 的 起 点 和 终点 ， 然 后 动画 会 
根据 这 两 个 点 ， 揪 值 出 中 间 过 滤 点 ， 最 后 完成 起 点 到 终点 的 过 程 。 

(2) 都 有 一 个 Tweener 模 块 ， 里 面 需 要 设置 动画 的 曲线 、 持 续 时 
间 等 。 

(3) 都 有 一 个 OnFinshed 模 块 ， 可 以 设置 动画 播放 完成 之 后 触发 
的 事件 函数 。 

(4) Tween 动 画 都 是 实 实在 在 地 去 改变 UI 的 相关 参数 ， 并 不 是 一 
个 “临时 效果 ”。 

Tween 动 画 一 般 很 少 单 独 使 用 ， 一 般 来 说 它 都 需要 配合 
UIPlayTween (一 种 UI 动画 的 控制 器 组件 来 使 用 ， 其 至 是 和 代码 结合 
起 来 使 用 。 因 为 在 游戏 开发 中 ，UI 动画 的 规则 会 受 游 戏 规则 的 一 些 影 
咱 而 有 不 同 的 需求 ， 如 果 仅 是 Tween 动画 单独 使 用 会 有 很 多 缺陷 ， 而 
配合 UIPlayTween 则 会 更 加 强大 和 方便 ， 在 某 些 更 高 级 的 动画 控制 需求 
中 ， 还 得 用 代码 去 控制 动画 。 

只 有 在 它 永 久 存 在 的 时 候 (如 Loop 或 PingPong) 才 会 单独 使 用 ， 
例如 ， 需 要 让 一 行 字 永远 在 UI 面板 中 上 下 漂浮 ， 那 么 可 以 设置 一 个 
TweenPosition 选 择 PingPong 或 者 Loop 模 式 直 接 完 成 制作 ， 这 个 Tween 动 
画 就 是 单独 使 用 。 

在 后 面 我 们 就 将 介绍 两 个 很 重要 的 动画 的 控制 组 件 : UIPlayTween 
和 UIPlayAnimation 。 


4.8 动画 控制 组 件 UIPlayTween 


4.8.1 为 什么 要 用 UIPlayTween 


首先 ， 我 们 需要 了 解 ， 什 么 是 UIPlayTween? UIPlayTween 是 一 个 
NGUI 的 组 件 脚 本 ， 它 的 作用 是 对 物体 号 上 的 Tween 动 画 进 行 目 定义 的 
控制 ， 比 如 我 们 之 前 讲解 各 种 Tween 动 画 时 ， 在 Tweener 设 置 模块 就 有 
一 个 Group 设 置 ， 这 个 Group 就 是 为 UIPlayTween 准 备 的 变量 ， 可 以 让 
UIPlayTween 对 动画 进行 整 组 控制 。 

为 什么 我 们 要 使 用 UIPlayTween 呢 ? 在 ed nt 动 
画 时 ， 讲 到 了 Tween 动画 的 一 些 特点 ， 这 些 特 点 有 一 部 分 也 是 Tween 动 
画 单 独 使 用 的 便 伤 ， 比 如 Tween 动 画 组 件 在 激活 时 就 会 直接 播放 播放 

完 一 次 之 后 就 再 也 不 会 播放 了 “。Tween 动 画 如 果 单 独 使 用 ， 很 难 满 足 我 
们 在 游戏 开发 中 的 很 多 常见 需求 ， 例 如 ， 我 们 需要 每 次 单 击 某 个 按钮 
时 ， 都 让 一 张 图 片 播放 一 个 Tween 动画 ; 或 者 我 们 需要 第 一 次 单 击 某 
个 按钮 ， 一 张 图 乒 会 正 同 播放 动画 ， 上 再 单 击 一 次 按钮 ， 这 个 图 片 会 倒 
着 播放 动画 ， 再 单 击 再 正 癌 播 放 ...... 这 些 需 求 都 是 Tween 动画 单独 使 
用 无 法 做 到 的 。 

综 上 ， 我 们 需要 对 动画 进行 事件 关联 的 时 候 ， 也 就 是 我 们 需要 让 
动画 按照 一 些 规 则 来 进行 播放 的 话 ， 我 们 一 般 就 需要 结合 UIPlayTween 
组 件 来 使 用 。 对 于 某 些 更 高 级 的 需求 ， 甚 至 需要 通过 代码 来 控制 。 


4.8.2 动画 核心 组 件 UIPlayTween 讲 解 


UIPlayTween 组 件 我 们 可 通过 依次 选择 
AddCompent 一 NGUI 一 Interaction - PlayTween 来 完成 添加 。 值 得 注意 的 
是 : UIPlayTween 需要 接收 外 部 单 击 事件 ， 所 以 一 般 来 说 ， 都 会 将 
UIPlayTween 放 在 一 个 有 BoxCollider 可 以 接收 事件 的 物体 上 。 

图 4.13 是 UIPlayTween 的 组 件 设置 界面 ， 先 来 了 解 一 下 UIPlayTween 
组 件 的 设置 方式 和 特点 。 
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A 图 4.13 

1. TweenTarget 

动画 播放 目标 物体 。 

我 们 刚 讲 过 UIPlayTween 组 件 的 核心 意义 在 于 控制 物体 身上 的 各 个 
Tween 动 画 组 件 ， 而 这 个 设置 项 的 意义 在 于 设 定 UIPlayTween 组 件 控制 
的 是 哪 一 个 物体 号 上 的 Tween 动画 组 件 。 它 的 默认 值 是 上 自 号 的 物体 ， 
但 是 ， 它 不 一 定 非得 是 目 刁 ， 它 可 以 控制 其 他 的 物体 。 

例如 ， 假 设 我 们 希望 通过 单 击 按钮 A 来 使 物体 B 播 放生 上 的 Tween 
动画 ， 我 们 需要 将 B 物 体 拖 动 到 A 物 体 的 UIPlayTween 组 件 的 
TweenTarget 设 置 处 ， 这 样 就 将 这 个 PlayTween 组 件 和 物体 B 关 联 起 来 
李 

一 个 UIPlayTween 只 能 天 联 一 个 物体 ， 关 联 的 物体 届 上 的 Tween 动 
画 组 件 不 管 是 否 激活 都 可 以 被 UIPlayTween 控制 ， 一 般 情 况 下 都 会 提 
前 关闭 物体 身上 的 Tween 动画 组 件 ， 让 UIPlayTween 组 件 按照 事件 来 控 
制 Tween 动 画 的 激活 与 播放 。 

2. Include Children 

是 否 包 含 子 物体 。 

这 里 指 的 是 UIPlayTween 组 件 是 否 控制 目标 物体 的 子 物 体 号 上 的 
Tween 动画 。 如 果 不 勺 选 ， 则 UIPlayTween 只 会 控制 目标 物体 身上 的 


Tween 动 画 播放 ;， 如 果 勾 选 ， 则 会 使 UIPlayTween 不 但 控制 目标 物体 寻 
上 的 Tween 动 画 ， 而 且 会 同时 控制 目标 物体 的 子 物 体 喘 上 的 Tween 动 
画 。 

3. Tween Group 

控制 的 Tween 动 画 的 组 。 

UIPlayTween 组 件 虽 然 是 控制 目标 物体 号 上 的 Tween 动 画 组 件 的 播 
放 ， 但 是 ， 它 并 不 是 直接 控制 目标 物体 号 上 所 有 的 Tween 动画 。 我 们 
在 前 文 讲 解 T ween 动画 组 件 的 时 候 ， 讲 到 过 每 一 个 Tween 动 画 都 有 一 个 
Group 设 置 ，UIPlayTween 组 件 吴 上 也 有 一 个 TweenGroup 的 设置 ， 它 只 
会 控制 目标 物体 导 上 Group 和 目 吴 的 TweenGroup 相 同 的 Tween 动 画 。 

例如 ， 目 标 物体 身上 有 A、B 、C3 个 Tween 动 画 组 件 ， 它 们 的 Group 
分 别 是 0、1、2， 而 UIPlayTween 组 件 的 TweenGroup 为 0， 那 么 
UIPlayTween 将 只 会 控制 目标 物体 里 上 的 A 动画 组 件 ， 因 为 Group 一 样 。 

4. Trigger condition 

触发 机 制 。 

在 这 个 设置 项 中 ， 提 供 了 很 多 选项 ， 如 OnClick、OnPress 等 ， 可 
以 用 来 设 定 在 什么 事件 条 件 下 使 相关 联 的 Tween 进 行 播放 。 但 是 ,我 
们 之 前 讲 过 UIPlayTween 所 在 的 物体 必须 要 有 BoxCollider 组 件 才 能 进行 
事件 接收 。 

5. Play direction 

播放 的 方向 。 这 里 提供 了 3 种 方向 。 

eForward 


正 向 播放 ， 默 认 方向 。 也 就 是 Tween 动 画 将 会 正常 地 从 From 播 放 到 


eloggle 
开关 播放 ， 也 就 是 第 一 次 单 击 ，Tween 动 画 会 正常 地 从 From 播 放 到 
To。 第 二 次 单 击 会 从 To 倒 着 播放 到 From， 再 次 单 击 则 再 从 From 播 放 到 


To。 如 此 往返 循环 ， 像 开关 一 样 。 
@Reverse 
反 疝 播放 ，Tween 动 画 将 会 倒 着 从 To 播放 回 From 。 
6. If target is disabled 
如 果 要 对 目标 物体 进行 播放 动画 的 控制 时 ， 目 标 物体 却 被 禁用 了 
(未 激活 ) 状态 下 的 设置 。 这 里 提供 了 以 下 选项 。 


eDoNothing 
不 做 任何 处 理 ， 也 就 是 目标 没有 被 激活 ， 那 么 该 次 控制 就 无 效 。 
eEnable Then Play 


强行 将 目标 物体 激活 ， 然 后 播放 相应 的 Tween 动 画 。 

需要 注意 的 是 ， 这 里 是 针对 的 目标 物体 是 否 激活 ， 而 不 是 目标 物 
体 号 上 的 Tween 动画 组 件 是 否 激活 。UIPlayTween 在 工作 时 ， 不 管 目标 
身上 的 Tween 动 画 组 件 是 否 激活 ，UIPlayTween 组 件 都 会 强行 控制 Tween 
动画 组 件 激活 并 按照 规则 播放 动画 。 

7. If already playing 

如 采 对 目标 物体 进行 播放 动画 了 时， 目标 动画 恰好 正在 播放 中 的 设 
置 。 这 里 提供 了 以 下 选项 。 


eContinue 
接着 播放 ， 其 实 相当 于 不 做 任何 处 理 ， 任 由 它 继续 播放 完 。 
eRestart 


重新 播放 ， 强 行将 正在 播放 的 动画 回 到 起 点 ， 然 后 按照 该 次 控制 
重新 播放 一 胃 。 

eRestart If Not Playing 

等 这 次 播放 完了 ， 再 重新 返回 到 起 点 播放 一 志 。 

8. When finished 

播放 完毕 之 后 目标 物体 的 处 理 。 这 里 给 出 了 以 下 选项 。 

eDo Not Disable 


不 要 禁用 日 标 物体 。 其 实 束 是 不 做 任何 处 理 ， 播 放 完 了 束 完 了 。 

eDisable After Forward 

在 正 同 播放 完毕 之 后 ， 束 把 日 标 物体 禁用 了 。 

eDisable After Reverse 

在 反问 播放 完毕 之 后 ， 束 把 日 标 物体 禁用 了 。 

9. On Finished 

动画 播放 完毕 之 后 的 触发 事件 函数 。 设 置 方法 融 不 多 讲 了 ， 前 面 
讲解 控件 时 讲 过 。 

需要 注意 的 是 ， 我 们 一 般 都 会 将 动画 播放 完毕 之 后 的 回调 函数 放 
到 这 里 ， 而 不 是 放 到 单个 Tween 的 OnFinished 中 。 


4.8.3 使 用 UIPlayTween 的 注意 事项 


UIPlayTween 是 一 个 非 钊 有 用 的 组 件 ， 它 几乎 和 Tween 动 画 形 影 不 
离 ， 它 不 仅 可 以 整 组 控制 Fween 动 画 的 播放 ， 还 可 以 按照 事件 来 触发 
Tween 动 画 的 播放 ， 还 有 丰富 的 辅助 功能 。 但 是 ， 我 们 在 使 用 
UIPlayTween 来 进行 动画 控制 的 时 候 ， 要 注意 以 下 一 些 事情 。 

(1) 最 重要 的 一 条 ，UIPlayTween 需要 接收 各 种 事件 ， 所 以 ， 确 
你 它 所 在 的 物体 号 上 有 BoxCollider 组 件 。 

(2) 千 万 要 注意 UIPlayTween 的 TweenGroup 和 目标 物体 身上 Tween 
动画 的 Group。 因 为 ， 它 们 的 默认 值 都 为 0， 如 果 不 注意 的 话 ， 它 会 
接 把 目标 物体 导 上 所 有 的 Tween 动 男 一 起 控制 了 。 

(3) 谍 慎 使 用 Include Children， 特 别 是 在 还 不 确定 子 物体 将 会 
哪些 Tween 动 画 时 。 

(4) 一 般 来 说 ， 假 设 我 们 需要 一 批 Tween 动画 都 播放 结束 后 ， 触 
发 某 事 件 函 数 ， 最 好 将 函数 挂 在 UIPlayTween 的 OnFinished 中 ， 利 于 维 
护 。 


(5) 如 果 我 们 不 事先 禁用 目标 物体 身上 的 Tween 动画 ， 那 么 它 在 
物体 激活 时 就 会 直接 开始 播放 〈 也 就 是 Tween 动 画 组 件 目 身 的 规则 它 会 
照常 执 行 ，， 所 以 一 般 情 况 下 ， 我 们 会 事先 禁用 目标 物体 映 上 的 Tween 
动画 组 件 ， 让 它 完全 交 由 UIPlayTween 来 控制 激活 组 件 和 播放 。 


4.9 动画 控制 组 件 UIPlayAnimation 
4.9.1 为 什么 要 用 UIPlayAnimation 


我 们 还 是 首先 来 了 解 一 下 什么 是 UIPlayAnimation 。 
UIPlayAnimation 是 NGUI 目 市 的 一 个 动画 控制 的 脚本 组 件 。 它 和 
UIPlayTween 几乎 是 一 模 一 样 的 功能 ， 最 大 的 区 别 是 UIPlayTween 是 控 
制 目 标 物体 吴 上 的 Tween 动 画 ， 而 UIPlayAnimation 是 控制 日 标 物体 号 上 
的 Animation 动 画 。 

我 们 知道 Animation 动 画 是 利用 Unity 自 珊 的 Animation 系 统制 作出 的 
AnimationClip 〈 动 画 剪 辑 ) ， 然 后 将 这 个 AnimationClip 挂 到 物体 号 上 
的 Animation 组 件 中 (这 个 组 件 下 面 会 讲 如 何 添加 ) ， 实 现 和 Tween 动 
画 一 样 的 用 途 。UIPlayAnimation 的 出 现 就 是 为 了 控制 目标 物体 量 上 的 


AnimationClip ° 


4.9.2 为 UI 添加 Animation 组 件 


为 UI 沐 加 Animation 组 件 的 方法 是 ， 依 次 选择 
AddCompent 一 Miscellaneous ~ Animation， 然 后 得 到 如 图 4.14 所 示 的 
Animation 组 件 ， 将 AnimationClip 文 件 从 Project 视 图 中 拖 动 到 第 一 个 
AnimationClip 设 置 项 中 即 可 完成 默认 动画 的 设置 。 
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A 图 4.14 

需要 注意 的 是 ， 在 使 用 Tween 动 画 时 ， 如 果 要 为 UI 添 加 多 个 Tween 
动画 ， 我 们 的 方法 是 添加 多 个 Tween 动 画 组 件 。 而 使 用 AnimationClip 
时 ， 如 果 我 们 要 为 UI 添加 多 个 AnimationClip， 则 我 们 只 需要 使 用 一 个 
Aniamtion 组 件 即 可 ， 只 需要 将 Animation 组 件 中 的 Size (这 个 选项 代表 
着 该 物体 量 上 AnimationClip 的 个 数 ) 设 为 一 个 想 要 的 数量 ， 就 会 出 现 
图 4.15 所 示 的 界面 ， 会 多 出 相应 数量 的 AnimationClip 设 置 项 ， 然 后 只 需 
要 将 AnimationClip 都 拖 上 去 即 可 。 
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A 图 4.15 
我 们 最 初 设置 的 第 一 项 Animation 是 默认 的 Animation， 类 似 于 
Tween 一 样 ， 组 件 激活 就 会 自动 播放 ， 就 像 状态 中 的 默认 状态 一 样 ， 其 
实 这 一 项 Animation 不 设置 也 没有 关系。 而 其 他 这 么 多 的 AnimationClip 


怎么 来 控制 呢 ? 在 旧版 本 的 Unity 中 ， 程 序 员 一 般 是 通过 代码 来 控制 不 
同 的 动画 播放 ， 而 在 NGUI 中 ， 因 为 这 些 动画 都 是 针对 UI 的 ， 所 以 ， 可 
以 利用 NGUI 目 市 的 UIPlayAnimation 更 方便 地 进行 控制 。 


4.9.3 动画 核心 组 件 UIPlayAnimation 讲 解 


再 次 强调 ， 虽 然 AnimationClip 是 通过 Unity 的 Animation 系统 制 
作出 来 的 ， 但 是 UIPlayAnimation 组 件 是 NGUI 的 一 个 组 件 。 它 的 添加 方 
法 为 : 依次 选择 AddCompent 一 NGUI Interaction PlayAnimation 。 

UIPlayAnimation 组 件 的 设置 界面 如 图 4.16 所 示 ， 我 们 先 来 了 解 一 下 
这 个 组 件 ， 虽 然 它 的 功能 和 UIPlayTween 大 体 差 不 多 ， 但 是 在 设置 上 还 
是 有 一 些 区 别 。 
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A 图 4.16 
1. Animation 
第 一 行 的 Animator 我 们 不 需要 设置 也 无 法 设置 ， 这 里 就 不 讲 了 。 
需要 设置 的 第 一 个 项 是 Animation， 这 里 设置 的 其 实 是 一 个 带 有 
Animation 组 件 的 物体 ， 并 不 是 一 个 AnimationClip! 
我 们 需要 确保 这 个 UIPlayAnimation 组 件 控制 的 目标 物体 身上 有 一 
个 Animation 组 件 (上 一 小 节 讲 到 的 组 件 ) ， 然 后 将 这 个 目标 物体 拖 动 


到 这 个 Animation 设 置 项 中 来 ， 即 可 完成 设置 ， 和 UIPlayTween 中 设置 
Target 是 一 样 的 原理 。 

2. StateName 

需要 播放 的 动画 片段 的 名 称 。 

我 们 也 许 在 目标 物体 身上 的 Animation 组 件 中 添加 了 很 多 的 
AnimationClip， 而 这 里 的 StateName 驶 是 填写 要 播放 哪 一 个 动画 ， 填 入 
的 是 动画 的 名 称 ， 必 须 保 证 这 里 填 入 的 名 称 和 目标 物体 届 上 相应 的 
AnimationClip 的 名 称 完 全 一 致 ， 包 括 大 小 写 。 

3. Trigger condition 

和 UIPlayTween 一 样 。 

4. Play direction 

和 UIPlayTween 一 样 。 

5. Selected object 

对 选中 的 物体 的 设置 ， 一 般 保 持 它 为 默认 的 KeepCurrent 即 可 。 

6. Ifdisabled on start 

和 UIPlayTween 一 样 。 

7. If already playing 

和 UIPlayTween 一 样 。 

8. When finished 

和 UIPlayTween 一 样 。 

9. Onfinished 

和 UIPlayTween 一 样 。 


4.9.4 使 用 UIPlayAnimation 注 意 事项 


UIPlayAnimation 在 使 用 的 时 候 ， 和 UIPlayTween 还 是 有 一 些 区 别 ， 
我 们 在 使 用 时 ， 要 注意 以 下 一 些 事项 。 


(1) 最 重要 的 一 条 ， UIPlayAnimation 需要 接收 各 种 事件 ， 所 以 ， 
确 你 它 所 在 的 物体 号 上 有 BoxCollider 组 件 。 

(2) UIPlayAnimation 没 有 Group ， 目 标 物 体 的 Animation 组 件 中 也 
没有 Group， 所 以 ， 单 个 UIPlayAnimation 组 件 是 无 法 整 组 控制 一 批 
AnimationClip 的 播放 。 

(3) 确保 目标 物体 身上 有 Animation 组 件 ， 并 且 确 保 
UIPlayAnimation 组 件 中 填写 的 StateName 和 目标 物体 身上 Animation 组 
件 中 的 相应 的 AnimationClip 名 称 完全 一 致 ， 为 ， 它 的 判断 方式 是 字 
符 串 相等 。 

(4) 使 用 Animation 来 制作 UI 的 动画 时 ， 我 们 一 般 不 需要 事先 就 
禁用 目标 物体 身上 的 Animation 组 件 。 


5 组 


5.1 使 用 Toggle 制 作 页 签 
5.1.1 页 签 的 工作 原理 


页 等 的 功能 ， 相 信 大 家 都 非常 遇见 ， 页 釜 会 将 内 
同一 时 间 内 ， 只 能 选中 一 个 页 签 ， 并 且 只 显示 该 页 釜 所 属 的 内 容 。 这 
个 功能 和 我 们 讲解 Toggle 制 作 复 选 框 时 有 些 相似 ， 其 实 页 签 就 是 一 个 单 
选 框 ， 由 多 个 同 组 的 开关 (Toggle) 组 成 ， 同 一 时 间 只 能 选中 一 个 选 
项 。 

页 等 和 这 个 单 选 框 功能 的 区 别 融 是 ， 页 等 中 包含 有 要 显示 的 内 
容 。 当 切换 开关 时 ， 人 并 且 还 要 将 当前 选 
中 的 开关 所 包含 的 内 容 显 示 出 来 ， 这 就 古 页 签 的 功能 原理 。 

在 制作 页 俭 时 ， 我 们 的 思路 也 是 先 使 用 Toggle 制 作 一 系列 同 组 的 开 
关 ( 单 选 框 ) ， 然 后 为 每 一 个 开关 再 增加 一 个 ToggleObjects 组 件 ， 通 过 
ToggleObjects 组 件 来 设 定 每 个 开关 包含 的 内 容 。 当 该 开关 没有 人 被 激活 时 
( 即 该 页 签 没 有 被 选中 ) ， 它 所 包含 的 内 容 会 自动 隐藏 (包含 的 物体 
被 Disable 掉 ) ， 当 该 开关 被 选中 时 ， 它 所 包含 的 内 容 会 目 动 激活 显 
直下 


5.1.2 一 个 完整 的 页 签 界面 


下 面 我 们 就 来 试 着 做 一 个 简单 的 页 签 ， 我 们 将 要 做 的 页 签 效 果 如 
图 5.1 和 图 5.2 所 示 。 


5.1.3 个 页 签 按 钮 


为 了 制作 出 如 图 5.1 和 图 5.2 所 示 的 页 签 界 面 ， 我 们 从 图 中 观察 得 
知 ， 这 个 范例 界面 一 共 只 有 两 页 ， 所 以 先 来 制作 两 个 页 签 按钮 。 


第 一 页 的 内 容 


A 图 5.2 
(1) 先 创建 一 个 3DUI (2DUI 也 可 以 ) ， 然 后 在 UIRoot 下 生成 两 
个 Sprite， 分 别 将 它们 命名 为 Button1 和 Button2。 
(2) 选择 NGUI 自 带 的 WoodenAtlas 中 的 window 作 为 Sprite 的 图 片 
资源 ， 然 后 将 Sprite 改 为 Sliced 模式 ， 设 定 它 的 尺寸 到 想 要 的 大 小 。 然 
后 为 Button1 和 Button2 分 别 Attach 一 个 BoxCollider。Inspector 面 板 如 
图 5.3 所 示 。 


A 图 5.3 
(3) 分 别 在 Button1 和 Button2 下 创建 一 个 Label 作 为 子 物体 ， 


Button1 下 的 Label 的 文本 写 上 “第 一 页 "”，Button2 下 的 Label 的 文本 写 上 
“第 二 二 页 ” 省 


(4) 分 别 在 Button1 和 了 Button2 下 创建 一 个 Sprite 作 为 子 物 体 ， 这 个 
子 物体 将 来 表示 该 页 签 补 选中 了 ， 我 们 选用 NGUI 目 带 的 WoodenAtlas 


中 的 Highlight-Thin 作 为 Sprite 的 图 片 ， 并 改变 它 的 颜色 为 纯 红色 。UI 结 
构 和 子 物体 的 Sprite 组 件 如 图 5.4 所 示 。 


A 图 5.4 
(5) 分 别 为 Button1 和 Button2 附 加 一 个 Toggle 组 件 ， 将 它们 的 
Group 都 设 为 1， 并 且 将 Buttonl 的 Toggle 的 Starting State 义 上 ， 表 示 
Button1 为 默认 显示 的 页 签 。 然 后 将 Button1l 和 Button2 下 面 用 来 表示 选 
中 状态 的 Sprite 子 物体 分 别 拖 到 Button1 和 Button2 的 Toggle 组 件 的 Sprite 


设置 项 中 ， 这 里 注意 不 要 和 弄 混 了 。Button1 和 Button2 的 Toggle 组 件 如 图 
5.5 所 示 。 
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tate of None 
: ig State Vv 
TState Transition 
prite Sprite (UISprite) Buttont 的 隆 物 体 
Animation None (Animation) 
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VUIToggle (Script) 
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State of None Button2 
starting State 
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Anmlirmation None (Animation) 


Transition smaooth 


¥ On Value Change 


Notit None (MonoBehaviour) 


A 图 5.5 
到 此 为 止 ， 就 制作 好 了 两 个 页 签 按 钮 ， 我 们 可 以 看 到 它们 看 上 去 
都 处 于 激活 状态 ， 不 过 没有 关系 ， 运 行 游戏 时 ， 它 们 就 会 变 成 正常 状 
态 ， 可 以 自由 地 切换 ， 如 图 5.6 所 示 。 


习作 完成 时 直到 的 撤 钮 而 而 


运行 时 看 到 的 按钮 画面 


A 图 5.6 


5.1.4 使 用 ToggleObjects 来 记录 页 签 内 容 


我 们 首先 需要 制作 两 个 页 签 所 需要 显示 的 页 面 ， 从 图 5.1 和 图 5.2 可 
以 看 到 ， 两 个 页 签 需要 显示 的 内 容 很 简单 ， 页 签 1 显示 的 是 一 个 绿色 的 
面板 ， 上 写 着 “第 一 页 的 内 容 ”;， 页 签 2 显示 的 是 一 个 红色 的 面板 ， 上 写 
春 “ 第 二 页 的 内 容 ”。 

我 们 先 制作 两 个 Sprite 分 别 命 名 为 Tab1 和 Tab2， 然 后 使 用 NGUI 自 带 
的 WoodenAtlas 的 Highlight-Thin 作 为 图 片 ， 将 它 的 尺寸 设 定 为 需要 的 大 
小 ， 调 整 好 颜色 ， 并 且 分 别 在 这 两 个 Sprite 下 创建 一 个 Label 子 物体 ， 
文本 内 容 分 别 写 上 “第 一 页 的 内 容 * 和 “第 二 页 的 内 容 *”。 上 一 小 厄 我 们 做 
好 了 两 个 页 签 按钮 ，Button1 页 签 需要 显示 的 内 容 就 是 Tabl ，Button2 
需要 显示 的 内 容 为 Tab2 。 

然后 为 Button1 和 Button2 这 两 个 页 签 按钮 分 别 增 加 一 个 组 件 : 
ToggleObjects。 增 加 方法 为 : 依次 选择 
AddCompent 一 NGUI 一 Interaction ~ ToggleObjects。 组 件 界 面 如 图 5.7 所 
示 。 


A 图 5.7 
在 Activate 设 置 中 ， 就 可 以 设置 这 个 开关 被 选中 时 ， 需 要 显示 的 内 
容 ， 这 些 内 容 在 该 页 签 没 有 被 选中 时 会 自动 隐藏 ， 只 有 当 该 页 签 被 选 
中 时 ， 才 会 目 动 显 示 出 来 。 
在 Activate 设 置 中 ， 可 以 设 定 该 页 签 包含 的 内 容 有 多 少 个 物体 ， 目 


前 情况 下 ， 每 个 页 签 只 需要 显示 一 个 物体 即 可 ， 所 以 将 Size 设 为 1， 然 
后 会 多 出 一 个 Element0， 让 我 们 设 定 第 一 个 内 容 元 素 。 我 们 将 Tabl 物 体 


拖 动 到 Button1 的 UIToggledObjects 的 Element0 中 ， 同 理 将 Tab2 物 体 拖 动 
到 Button2 的 UIToggledObjects 的 Element0 中 ， 就 算 完成 了 页 签 包 含 内 容 
的 设 定 。 

我 们 的 页 签到 此 就 算 制 作 完成 ， 制 作 完 后 ， 从 Game 视 图 中 看 到 的 
情况 如 图 5.8 所 示 ， 可 以 看 到 页 签 的 内 容 都 重合 在 一 起 了 ， 没 有 关系 ， 
在 运行 游戏 时 ， 没 有 被 选中 的 页 签 会 自动 隐藏 擅自 己 需 要 显示 的 内 


PF 


民 


制作 完成 的 Game 视 图 运行 游戏 时 的 Game 视 图 


A 图 5.8 


5.1.5 制作 页 签注 意 事项 


制作 页 签 时 ， 我 们 需要 注意 以 下 事项 。 
(1) 确保 每 个 页 签 身 上 都 有 BoxCollider 。 
(2) 确保 每 个 页 签 身 上 都 有 UIToggle 和 UIToggleObjects 两 个 脚 
本 o 
(3) 确保 所 有 的 页 签 身 上 的 Toggle 的 Group 一 致 ， 且 不 为 0。 


(4) 我 们 并 不 需要 提前 去 禁用 某 些 物体 或 组 件 ， 一 切 都 会 在 运行 
游戏 时 目 动 处 理 。 

(5) 这 并 不 是 制作 页 签 功能 的 惟一 准则 ， 当 我 们 明白 了 页 签 的 原 
理 后 ， 可 以 目 由 按照 目 己 的 想法 去 实现 页 等 效 果 。 


5.2 抑 二 浏览 
5.2.1 抠 友 功能 的 介 乡 WV 用 


所 请 超大 界面 ， 一 般 来 说 ， 指 一 个 完整 的 界面 非常 上 庞大， 视图 大 
小 已 经 超过 了 摄像 机 的 照射 范围 ， 也 残 是 一 屏幕 之 内 无 法 完全 显示 ， 
一 般 来 说 这 种 超大 界面 应 用 于 2D 游 戏 中 ， 经 常 作为 一 个 Scene 的 背景 图 
存在 。 

超大 界面 在 游戏 中 有 着 广泛 的 运用 ， 例 如 ， 世 界 地 图 的 查看 ， 因 
为 世界 地 图 很 大 ， 需 要 拖 动 地 图 来 进行 查看 。 再 比如 SLG (经 营 策略 
类 ) 游戏 中 ， 经 常会 涉及 主 城 场景 视图 的 拖 动 。 

我 们 之 前 讲解 ScrollView 时 ， 讲 过 ScrollView 的 主要 目的 是 为 了 让 
一 个 Panel 显 示 不 完 的 内 容 可 以 通过 请 动 来 方便 地 进行 浏览 。 但 是 ， 这 
里 的 情况 不 是 特别 一 样 ， 本 下 讲解 的 超大 界面 ， 一 般 是 整个 屏幕 都 用 
来 显示 这 个 界面 (这 个 界面 一 般 都 是 背景 ， 而 且 还 显示 不 完全 ， 我 
们 浏览 时 ， 需 要 借助 拖 动 摄像 机 来 自由 浏览 ， 而 且 摄 像 机 还 不 能 被 拖 
出 边界 (否则 会 看 到 界面 以 外 的 东西 ) 。 

图 5.9 展 示 了 本 章 需 要 讲解 的 超大 界面 浏览 的 一 个 实例 : 图 5.9 中 的 
背景 图 尺寸 大 小 远 远 超过 了 2D 正 交 相 机 的 照射 范围 ， 需 要 快速 实现 拖 
动 摄像 机 来 浏 抽 整 个 背景 岁 的 功能 ， 同 时 要 求 摄像 机 不 能 照射 到 背景 
图 之 外 的 地 方 ， 否 则 会 画面 穿帮 。 


Fle Edit Assets GameObject Componemt NGUI Window Help 
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和 图 5.9 
图 5.10 展 示 了 本 节 要 讲解 的 功能 中 ， 相 机 的 拖 动 边界 的 概念 。 
图 5.10 中 4 个 蓝 色 部 分 ， 就 是 该 功能 下 相机 的 4 个 极限 位 置 。 


分 为 相机 的 照射 范围 蓝 色 部 


E 色 部 分 为 相机 的 照射 范围 监 色 郑 分 为 相机 的 照射 范围 


A 图 5.10 
5.2.2 核心 原理 和 组 件 介 乡 
核心 组 件 原理 如 图 5. 11 所 示 。 


一 个 很 大 的 背景 


51 
| 


设置 为 相机 的 
可 拖 动 范围 


使 该 相机 人 允许 被 拖 动 


人 接收 拖 动 事 UIDrag Camera 组 件 ， 使 该 


A 图 5.11 


如 图 5.11 所 示 ， 可 以 看 到 该 功能 主要 用 到 了 两 个 核心 组 件 : 
UIDraggable Camera 和 UIDrag Camera ° 

首先 来 了 解 一 下 UIDraggable Camera 组 件 ， 该 组 件 必须 添加 到 摄 
像 机 物体 上 ， 它 的 作用 是 使 附 大 的 摄像 机 变 为 可 拖 动 的 。 该 组 件 的 添 
加 方式 为 :依次 选择 AddCompent 一 NGUI ~ Interaction ~ Draggable 
Camera。UIDraggable Camera 组 件 的 设置 界面 如 图 5.12 所 示 ， 我 们 来 
了 解 一 下 组 件 的 设置 。 


VUIDraggable Camera (Script) 
Script 国 UIDraggableCamera 
Root For Bounds Background (Transform 


A 图 5.12 

1. Root For Bounds 

这 是 最 重要 的 一 个 设置 项 : 相机 拖 动 的 范围 边界 。 

在 设置 这 个 选项 时 ， 我 们 不 能 直接 将 背景 图 拖 进去 ， 需 要 将 背景 
图 的 根 物体 拖 进 去 (可 以 是 父 物体 ) ， 如 图 5.9 中 ， 我 们 的 背景 图 是 
Texture， 但 是 ， 我 们 设置 摄像 机 的 拖 动 边界 时 ， 会 把 Texture 的 父 物体 
Background 拖 进 去 ， 这 样 它 将 会 目 动 计算 出 这 个 物体 包含 的 内 容 的 边 
界 (NGUITools 类 中 有 类 似 辑 数 ， 一 共 会 得 出 minX、maxX、minY 、 
maxY4 个 值 ) ， 来 限定 摄像 机 的 移动 边界 。 

2. Scale 

可 以 理解 为 相机 被 拖 动 时 在 X 和 Y 上 的 速度 。 

3. ScrollWheelFactor 

讲解 ScrollView 时 讲 过 ， 鼠 标 滚轮 的 影响 系数 。 

4. Drag Effect 

和 ScrollView 一 样 ， 详 情 参 看 ScrollView 的 讲解 。 


为 了 保证 相机 完全 不 被 拖 到 边界 以 外 ， 我 们 一 般 选 择 None， 也 就 
是 没有 拖 动 效果 。 否 则 惯性 和 弹性 可 能 会 导致 相机 拖 动 时 看 到 背景 
以 外 的 内 容 。 

5. Smooth Drag Start 

和 ScrollView 一 样 ， 详 情 参 看 ScrollView 的 讲解 。 

6. Momentum Amount 

和 ScrollView 一 样 ， 详 情 参 看 ScrollView 的 讲解 。 

然后 我 们 再 来 了 解 一 下 Drag Camera 组 件 ， 该 组 件 一 般 附着 在 一 个 
具有 BoxCollider 的 物体 上 ， 以 此 来 接收 拖 动 事件 ， 来 使 摄像 机 拖 动 ， 
但 是 一 定 要 注意 : 这 个 物体 本 吴 是 不 会 被 拖 动 的 ， 因 为 我 们 无 法 看 到 
相机 也 无 法 直接 操作 相机 ， 所 以 我 们 需要 这 么 一 个 超过 相机 视图 面积 
的 BoxCollider 来 接收 到 的 拖 动 事件 ， 它 的 拖 动 事件 会 被 
DraggableCamera 和 DragCamera 两 个 组 件 转化 为 了 相机 的 拖 动 事件 。 

通常 情况 下 ， 我 们 可 以 将 该 组 件 附 着 在 背景 图 上 ， 并 为 背景 图 附 
加 BoxCollider， 证 背景 图 来 充当 拖 动 摄像 机 的 事件 接收 者 ， 因 为 背景 
图 足够 大 并 永远 不 会 消失 在 视野 中 (相机 会 被 设 定 边界 ， 不 能 拖 到 背 
景 图 边界 以 外 的 地 方 ) 。 不 过 也 可 以 新 创建 一 个 空 的 GameObject， 通 
过 AddCompent 一 Physics ~ BoxCollider 为 它 附 上 一 个 很 大 〈 比 相机 的 移 
动 范围 还 大 ， 永 远 在 相机 的 照射 范围 内 ) 的 BoxCollider， 然 后 为 它 附 
上 DragCamera 组 件 ， 以 这 个 至 物体 来 作为 相机 的 拖 动 事件 的 接收 体 。 

本 文 以 背景 图 作为 相机 拖 动 事件 的 接收 体 来 作为 案例 讲解 。 我 们 
为 背景 图 Attach 一 个 BoxCollider， 然 后 为 它 附 加 一 个 DragCamera 组 
件 ， 方 法 为 : 依次 选择 AddCompent-NGUI-~ Interaction > Drag 
Camera。 这 个 组 件 的 设置 界面 如 图 5.13 所 示 ， 我 们 先 来 了 解 一 下 它 的 
设置 。 


UIDrag Camera (Script) 
S erint 


Ip 国 UIDragCamera 


Draggable Camera 网 Camera (UIDraggableCamera) 


A 图 5.13 

从 图 5.13 中 可 以 看 到 ，Drag Camera 组 件 的 设置 非常 简单 ， 将 我 们 
要 拖 动 的 摄像 机 拖 动 到 DraggableCamera 设置 项 中 即 可 ， 但 是 注意 ， 必 
须 人 确保 被 设置 的 摄像 机 号 上 有 DraggableCamera 组 件 。 

然后 运行 游戏 ， 我 们 拖 动 背景 图 ， 可 以 看 到 相机 也 被 拖 动 了 ， 并 
且 相 机 永远 都 在 背景 图 苑 围 内 照射 ， 这 样 殴 可 以 拖 动 来 浏览 整个 背景 
视 网 的 全 狐 了 。 

需要 注意 的 是 ， 虽 然 我 们 是 拖 动 背景 图 来 实现 相机 的 拖 动 ， 但 其 
实 育 景 图 本 质 上 十 没有 动 的 ! 我 们 对 背景 图 的 拖 动 事件 ， 被 
UIDraggableCamera 和 UIDragCamera 两 个 组 件 转化 为 了 相机 的 拖 动 事 
件 。 


5.2.3 拖 动 相机 浏览 超大 界面 的 注意 事项 


这 个 功能 在 制作 2D 游 戏 中 有 非常 广泛 的 应 用 。 我 们 在 使 用 这 个 功 

能 时 ， 需 要 注意 以 下 事项 。 

(1) 尽量 确保 相机 是 正 交 相机 ， 这 样 可 以 完美 地 得 到 图 片 边界 。 
一 定 要 保证 相机 的 窗口 大 小 没有 超出 背景 大 小 。 

(2) 在 整个 Scene 大 背景 都 需要 被 浏览 时 ， 才 使 用 这 个 功能 。 界 
面 内 部 的 拖 动 浏览 还 是 使 用 ScrollView 更 好 一 些 。 

(3) 一 定 要 设置 背景 物体 的 父 物体 作为 DraggableCamera 组 件 的 边 
界 设置 ， 这 样 可 以 避免 很 多 问题 。 

(4) DraggableCamera 的 拖 动 效果 最 好 设 为 None， 否 则 拖 动 到 边 
界 时 ， 摄 像 机 会 因为 惯性 超出 边界 。 


(5) 确保 各 组 件 正 常 关联 ， 接 收 拖 忠 事件 的 背景 图 (或 一 个 比 背 
景 图 更 大 的 空 物体 ) 有 BoxCollider 和 Drag Camera， 并 设置 了 有 具体 要 拖 
动 哪 一 个 摄像 机 。 

(6) 深刻 理解 这 个 方法 和 ScrollView 的 原理 上 的 不 一 样 : 
ScrollView 是 拖 动 剪辑 视窗 内 的 内 容 来 完成 拖 动 浏 贤 。 而 本 文中 讲解 的 
方法 虽然 拖 动 的 是 要 浏 贤 的 内 容 ， 但 是 ， 拖 动 事 件 补 转化 为 了 相机 的 
拖 动 事件 ， 所 以 ， 内 容 其 实 没有 动 ， 动 的 是 摄像 机 。 


5.3 Grid 目 动 排列 UI 
5.3.1 自动 排列 UI 的 应 用 


在 游戏 中 ， 我 们 会 经 常 碰 到 UI 需 要 排列 的 情况 ， 比 如 我 们 有 4 个 选 
项 ， 我 们 希望 它们 一 字 排 开 ， 一 般 情 况 下 我 们 的 做 法 是 手动 去 定义 这 4 
个 选项 的 位 置 ， 但 是 ， 手 动 定 义 的 位 置 的 同时 ， 要 使 每 个 UI 元 系 之 间 
的 间隔 相同 会 比较 麻烦 ， 而 且 如 采 要 排列 动态 加 载 的 元 素 那 更 是 比较 
矿 烦 。 这 个 时 候 ， 束 需要 一 个 工具 来 自动 按照 一 定 的 间距 方式 排列 
UI。 


5.3.2 自动 排列 UI 核心 组 件 Grid 介 乡 


Grid 二 我 们 目 动 排列 UI 元 素 的 一 个 季 用 组 件 。 写 的 用 途 是 让 UI 元 
素 按照 一 定 的 间距 来 网 格 化 排列 。 一 般 情 况 下 ， 我 们 会 创建 一 个 Grid 
物体 ， 然 后 将 需要 排列 的 UI 元 素 放 入 这 个 Grid 物体 下 作为 子 物体 存 
在 ， 如 图 5.14 所 示 。 


A 图 5.14 

Grid 的 创建 方法 有 两 个 ， 第 一 种 方法 是 选中 要 创建 Grid 的 UIT 点 ， 
然后 通过 Unity 顶 部 NGUI 荣 单 中 Creat- Grid 即 可 。 第 二 种 方式 是 创建 一 
个 空 物 体 到 UI 市 点 下 ， 调 整 它 的 层 和 UI 一 样 ， 然 后 为 这 个 空 物体 增加 
一 个 UIGrid 的 组 件 ， 添 加 这 个 组 件 的 方法 为 依次 选择 
AddCompent =» NGUI— Interaction 一 Grid。 

创建 好 后 的 Grid 组 件 设置 界面 如 图 5.15 所 示 ， 我 们 先 来 了 解 一 下 
Grid 组 件 的 设置 。 


图 忌 UIGrid (Script) 
Arrangement 


A 图 5.15 


1. Arrangement 

这 和 是 设置 网 格 的 排列 方向 ， 目 前 只 文 持 两 种 方式 : 水 平 排列 和 纵 
向 排列 。 

2. CellWidth 

每 一 个 网 格 的 宽度 。 


Grid 的 排列 原理 是 先 制造 出 一 系列 整齐 的 网 格 ， 然 后 将 每 个 UI 元 
素 置 于 网 格 中 。 

3. CellHeight 

每 一 个 网 格 的 高 度 

4. ColumnLimit 

数量 限制 ， 默 认为 0 无 限制 。 一 般 情况 下 ， 不 需要 去 限制 它 排列 
的 数量 ， 保 持 默 认 束 可 以 。 


5. Pivot 
销 点 ， 也 就 是 网 格 的 起 始点 ， 一 共有 9 个 点 。 默 认为 左上 角 开 始 排 
列 网 格 。 


6. 其 他 组 件 

我 们 一 般 不 需要 进行 设置 。 

如 图 5.16 所 示 ， 创 建 了 5 个 Sprite (每 个 Sprite 为 一 个 方块 ) 在 Grid 
下 ， 然 后 设置 Grid 为 水 平 排列 ， 每 个 网 格 大 小 为 200*200， 图 5.16 即 为 
运行 游戏 之 后 看 到 的 情况 。 


A 图 5.15 


使 用 DragObject 直 接 拖 动 物体 

当 我 们 需要 让 某 个 物体 可 以 任意 被 拖 动 时 ， 一 般 情 况 下 会 去 写 脚 
本 监听 用 户 的 拖 动 操 作 ， 然 后 改变 物体 的 位 置 。 在 NGUI 中 ， 如 采 需 要 
拖 动 某 个 UI， 完 全 不 需要 自己 写 脚本 ， 只 需要 为 该 UI 物体 附 上 一 个 接 
收 事件 的 BoxCollider， 然 后 为 它 添加 一 个 DragObject 组 件 即 可 。 


DragObject 组 件 添加 的 方法 为 ， 依 次 选择 
AddCompent 一 NGUI 一 Interaction ~ Drag Object。 该 组 件 的 设置 面板 如 
图 5.17 所 示 ， 我 们 移 来 了 解 一 下 它 的 设置 。 


VUIDrag Object (Script) 
net 


sprite (Transtorm 


A 图 5.17 

1. Target 

目标 物体 。 指 的 是 拖 动 这 个 物体 ， 会 导致 哪 一 个 物体 移动 。 一 般 
情况 下 ， 会 把 物体 自身 拖 动 到 这 里 完成 设置 。 

2. Movement 

移动 的 灵敏 度 ， 可 以 设置 XYZ 的 值 ， 一 般 拖 动 UI 都 症 在 一 个 平面 
内 拖 动 ， 所 以 ， 大 部 分 情况 下 设置 好 X 和 Y 的 值 即 可 。 

3. ScrollWheel 

深 轮 的 灵敏 系数 ， 需 要 的 话 可 以 设置 。 

4. DragEffect 

和 ScrollView 的 拖 动 效 采 一 样 ， 这 里 就 不 多 介绍 了 。 

5. Momentum 

动能 ， 和 ScrollView 的 动能 设置 一 样 。 

6. KeepVisible 

让 被 拖 动 的 UI 物体 永远 在 一 个 矩形 内 保持 可 见 ， 一 般 情况 下 不 需 
要 设置 ， 如 果 人 勾 选 ， 则 会 目 动 多 出 一 个 UIRect 的 设置 框 。 

我 们 新 创建 一 个 Sprite， 为 它 添加 BoxCollider 和 Drag Object 组 件 并 
完成 设置 之 后 ， 运 行 游 戏 ， 就 可 以 随意 拖 动 记 了 。 


5 让 玩家 通过 拖 二 控件 大 小 


在 游戏 中 ， 也 许 会 碰 到 需要 让 玩家 目 由 拖 大 、 拖 小 UI 控件 的 需 
求 ， 束 像 Windows 系统 的 各 个 窗口 ， 我 们 可 以 拖 动 窗口 的 4 个 角 来 目 由 
地 改变 窗口 的 尺寸 一 样 。 面 对 这 样 的 需求 ， 一 般 情 况 下 需要 写 很 复 灯 
的 代码 ， 但 是 在 NGUI 中 ， 可 以 很 向 单 地 通过 舌 加 一 个 组 件 实 现 。 

NGUI 中 提供 了 一 个 DragResize 的 组 件 ， 将 它 附着 到 一 个 拥有 
BoxCollider 的 物体 上 ， 束 可 以 通过 拖 动 这 个 物体 来 改变 控件 的 尺寸 。 
DragResize 的 组 件 设 置 界面 如 图 5.18 所 示 ， 我 们 先 来 了 解 一 下 组 件 的 
设置 。 

1. Target 

这 是 设置 扼 动 这 个 物体 需要 改变 哪 一 个 控件 物体 的 尺寸 ? 只 需要 
将 目标 物体 拖 动 到 此 处 即 可 。 

2. Pivot 

这 是 设置 改变 尺寸 的 销 点 ， 即 拖 动 此 物体 时 ， 日 标 物体 的 尺寸 改 
变 是 以 哪个 点 开始 改变 。 例 如 ， 我 们 设置 销 点 为 BottomRight ( 确 部 右 
方 ) ， 那 么 拖 动物 体 时 ， 目 标 控件 的 尺寸 会 由 右 下 点 开始 改变 。 


A 图 5.18 
3. Min/Max Width, Min/Max Height 
设置 尺寸 改变 的 最 大 、 最 小 的 宽度 和 高 度 ， 这 是 为 了 设置 改变 控 
件 尺 寸 的 极限 值 。 


我 们 可 以 创建 一 个 背景 图 ， 在 它 的 右 下 角 创 建 一 个 小 Sprite 作 为 拖 
动 块 ， 按 照 上 文摘 述 的 方法 添加 了 BoxCollider 和 DragResize， 并 完成 设 
置 之 后 如 图 5.19 所 示 ， 运 行 游戏 ， 拖 动 右 下 角 的 小 Sprite， 束 可 以 看 到 
背景 图 的 尺寸 被 改变 了 。 


A 图 5.19 
但 是 我 们 在 拖 动 小 Sprite 的 时 候 可 以 看 到 ， 小 Sprite 和 背景 图 的 相对 
位 置 也 变 了 ， 这 个 没有 关系 ， 我 们 在 后 面 讲 解 UI 位 置 的 适 配 时 会 详细 


讲解 怎样 相对 屏幕 和 物体 来 固定 UI 的 位 置 。 


5.6 制作 序列 帧 精灵 动画 
ee ) 


5.6.1 负 灵动 画 


所 谓 的 序列 帧 动画 ， 就 是 将 动画 制作 成 一 系列 的 单 帧 图 片 ， 然 后 
迅速 地 依次 序 蔡 换 这 些 图 片 达到 播放 的 效果 。 所 谓 的 序列 帧 精灵 动 
画 ， 是 指 将 一 系列 序列 帧 当成 Sprite 放 置 到 一 个 图 集 内 ， 通 过 让 这 个 
Sprite 依 次 蔡 换 来 达到 播放 的 效 末 。 

在 2D 游 戏 中 ， 所 有 的 动画 效果 都 是 序列 帧 动画 ， 包 括 了 角色 动 
` 特效 等 。 而 在 3D 游 戏 中 ， 在 很 多 UI 特 效 上 ， 也 有 可 能 用 到 精灵 动 


功 | 瑟 | 


在 NGUI 中 ， 提 供 了 一 种 非常 便捷 的 制作 精灵 动画 的 方式 ， 我 们 可 
以 为 任何 一 个 精灵 赋予 SpriteAnimation 组 件 ， 即 可 让 这 个 精灵 不 停 地 在 
图 集 内 按 次 序 替换 图 片 ， 达 到 动画 效果 。 


5.6.2 SpriteAnimation 组 件 


制作 精灵 动画 ， 必 须 确 保 这 个 物体 上 有 Sprite 组 件 ， 也 就 是 说 必须 
在 Sprite 控 件 上 制作 精灵 动画 。 我 们 将 会 用 到 一 个 NGUI 的 组 件 
SpriteAnimation， 琴 加 方式 为 : 依次 选择 


AddComponent 一 NGUI 一 UI 一 SpriteAnimation。 组 件 界面 如 图 5.20 所 
RR° 
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A 图 5.20 
eFramerate 
帧 率 设置 ， 每 秒 播放 多 少 帧 。 这 里 的 帧 率 和 游戏 的 FPS 泻 染 帧 率 
不 是 一 个 概念 ， 这 里 的 帧 率 是 这 一 套 序列 帧 精灵 动画 每 秒 播放 多 少 


@NamePrefix 


名 称 前 缀 ， 可 以 限定 只 播放 该 Sprite 图 集中 市 有 该 前 缀 名 称 的 精 
灵 。 例 如 ， 我 们 将 待机 动画 和 跑步 动画 都 放 到 一 个 图 集 里 ， 待 机 的 图 
厂 名 称 前 级 全 部 都 是 idle， 跑 步 动 画 的 图 片 名 称 前 级 全 部 都 是 un， 这 样 
就 可 以 通过 名 称 前 级 的 设 定 让 动画 只 播放 图 集中 的 一 部 分 精灵 。 

eLoop 

是 否 循环 。 

ePixelSnap 

是 否 保持 原 像素 大 小 进行 播放 ， 如 有 果 人 勺 选 则 图 集中 用 到 的 精灵 图 
厂 都 会 在 播放 时 以 原 像素 大 小 来 展现 。 

使 用 精灵 动画 需要 了 解 的 还 有 一 旦 禁用 精灵 动画 组 件 ， 则 动画 就 
停 了 ， 类 似 于 暂停 的 效果 ， 如 果 我 们 启用 这 个 组 件 ， 则 动画 会 接着 从 
之 前 地 方 继续 播放 。 除 此 之 外 ， 一 定 要 记 住 SpriteAnimation 组 件 完全 
依赖 于 Sprite 组 件 ， 只 有 在 带 有 UISprite 组 件 的 物体 上 添加 
SpriteAnimation 组 件 才 有 效果 。 


第 6 章 NGUI 实 战 进 阶 


6.1 UI 开发 核心 问题 一 UI S 


我 们 使 用 Unity 开 发 的 是 游戏 项 目的 客户 端 部 分 ， 在 开发 时 就 不 得 
不 面 对 一 个 严峻 的 问题 : 不 同 的 显示 设备 有 不 同 的 分 辨 率 和 宽 高 比 。 
这 将 会 对 UI 的 显示 造成 巨大 的 影响 ， 例 如 ， 我 们 在 讲解 UIRoot 的 时 
候 ， 讲 解 过 UIRoot 的 几 种 缩放 UI 的 方式 ， 如 果 是 不 进行 缩放 完全 保持 
原 像素 大 小 ， 那 么 在 分 辩 率 高 的 显示 屏幕 上 UI 将 会 显得 较 小 ， 同 理 在 
分 辩 率 低 的 显示 屏幕 上 UI 会 显得 相对 较 大 。 

一 般 来 说 ， 我 们 UIRoot 都 会 选择 FixSize 的 缩放 模式 ， 这 样 可 以 让 
UI 随 着 分 辨 率 而 自动 缩放 ， 保 持 和 屏幕 相对 的 大 小 比例 不 变 ， 让 UI 整 
体 看 上 去 不 会 有 变 大 变 小 的 奇怪 现象 。 但 是 ， 还 有 男 一 个 真正 严重 的 
问题 : 不 同 屏幕 的 宽 高 比 不 一 样 。 

在 Unity 中 ， 不 同 屏幕 的 宽 高 比 ， 一 般 都 会 以 高 度 为 基准 而 拉 伸 宽 
度 ， 比 如 4:3 的 屏幕 换 到 16:9 的 屏幕 上 ， 我 们 会 发 现 屏 幕 被 拉 宽 了 “。 如 
图 6.1 和 图 6.2 所 示 ， 图 6.1 中 我 们 在 4:3 的 屏幕 模式 下 的 4 个 角 放 上 了 一 
个 UI 图 片 ， 然 后 将 屏幕 模式 切换 到 16:9 下 ， 会 出 现 图 6.2 所 示 的 画面 。 


4:3 屏 晤 下 的 Up 局 


A 图 6.1 


将 刚才 4:3 屏 章 下 的 UI 布 局 切换 到 
TI6:9 屏 看 模式 下 ， 我 们 可 以 看 到 屏 晶 
术 “ 拉 长 ”了 ,UI 位 置 没 有 站 ， 


A 图 6.2 
切换 屏幕 比例 模式 的 方法 为 单 击 图 6.3 所 示 的 位 置 (Game 视 图 
中 ) ， 会 出 现 图 6.3 所 示 的 屏幕 比例 菜单 ，FreeAspect 为 不 限 长 宽 比 ， 我 
们 可 以 在 其 中 选择 想 要 的 长 宽 比 。 


A 图 6.3 
如 果 屏 幕 比例 菜单 中 没有 想 要 的 屏幕 比例 ， 可 以 单 击 亲 单 最 底部 
那个 小 小 的 加 号 按钮 ， 会 弹出 图 6.4 所 示 的 界面 来 让 我 们 自 定 义 一 个 新 
的 屏幕 比例 模式 ， 图 6.4 中 的 Label 选 项 中 ， 可 以 输入 一 个 名 称 来 为 我 们 
这 个 自 定 义 的 屏幕 比例 命名 。 在 Type 中 可 以 选择 FixedResolution 和 
Aspect Ratio 两 个 选项 ， 如 有 果 选 择 FixedResolution， 可 以 在 下 面 的 


Width&Height 中 输入 我 们 的 分 辩 率 的 宽 和 高 的 具体 像素 ， 如 果 选 择 
Aspect Ratio， 可 以 在 下 面 的 Width&Height 中 输入 我 们 的 分 辩 率 的 宽 高 
比 。 设 定好 之 后 单 击 OK 按 钮 ， 即 可 保存 这 个 自 定 义 的 屏幕 分 辨 率 模 
式 . o 

因为 NGUI 的 UIRoot 具 备 FixSize 模 式 ， 所 以 ， 一 般 在 进行 UI 随 屏幕 
自 适应 时 ， 主 要 着 重 解决 的 是 屏幕 宽 高 比 发 生变 化 之 后 的 自 适 应 。 


A 图 6.4 


6.1.2 主流 设备 的 屏幕 分 辨 率 
作为 一 个 客户 端 程序 ， 在 开发 游戏 时 必须 先 了 解 一 下 市 面 上 主流 


设备 的 分 辨 率 和 宽 高 比 ， 这 样 才能 在 开发 的 时 候 做 到 有 备 无 患 ， 如 表 
6.1 和 表 6.2 所 示 。 
表 6.1 为 IJOS 设 备 。 


屏幕 分 辩 率 


屏幕 宽 高 比 


Iphone4 960*640 像素 3:2 
Iphone4S 960*640 像素 3 
Iphone5 1136*640 像素 16:9 
Iphone5S 1136*640 像素 16:9 
Iphone6 1334*750 像素 16:9 
Iphone6 plus 1920*1080 像素 16:9 
Ipad2 1024*768 像素 4:3 
Ipad3 2048*1536 像素 4:3 
Ipad4 2048*1536 像素 4:3 
Ipad Air 2048*1536 像素 4:3 
Ipad mini 1 1024*768 像素 4:3 
Ipad mini 2 2048*1536 像素 4:3 


表 6.2 为 Android 设 备 。 


因为 Android 设 备品 牌 型 号 党 多 ， 上 所 
Android 设 备 是 16:9。 


涝 


表 6.2 


设备 名 屏幕 分 辩 率 屏幕 宽 高 比 
: 星 Note2 1280*720 像素 16:9 
三 星 Note3 1920*1080 像素 16:9 
三 星 S3 1280*720 像素 16:9 
三 星 S4 1920*1080 像素 16:9 
= 1920*1080 像素 16:9 
小 米 3 1920*1080 像素 16:9 
小 米 4 1920*1080 像素 16:9 
魅族 MX3 1800*1080 像素 15:9 
华为 酷派 等 其 他 品牌 一 般 为 1920*1080 像素 一 般 为 16:9 


至 于 PC 显示 器 和 Mac 电 脑 的 屏幕 在 这 里 就 不 一 一 介 
的 读 首 或 者 开发 PC/Web 游 戏 的 读者 可 以 目 行 去 碍 一 下 。 
不 论 是 PC 设备 还 十 移 动 设备 ， 屏 幕 分 辨 率 一 般 处 于 4:3 到 


小 结 : 


绍 了 ， 有 兴趣 


16:9 之 间 ， 一 般 来 说 ， 我 们 只 需要 考虑 这 两 个 值 作为 极限 值 即 可 。 


6.1.3 自 适 应 核心 组 件 Anchor 的 使 用 


NGUI 作 为 一 款 最 强大 和 成 熟 的 捅 件 ， 自 然 有 非常 成 熟 的 屏幕 目 适 
应 技术 ， 它 就 是 Anchor 组 件 。Anchor 组 件 从 旧版 本 一 直 更 新 到 新 版 
本 ， 依 然 是 主流 的 屏幕 适 配 方式 。 

所 谓 Anchor， 即 为 锁 点 ， 它 的 工作 原理 是 它 会 自动 地 绑 定 摄像 机 
的 某 一 个 点 作为 销 点 ， 铺 点 一 共有 上 左 、 上 、 上 右 、 左 、 中 、 右 、 磊 
下、 下 、 右 下 9 个 点 可 以 设 定 。 当 相机 变动 时 ， Anchor 组 件 所 在 的 物体 
位 置 也 会 跟随 相机 的 变动 而 变动 ， 并 始终 处 于 相机 边界 的 销 点 位 置 。 

有 了 Anchor 的 这 个 特性 ， 我 们 一 般 会 在 UIRoot 下 创建 Anchor 的 子 
物体 ， 例 如 ， 我 们 在 UIRoot 下 创建 一 个 Anchor 物 体 ， 绑 定 到 相机 视窗 
的 左上 角 ， 然 后 将 需要 始终 处 于 屏幕 左上 方 的 UI 控 件 放 置 于 这 个 
Anchor 之 下 ， 利 用 Unity 中 子 物体 会 跟随 父 物体 的 变化 而 变化 以 保证 相 
对 位 置 不 变 的 特点 ， 实 现 UI 控 件 随 屏幕 自 适 应 。 

我 们 先 来 了 解 一 下 Anchor 的 创建 方式 ， 选 中 要 创建 Anchor 的 UIT 
点 ， 在 Unity 顶 部 NGUI 荣 单 中 选择 Creat =” Anchor 即 可 ， 如 图 6.5 所 示 。 

Anchor 组 件 的 设置 界面 如 图 6.6 所 示 ， 我 们 来 了 解 一 下 Anchor 组 件 
的 设置 。 

e 从 图 6.6 中 可 以 看 到 UICamera 选项 目 动 锁定 了 该 Anchor 所 在 的 UI 
的 摄像 机 ， 它 将 会 绑 定 这 个 摄像 机 边缘 上 的 某 一 个 点 作为 久 点 。 
Container 即 为 包含 的 物体 ， 一 般 情况 下 无 需 设置 ， 因 为 将 物体 放置 于 
Anchor 的 子 物体 中 ， 束 可 以 利用 “ 子 物 体 跟 随 父 物体 ”实现 跟随 Anchor 的 
销 点 。 

eSide 一 项 为 核心 项 ， 选 择 该 Anchor 的 销 点 ， 一 共 9 个 点 ， 分 别 对 
应 相机 边缘 的 上 左 、 上 、 上 右 、 左 、 中 、 右 、 碟 下 ~、 下 、 右 下 。 

eRunOnlyOnce 意 为 执行 一 次 ， 即 只 在 开始 的 时 候 进行 一 次 适 配 ， 
默认 为 勺 选 上 ， 一 般 不 需要 去 修改 它 。 


NGUI | Window Help 


Selection 

Create Sprite Alt+Shift+S 
Attach | Label Alt+Shift+L 

Tween Texture Alt+Shift+T 

Open Unity 2D Sprite Alt+Shift+D 

Options Widget Alt+Shift+W 


Extras 
Normalize Depth Hierarchy Alt+Shift+0 


_ Anchor (Legacy) 


Panel 

Help Scroll View 
Grid 

Table 

2D UI 

3D UI 


国人 UIANnchor (Script) 
script 


Uit 
-可 | 


A 图 6.6 

eRelativeOffset， 这 是 Anchor 的 相对 位 置 偏 移 ， 百 分 比 形式 的 。 比 
如 我 们 填 入 X 值 0.1， 即 为 Anchor 相 对 于 相机 边缘 上 的 销 点 向 X 正 方 癌 
移动 10% 屏 幕 宽度 的 距离 。 也 就 是 说 ， 如 果 设 定 Anchor 为 Left， 但 是 叉 
将 RelativeOffset 的 X 值 设 为 了 0.5， 就 相当 于 Anchor 跑 到 了 中 点 。 

ePixelOffset， 像 素 偏 移 ，Anchor 会 相对 于 相机 边缘 上 的 销 点 以 像 
素 为 单位 进行 偏 黎 ， 例 如 ， 我 们 填 入 X 为 100 像 素 ， 那 么 Anchor 束 会 朝 
X 方 向 偏 移 100 像 素 的 距离 ， 这 个 距离 因为 是 像素 单位 的 不 是 以 屏幕 百 
分 比 为 单位 的 ， 所 以 ， 分 辨 率 越 高 的 屏幕 肉眼 看 到 的 偏 移 量 就 越 小 。 

一 个 简单 的 目 适 应 案例 : 


我 们 现在 来 简单 对 图 6.1 中 的 4 个 角 的 UI 图 片 进行 屏幕 自 适 应 设 定 ， 
以 加 深 对 Anchor 的 了 解 。 我 们 在 UIRoot 下 创建 4 个 Anchor， 分 别 命名 为 
Anchor_ TIopLeft、Anchor_ TopRight、Anchor BottomLeft、 

Anchor_ BottomRight， 然 后 将 它们 的 Anchor 组 件 中 的 Size 分 别 设 为 左 
FF 右上、 左下 、 右 下 4 个 点 。 然 后 我 们 将 4 个 角 的 UI 图 片 分 别 拖 到 它 
们 所 属 的 Anchor 下 作为 子 物体 ， 并 Reset 它 们 的 transform 组 件 (让 它们 
的 本 地 坐标 归 零 ， 回 到 Anchor 所 在 的 位 置 ) ， 如 图 6.7 所 不 。 

从 图 6.7 中 看 出 ， 每 个 UI 图 片 部 只 露出 了 一 部 分 ， 因 为 它们 的 中 心 
点 和 Anchor 所 在 的 锚 点 重合 了 “。 现 在 可 以 设 定 每 个 UI 图 片 的 Transform 
的 Position 位 置 《直接 改 坐标 或 者 拖 动 都 可 ) ， 让 它们 达到 我 们 满意 的 
程度 ， 然 后 当 屏 幕 宽 高 比 变 了 后 ， 它 们 也 会 跟随 Anchor 所 在 的 锁 点 一 
起 发 生变 化 ， 如 图 6.8 和 图 6.9 所 示 。 

如 果 我 们 在 调整 了 屏幕 宽 高 比 模式 之 后 ， 发 现 UI 没 有 自动 适应 位 


置 ， 这 是 因为 Anchor 还 没有 运行 ， 只 需要 运行 一 下 游戏 即 可 看 到 UI 完 
成 了 上 自 适 应 (确保 UI 是 在 Anchor 物 体 下 作为 子 物体 存在 )。 


A 图 6.7 


Maximize on Pla tats Gizmos 


4:3 屏 幕 下 ,我们 将 4 个 UI 图 片 分 别 
拖 动 到 相应 Anchor 下 之 后 ， 已 经 调 


好 了 位 置 


A 图 6.8 


调整 屏 乾 比例 到 16:9 之 下 ,运行 
游戏 ,我 们 会 发 现 四 个 UI 图 片 自 


动 跑 到 了 屏幕 的 四 个 角 党 位置， 
完成 了 自 适 应 。 


A 图 6.9 


6.1.4 使 用 Anchor 的 注意 事项 


Anchor 是 开发 项 目 几 乎 必用 的 一 个 非常 核心 的 组 件 ， 我 们 在 使 用 
时 ， 需 要 注意 以 下 一 些 问 题 。 

(1) 我 们 在 设 定 了 Anchor 的 Side 锚 点 之 后 ，Anchor 会 自动 跑 到 相 
应 的 锚 点 位 置 上 去 ， 不 需要 我 们 手动 拖 动 Anchor。 

(2) 不 论 是 3DUI 还 是 2DUI，Anchor 的 用 法 是 一 模 一 样 的 ， 不 要 
手动 拖 动 Anchor 的 位 置 。 

(3) 一 般 情 况 下 ， 尽 量 不 要 去 设置 Anchor 的 RelativeOffset 和 
PixelOffset， 就 让 Anchor 保 持 锁 点 原 位 置 ， 然 后 将 UI 探 件 放 到 Anchor 下 
作为 子 物体 ， 再 去 调整 UI 控件 的 位 置 。 

(4) Anchor 物 体 身 上， 尽量 保证 只 有 Anchor 一 个 组 件 ， 以 便于 管 
理 维护 。 

(5) 一 套 UI 体 系 中 ， 可 以 有 无 数 多 个 Anchor (例如 有 5 个 Anchor 
都 定位 于 左上 角 是 被 允许 的 ) ， 但 是 ， 尽 量 确保 Anchor 的 父 物体 中 没 
有 Anchor， 也 就 是 尽量 避免 Anchor 中 套 Anchor。Anchor 的 父 物 体 可 以 
是 UIRoot， 也 可 以 古 一 个 空 物体 。 

(6) 不 要 滥用 Anchor， 如 果 相 机 边 毕 的 9 个 销 点 中 的 每 个 点 都 有 
多 个 Anchor 来 定位 ， 那 么 一 定 是 UI 结构 的 设计 有 问题 了。 


6.1.5 正 子 UI 之 前 必须 有 和 几 个 证 


我 们 在 正式 开发 游戏 时 ， 适 配 古 必须 提前 考虑 的 问题 ， 如 果 没 有 
考虑 好 ， 可 能 会 在 项 目 后 期 造成 大 量 的 麻烦 。 所 以 ， 在 正 陈 开发 UI 之 
前 必须 明确 如 下 问题 。 

(1) 我 们 针对 的 是 什么 样 的 平台 ? 

(2) 我 们 游戏 的 设备 屏幕 宽 高 比 最 大 、 最 小 是 几 比 几 ? 

(3) 我 们 游戏 开发 时 的 标准 分 辨 率 是 多 少 像素 ? 这 将 关系 到 美术 
制作 图 厂 资 源 的 标准 。 


(4) 检查 UI 设计 草图 ， 和 策划 人 员 明 确 哪些 UI 会 在 屏幕 宽 高 比 变 
化 时 目 适应 位 置 ? 

(5) 明确 需要 自 适 应 位 置 的 UI 分 别 属 于 哪 一 个 锚 点 ， 并 设计 一 个 
最 佳 的 UI 结构 。 


N 


6.2 UI 元 丸 的 相关 
6.2.1 什么 是 UI 元 素 的 相对 自 适 人 


UI 元 素 的 相对 自 适 应 ， 顾 名 思 义 ， 是 指 两 个 UI 元 素 之 间 保 持 一 种 
相对 的 位 置 不 要 变化 ， 例 如 ，UI 元 素 A 永 远 处 于 UI 元 素 B 右 边 的 50 像 素 
处 位 置 。 再 比如 ， 一 个 UI 背景 框 ， 不 论 屏 幕 尺寸 怎么 变化 ， 框 的 左边 
缘 永远 距离 屏幕 左边 100 像素 ， 框 的 右边 缘 永 远 距 离 屏 幕 右边 100 像 
素 。 


6.2.2 Anchors 的 介绍 及 使 用 


在 6.1 节 中 讲 到 了 整个 UI 随 屏幕 自 适 应 的 问题 ， 使 用 了 一 种 比较 强 
大 的 锚 点 定位 组 件 : Anchor， 这 里 将 要 学 习 NGUI 新 版 本 中 提供 的 一 种 
全 新 的 定位 工具 : 单个 UI 控件 的 Anchors 单 独 定位 。 

Anchor 的 主要 作用 是 一 个 组 件 ， 它 将 会 自动 去 寻找 摄像 机 的 边 绿 
和 中 心 点 一 共 9 个 点 ， 以 此 作为 基准 点 进行 定位 适 配 。 而 Anchors (为 
了 区 分 ， 以 下 乡 用 相对 Anchors 来 形容 ) 是 每 一 个 UI 控件 都 会 附带 的 选 

， 它 能 关 每 一 个 UI 控 件 设 定 绑 定 对 象 和 绑 定 的 方式 。 相 对 Anchors 的 
了 默认 情况 下 为 none， 意 味 着 控件 默认 情况 下 无 相对 
定位 。 
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vv Anchors 


A 图 6.10 
我 们 来 了 解 一 下 这 个 相对 Anchors 选项 的 工作 原理 。 首 先 ， 选 择 控 
件 的 Anchors 的 Type 为 Unified， 会 看 到 如 图 6.11 所 示 的 界面 。 


vv Anchors 


A 图 6.11 
在 界面 中 ，Type 为 Anchors 定 位 的 类 型 ， 一 共有 None (默认 状态 ， 
无 相对 定位 ) 、Unified (统一 的 标准 定位 、Advanced (高 级 定 
位 ) 。 统 一 的 标准 定位 和 高 级 定位 之 间 的 区 别 在 于 ， 高 级 定位 能 够 有 
更 加 复杂 的 定位 设置 ， 但 它们 的 定位 原理 是 一 样 的 。 
Execute 选 项 为 设 定 相对 定位 执行 的 时 机 ， 一 共有 3 个 选项 可 以 选 
择 : OnUpdate、OnEnable 和 OnStart， 我 们 知道 Update 、Start 、 


OnEnable 是 Unity 中 脚本 上 自动 执行 的 函数 ， 如 果 选 择 了 OnUpdate， 则 这 
个 控件 的 定位 会 随 着 每 一 帧 去 进行 更 新 ， 如 有 果 选 择 了 OnEnable， 那 么 
意味 着 这 个 控件 只 会 在 激活 的 时 候 更 新 一 次 定位 ， 然 后 不 再 更 新 ， 直 
到 下 次 激活 再 进行 更 新 ， 如 果 选 择 了 OnStart， 那 么 这 个 控件 在 场景 加 
载 之 后 只 会 更 新 一 次 相对 定位 信息 。 一 般 来 说 ， 为 了 市 省 性 能 义 照 顾 
需求 ， 我 们 会 选择 OnEnable。 如 果 有 特殊 需求 ， 例 如 ， 我 们 在 打开 一 
个 界面 了 时， 可 以 拖 动 界面 的 4 个 角 来 改变 界面 的 尺寸 ， 而 界面 中 的 某 个 
元 素 叉 需要 实时 地 和 改变 之 后 的 界面 进行 相对 位 置 的 匹配 ， 就 需要 选 
择 OnUpdate， 它 会 每 一 帧 都 去 更 新 相对 位 置 的 信息 。 

Target 远 项 为 这 个 控件 相对 位 置 选 取 的 参照 物 ， 也 束 古 这 个 控件 以 
哪 一 个 物体 作为 销 点 来 进行 相对 位 置 的 绑 定 。 

下 面 可 以 看 到 有 4 个 选项 :Left、Right、Bottom、Top。 它们 的 作 
用 是 设置 这 个 控件 的 4 个 边 的 对 位 信息 ， 我 们 在 每 个 选项 旁边 的 下 拉 沫 
单 中 选择 Target's Center (以 目标 点 的 中 心 点 作为 参照 ) 等 目标 体 身 上 
的 参照 点 ， 最 右边 的 数字 表示 的 是 像素 偏 黎 ， 加 写 为 向 X 轴 正 向 偏 移 
一 定 像 素 ， 减 号 为 回 X 轴 人 负 向 参照 目标 点 仿 移 一 定 像素 。 

从 上 文 的 介绍 中 可 以 看 出 ，Anchors 适 配 的 核心 原理 为 : 为 该 欣 件 
的 4 条 边 分 别 设 定 相对 位 置 的 参照 点 ， 这 个 参照 点 可 以 选择 参照 物体 续 
上 的 中 点 、 左 边 点 等 ， 然 后 设 定 一 定量 的 偶 移 像 隶 。 这 样 当 相对 
Anchors 执 行 时 ， 探 件 的 4 条 边 会 分 别 按照 定位 信息 朝 4 个 方向 “拉扯 控 
件 ”， 来 达到 相对 位 置 适 配 的 效果 。 所 以 ，Anchors 本 质 上 是 点 对 点 的 

(自身 控件 的 4 条 边 的 中 点 ， 分 别 去 对 应 一 个 参照 点 ) 。 

图 6.12 所 示 为 Anchors 的 Advance 模 式 下 的 设置 界面 ， 可 以 对 比 
Unified 模 式 的 设置 界面 ， 很 容易 发 现 Advance 模 式 只 是 比 Unified 多 了 一 
些 功能 ， 可 以 给 控件 的 4 边 分 别 设置 不 同 的 参照 物 。 


A 图 6.12 


6.2.3 使 用 Anchors 的 范例 : J 全屏 适 配 


下 面 我 们 来 做 一 个 Anchors 适 配 的 范例 :让 一 张 再 景 图 ， 无 论 在 什 
么 屏幕 比例 下 面 ， 都 能 刚好 充满 全 屏 〈 即 使 被 拉 伸 ) 。 
如 图 6.13 所 示 ， 我 们 在 场景 中 添加 了 一 张 Texture 。 


A 图 6.13 
在 它 的 Anchors 设 置 选 项 中 ， 首 先 选 择 Unified 标 准 模式 ， 然 后 选择 
执行 方式 为 OnEnable 的 时 候 执行 一 次 。 


既然 布 望 这 张 图 永远 充满 全 屏幕 ， 屏 幕 束 是 相机 的 视窗 ， 当 屏幕 
比例 发 生变 化 的 时 候 ， 本 质 上 是 相机 的 视窗 大 小 发 生变 化 了 ， 所 以 ， 
这 里 我 们 相对 定位 的 参照 物 为 泻 染 这 个 UI 的 摄像 机 。 

因为 屏幕 长 宽 比 变化 的 时 候 ， 会 根据 高 度 进行 相机 的 长 度 变 化 

(4:3 变 化 到 16:9 其 实效 果 类 似 于 屏幕 被 < 拉 长 "了 ) 。 所 以 ， 我 们 设置 

这 个 Textur e 探 件 的 左边 定位 点 为 目标 的 左边 ， 右 边 定 位 点 为 目标 的 右 
边 ， 上 下 两 边 的 定位 点 为 目标 的 中 心 点 即 可 。 然 后 将 像素 偏 移 全 部 设 
为 0， 这 样 束 让 控件 的 4 个 边 全 部 补 拉 到 和 它们 的 销 点 重合 ， 造 成 全 屏 
A 


如 图 6.14 是 我 们 对 Texture 组 件 的 Anchors 的 设置 ， 图 6.15 是 完成 之 
后 运行 游戏 的 效果 ， 在 4:3 和 16:9 的 情况 下 ， 背 景 图 都 刚好 充满 了 全 


屏 ， 但是， 在 进行 相对 点 定位 的 过 程 中 ， 导 致 了 图 片 发 生 了 形变 。 


A 图 6.15 


6.2.4 使 用 Anchors 的 注意 事项 


因为 存在 Anchor 组 件 和 每 个 控件 的 相对 Anchors 两 种 定位 方式 ， 所 
以 ， 使 用 相对 Anchors 时 ， 我 们 一 定 要 注意 以 下 一 些 事项 。 

(1) Anchors 需 要 对 每 个 控件 都 进行 详细 的 销 点 定位 设置 ， 工 作 
量 巨大 ， 所 以 ， 在 没有 必要 的 情况 下 ， 尽 量 用 Anchor 组 件 ， 可 以 减少 
很 多 工作 量 。 


(2) 使 用 Anchors 时 一 定 要 切记 它 在 屏幕 分 辨 率 变 化 的 情况 下 ， 
很 可 能 会 导致 控件 形变 〈 探 件 4 边 被 拉 发 生变 形 ) 。 

(3) 如 果 一 定 要 使 用 Anchors， 义 不 希望 它 形变 ， 就 将 Anchors 的 4 
边 定 位 都 以 目标 物体 的 同一 个 点 (如 Target's Center) 作为 参照 点 。 

(4) 使 用 Anchors 来 进行 相对 定位 ， 一定 要 深刻 熟悉 它 的 原理 ， 
并 谍 愤 设置 ， 以 人 免 产 生 不 希望 见 到 的 Bug。 


6.3.1 摄像 的 演 染 层 的 概念 


Unity 中 ， 每 一 个 物体 都 有 一 个 所 处 的 “ 层 ”* 的 概念 ， 也 就 是 物体 的 
Layer， 而 摄像 机 中 可 以 通过 设置 CullingMask 来 决定 该 摄像 机 只 深 染 哪 
些 层 的 物体 。 对 于 UI 来 说 ， 这 个 原理 也 一 样 适用 ， 因 为 NGUI 的 每 一 个 
控件 元 素 ， 本 质 上 都 属于 一 个 GameObject， 都 有 自己 的 层 ; 4 
UIRoot 都 会 目 带 一 个 UICamera 来 泻 染 UI。 

利用 这 个 原理 ， 我 们 可 以 实现 多 个 摄像 机 来 进行 UI 的 渲染 ， 例 
如 ， 场 景 里 可 以 放置 一 个 3D 摄 像 机 人 负责 渲染 3DUI， 还 可 以 放置 一 个 2D 
摄像 机 ， 负 责 洽 染 2DUI 等 。 理 论 上 来 说 ， 可 以 放置 无 限 多 个 摄像 机 来 
分 别 泻 染 不 同 层 的 内 容 。 

如 图 6.16 所 示 ， 当 场景 中 有 两 个 摄像 机 都 会 泻 染 同一 个 层 的 时 候 ， 
会 造成 画面 重复 显示 ， 图 6.16 中 的 Texture 就 被 显示 了 两 次 。 


A 图 6.16 


6.3.2 办 作 的 应 用 范 


多 摄像 机 协作 应 用 ， 是 为 了 对 付 一 些 比 较 复杂 的 UI 情况 ， 因 为 
Unity 中 很 多 元 素 不 适合 和 UI 控件 放 在 一 起 进行 显示 ， 比 如 粒子 、 比 如 
3D 的 模型 。 例 如 ， 在 UI 中 显示 一 个 3D 模 型 ， 一 般 就 会 使 用 一 个 UI 摄像 
机 来 负责 泻 染 UI 控件 ， 用 另 一 个 摄像 机 来 泻 染 3D 模 型 ， 然 后 让 这 两 个 
摄像 机 泻 染 的 内 容 进 行 琶 加 ， 呈 现 出 一 幅 完整 的 UI 图 像 。 

图 6.17 中 所 示 的 UI， 中 间 的 人 物 是 一 个 3D 模 型 ， 由 一 个 独立 的 摄 
像 机 进行 泻 染 ， 周 围 的 装备 栏 位 和 背包 等 UI 元 素 ， 勾 由 男 一 个 独立 的 
UI 摄像 机 进行 泻 染 。 


A 图 6.17 


6.3.3 如 何 创建 多 个 UI 摄像 机 


在 NGUI 中 ， 如 果 创 建 了 一 个 UIRoot， 当 我 们 再 点 开 Unity 顶 部 的 
NGUI 琳 单 ， 企 图 通过 Creat 羔 单 去 创建 一 个 新 的 UI 时 ， 会 发 现 创 建 UI 的 
选项 已 经 变 成 灰色 ， 无 法 再 创建 ， 如 图 6.18 所 示 ， 这 是 因为 NGUI 默 认 
只 允许 场景 中 出 现 一 个 UIRoot 。 

我 们 要 创建 多 个 UI 摄像 机 时 ， 首 先 得 考虑 是 否 需 要 UIRoot， 如 果 
有 UI 图 片 做 成 的 控件 ， 需 要 被 UIRoot 根 据 屏幕 自动 进行 放 缩 ， 那 么 就 
需要 一 个 UIRoot 来 管理 这 些 UI 控件 。 

为 了 创建 多 个 UIRoot (每 个 UIRoot 会 自 带 一 个 UI 摄像 机 ) ， 可 以 
关闭 场景 中 已 经 存在 的 UIRoot 物 体 的 UIRoot 组 件 ， 然 后 再 单 击 Unity 顶 
部 NGUI 菜 单 通 过 Creat 创 建 ， 如 图 6.19 所 示 。 


Fle Edit Assets GameObject Component NGUI Window Help 


Selection 
Create Sprite Alt+Shift+S 
Attach Label Alt+Shift+L 
Tween Texture Alt+Shift+T 
Open Unity 2D Sprite Alt+Shift+D 
Options Widget Alt+Shift+W 
Extras 

Normalize Depth Hierarchy Alt+Shift+0 


Anchor (Legacy) 


Panel 


Help Scroll View 


Grid 


四 同 UINo 


ot (Script} 
|e Flexible 


Minimurm Heright 


hrink Portrait UI 


Adjust by DPI 


A 图 6.19 
如 果 不 需 要 多 个 UIRoot， 只 需要 一 个 新 的 UICamera， 那 么 可 以 在 
场景 中 新 创建 一 个 摄像 机 ， 创 建 方式 为 ， 在 Unity 顶部 菜单 单 击 
GameObject， 选 择 Creat 创建 一 个 ， 如 图 6.20 所 示 。 
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然后 在 这 个 新 创建 的 摄像 机 上 附 上 一 个 UICamera 组 件 即 可 ， 组 件 
附加 方法 可 以 在 mspector 面 板 中 依次 单 击 
AddCompent 一 NGUI 一 EventSystem (UICamera) 。 如 果 它 泻 染 的 物体 
不 需要 接收 UI 的 事件 (如 单 击 拖 上 忠 等 ，， 这 个 UICamera 组 件 就 没有 必 
要 附 上 。 


6.3.4 多 摄像 机 协作 的 注意 事项 


因为 摄像 机 直接 关系 到 画面 的 泻 梁 显示 ， 所 以 ， 多 个 摄像 机 协作 
时 ,一定 要 注意 以 下 事项 。 
(1) 规划 并 设置 好 每 个 物体 的 Layer， 不 要 混乱 。 


(2) 设置 好 每 个 摄像 机 的 CullingMask， 确 保 场 景 中 的 摄像 机 之 
间 不 会 重复 泻 染 同一 个 层 。 

(3) 对 于 多 个 UIRoot 的 情况 ， 更 要 检查 它们 所 属 的 层 和 该 UIRoot 
泻 染 的 层 是 否 对 应 。 


(4) 尽量 不 要 滥用 多 摄像 机 协作 。 


我 们 制作 游戏 完成 后 ， 最 终 发 布 时 都 会 生成 一 个 发 布 的 “安装 
包 ”。 对 于 PC 来 说 ， 它 是 一 个 客户 端 安 装 包 ， 对 于 Web 来 说 ， 它 是 一 个 
网 络 在 线 下 载 的 资源 包 ， 对 于 安 卓 和 苹果 平台 来 说 ， 它 是 一 个 APK 包 
或 者 IPA 包 ， 不 管 怎样 ， 最 终 都 会 有 一 个 “打包 资源 并 发 布 "的 过 程 。 

如 果 一 个 游戏 的 安装 包 过 大 ， 会 导致 用 户 成 本 急剧 升 高 。 每 一 个 
游戏 在 招揽 玩家 时 都 会 付出 一 定 的 成 本 ， 比 如 广告 推广 、 运 营 活动 
等 ， 如 果 用 户 成 本 过 高 ， 会 导致 付出 同样 运营 成 本 的 情况 下 ， 游 戏 的 
玩家 会 更 少 。 在 这 个 用 户 成 本 的 价值 体系 中 ， 安 装 包 大 小 占 了 很 重要 
的 一 部 分 因素 。 拿 安 卓 平台 做 例子 ， 一 个 50MB 大 小 的 游戏 ， 和 一 个 
200MB 大 小 的 游戏 ， 它 们 在 付出 同等 运营 资源 的 情况 下 ，50MB 的 游戏 
获取 的 用 户 数 会 大 大 超过 200MB 的 游戏 ， 虽 然 这 过 程 会 受 游戏 品质 、 
题材 、 美 术 风格 等 的 影响 ， 但 是 ， 总 体 上 包 大 会 吃 很 大 的 亏 。 

由 此 可 见 ， 对 于 客户 端 程序 来 说 ， 资 源 的 整合 和 优化 ， 让 项 目的 
资源 量 尽 可 能 变 少 是 对 整个 游戏 有 巨大 帮助 的 。 


UI 资源 在 这 里 单独 拿 出 来 分 析 ， 一 是 因为 我 们 主要 讲解 UI 的 制作 
开发 ， 二 是 因为 UI 资源 在 游戏 项 目 中 相对 比较 特殊 ， 它 具有 以 下 特 
局 


(1) UI 资源 几乎 都 是 图 片 ， 而 图 片 是 最 占 资源 量 的 资源 类 型 之 


(2) Unity 不 支持 外 部 压缩 ， 即 使 在 外 部 将 一 个 10MB 的 图 片 压缩 
到 只 剩 IMB， 导 入 引擎 之 后 它 也 会 被 解压 出 来 变 成 LIMB， 然 后 转换 为 
各 平台 特有 的 格式 。 
(3) UI 资源 一 般 都 贴 着 相机 视窗 显示 在 最 上 层 ， 也 是 游戏 中 人 机 
交互 的 重要 部 分 ， 一 般 需 要 保证 高 质量 ， 所 以 一 般 都 使 用 RGBA32 位 色 
( 真 彩色 ) ， 这 会 让 资源 量 更 大 。 
(4) UI 资源 一 般 涉 及 大 量 图 标 、 背 景 框 等 ， 如 果 要 保证 高 分 辨 
率 ， 它 们 将 会 导致 资源 量 很 大 。 例 如 ， 为 1080P 的 屏幕 做 一 个 全 屏 的 
背景 杠 ， 就 导致 一 个 背景 框 束 是 一 张 1920*1080 的 图 片 ， 这 种 资源 量 
大 ， 我 们 必须 想 办 法 进行 优化 。 
而 且 因 为 UI 资源 几乎 都 是 以 图 集 形式 展现 ， 所 以 在 加 载 的 时 候 ， 
它 会 被 整个 一 块 儿 加 载 进 内 容 ， 如 果 不 优化 好 UI 资源 量 ， 会 增 大 内 存 
的 开销 。 
综 上 ， 我 们 可 以 知道 ，UI 资 源 虽 然 不 一 定 是 项 目 中 最 大 头 的 资源 
部 分 ， 但 UI 资源 一 定 是 项 目 开 发 中 必须 优化 好 的 一 块 “重地 ”。 


6.4.3 什么 是 九宫 格 UI 


九 品 格 ， 顾名思义 ， 束 是 9 个 格子 ， 是 一 种 做 UI 第 见 的 方式 ， 来 增 
强 UI 资 源 的 复 用 性 并 减少 资源 量 。 九 宫 格 的 主要 目的 是 处 理 图 厂 拉 伸 
效果 ， 我 们 知道 图 片 一 旦 被 拉 伸 ， 它 就 会 出 现形 变 、 模 糊 等 问题 ,但 
古 ， 有 的 图 片 它 的 某 一 些 部 分 又 是 允许 被 拉 伸 的 。 例 如 ， 一 个 UI 月 景 


框 ， 它 的 中 间 部 分 儿 乎 是 一 个 纯色 ， 人 允许 被 拉 伸 (纯色 被 拉 伸 不 会 发 
生 质 量 问题 ) ， 但 是 ， 边 缘 的 4 个 角 可 能 有 一 些 特殊 花纹 或 者 倒 角 不 多 
许 被 任意 拉 伸 ， 这 个 时 候 就 可 以 用 九宫 格 ， 来 使 4 个 角 不 进行 拉 伸 放 
大 ， 只 让 中 间 部 分 进行 拉 伸 放大 ， 达 到 一 个 小 框 拉 大 成 一 个 大 背景 框 
使 用 的 同时 图 片 质量 又 不 会 发 生 损 伤 的 目的 。 

如 图 6.21 所 示 ， 我 们 将 一 个 UI 背景 板 分 割 成 了 9 块 ， 像 一 个 九宫 格 
一 样 ， 这 9 个 格子 并 不 要 求 一 定 要 相同 大 小 。 

当 我 们 拉 伸 放大 的 时 候 ，1、3、7、94 个 角落 的 格子 不 会 被 放大 ， 
而 2 号 格子 会 被 左右 拉 伸 以 填充 1 和 3 之 间 的 缝 除 ，4 号 格子 会 被 上 下 拉 
伸 填 充 1 和 7 之 间 的 空 除 ，5 号 格子 会 被 整体 拉 伸 来 填充 图 片 被 拉 大 之 后 
中 间 的 空间 。 拉 伸 原 理 如 图 6.22 所 示 。 


A 图 6.21 


如 果 我 们 需要 一 个 UI 背景 底 框 ， 尺 寸 是 1920*1080， 这 个 时 候 如 
果 美 术 真 的 提交 一 个 1920*1080 的 底 框 过 来 ， 会 导致 资源 量 极 其 庞大 ， 
几乎 一 个 底 框 就 占 满 了 一 个 大 图 集 。 所 以 ， 我 们 得 让 美术 尽量 地 提供 
九宫 格 资源 ， 主 要 有 以 下 一 些 原 则 。 

(1) 不 到 万 不 得 已 的 情况 下 ， 对 于 这 种 大 面积 底板 性 质 的 UI， 尽 
量 只 在 4 个 角 上 做 文章 ， 其 他 地 方 用 可 用 于 拉 伸 的 纯色 。 

(2) 凡是 左右 可 以 缩短 的 UI、 上 下 可 以 缩短 的 UI， 都 尽量 使 用 九 
宫 格 切 短 了 交 给 程序 来 做 。 九 宫 格 不 一 定 是 9 个 格子 ， 也 可 以 是 3 个 格 
了 

如 图 6.23 所 示 的 大 底 框 ， 它 的 资源 图 片 只 是 它 右边 的 那个 小 框 而 
已 ， 我 们 通过 九宫 格 的 原理 ， 让 它 拉 大 到 了 一 个 巨大 的 程度 (可 以 看 
到 它 拉 大 之 后 边框 线条 的 粗细 并 没有 被 拉 粗 ，4 个 角 的 倒 角 也 保持 了 美 
术 原 设计 的 弧度 ， 这 就 是 九宫 格 原理 起 的 作用 ) ， 它 依然 没有 发 生 分 
辨 率 降低 等 质量 问题 但是， 资源 量 却 省 下 了 数 十 倍 、 上 百倍 。 


当 美 术 将 一 个 资源 图 片 合 并 成 一 个 非常 精简 小 巧 的 图 片 交 给 客户 
端 程序 后 ， 窜 户 端 程序 需要 对 这 个 图 片 进 行 切割 九宫 格 。 切 割 方法 为 
如 下 。 
(1) 将 这 个 UI 原件 制作 到 图 集中 去 。 
(2) 选中 图 集 的 Atlas 预 设 文件 (制作 好 图 集 后 自动 生成 的 那 3 
个 文件 中 的 预 设 文件 ) ， 出 现 如 图 6.24 所 示 的 Inspector 界 面 ° 


€ Lame 


A 图 6.23 
(3) 我 们 在 Sprite Details 中 单 击 Sprite 按 钮 ， 会 弹出 这 个 图 集中 所 
有 精灵 的 预 视图 ， 从 中 选中 要 切 制 九 襄 格 的 那个 Sprite。 我 们 会 看 到 图 
6.25 所 示 的 画面 ， 在 6.25 图 中 的 下 部 会 出 现 这 个 Sprite 的 预 宽 图 。 
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(4) 我 们 调整 图 6.26 所 示 的 Border 设 置 项 ， 这 个 Border 就 是 切割 九 
宫 格 所 需要 的 设置 。 它 一 共 需 要 设置 4 个 参数 : Left、Right、Bottom、 
Top ， 这 4 个 项 代表 着 : 从 左边 朝 右 X 像 素 位 置 处 划一 条 坚 着 的 线 ， 从 
右边 朝 左 X 像 素 位 置 处 划一 条 竖 着 的 线 ， 从 下 边 划 上 X 像 素 处 划一 条 横 
着 的 线 ， 从 上 边 朝 下 X 像 素 处 划一 条 横着 的 线 。 这 样 4 条 线束 将 一 个 
Sprite 切 成 了 九 定格 。 


A 图 6.26 
如 图 6.27 所 示 ， 展 示 了 儿 种 九宫 格 的 切 法 。 它 们 从 左 到 右 分 别 是 : 
可 以 全 方位 拉 伸 的 九宫 格 、 只 能 上 下 拉 伸 的 三 宫 格 、 只 能 左右 拉 伸 的 
三 官 格 。 


A 图 6.27 


6.4.6 如 何 使 用 九宫 格 UI 


使 用 九宫 格 UI 的 时 候 ， 必 须 保 证 这 个 Sprite 是 已 经 按照 上 一 小 节 的 
步骤 切 好 了 九宫 格 。 然 后 创建 这 个 Sprite， 将 它 的 模式 设置 为 Sliced 即 
可 ， 如 图 6.28 所 示 。 
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A 图 6.28 
Fill Center 选项 是 目 动 拉 伸 九 让 中 的 中 心 格子 来 充满 中 心 被 拉 大 的 
区 域 ， 如 采 不 勾 选 Fill Center 选项 ， 则 九 家 格 被 拉 伸 之 后 ， 中 心 格 于 不 
会 目 动 充满 ， 会 出 现 一 个 空隙。 如 图 6.29 所 示 ， 左 边 为 勺 选 之 后 的 情 
况 ， 右 边 为 不 勺 选 时 情况 。 


A 图 6.29 
我 们 也 可 以 将 图 片 设置 为 Advance 高 级 模式 ， 高 级 模式 的 本 质 区 别 
是 ， 人 允许 对 划分 的 九宫 格 的 每 一 块 设置 一 个 Type ， 比 如 左上 角 的 格子 
平 铺 、 中 心 格子 拉 伸 等 。 


6.4.7 去 掉 Mipmap 以 进一步 降低 资源 包 大 小 和 内 存 占 用 
首先 我 们 需要 了 解 什么 是 MipMap。 


在 Unity 中 ，MipMap 纹 理 图 片 的 一 个 属性 ， 有 开启 和 关闭 两 种 状 
态 。 比 如 说 一 张 1024*1024 的 纹理 图 片 ， 在 导入 引擎 之 后 它 的 默认 状态 
下 MipMap 是 开局 状态 的 ， 这 会 导致 它 会 和 目 动 生成 512*512、256*256、 
128*128、64*64、32*32 的 这 么 多 张 额外 的 图 片 。 主 要 用 途 是 ， 当 这 个 
纹理 离 摄像 机 足够 远 时 〈 例 如 一 个 人 跑 到 了 很 远 的 地 方 去 ) ， 这 个 纹 
理 图 片 在 游戏 摄像 机 中 就 会 很 小 ， 这 个 时 候 为 了 广 省 性 能 和 达到 更 好 
的 显示 效果 ，Unity 会 目 动 选用 之 前 目 动 生成 的 众多 MipMap 小 纹理 中 的 
一 张 来 替代 最 初 的 纹理 。 

NGUI 生 成 的 UI 图 集 也 是 一 张 纹理 图 片 ， 它 的 默认 状态 下 也 是 选中 
了 MipMap 的 ， 但 是 ， UI 是 附着 在 摄像 机 视窗 最 上 层 的 ， 几 乎 不 会 存在 
像 人 物 一 样 跑 到 很 远 的 地 方 去 的 情况 。 所 以 ， 我 们 可 以 选中 UI 图 集 的 
图 片 文 件 ， 在 图 片 类 型 中 选择 Advance 高 级 类 型 ， 然 后 取消 掉 MipMap 
的 选项 ， 再 Apply 应 用 保存 即 可 ， 如 图 6.30 所 示 。 


6.5 实 UI 资 源 水 
6.5.1 为 什么 要 设 定 UI 资 源 制 作 标 


在 开发 一 个 游戏 项 目 时 ， 我 们 应 该 在 项 目 初期 束 制 定好 UI 资源 的 
制作 标准 。 这 套 制作 标准 并 不 是 指 UI 应 该 用 什么 美术 风格 ， 而 是 UI 资 
源 的 分 辨 率 标准 、 输 出 格式 ， 以 及 客户 端 程序 和 美术 人 员 的 “约定 ”。 

比如 说 ， 我 们 也 许 会 在 项 目 开 始 初 期 定好 所 有 的 UI 都 将 以 
1280*768 的 画布 进行 制作 并 输出 ， 输 出 的 所 有 格式 全 部 统一 为 PNG 
等 ， 我 们 也 可 以 和 美术 人 员 约 定 UI 资 源 如 何 分 类 、 如 何 对 接 等 。 

如 琳 忽 视 了 UI 资源 的 制作 标准 ， 那 么 将 会 给 项 目 埋 下 巨大 的 隐 
患 ， 例 如 ， 不 同 界面 的 UI 分 辨 率 标 准 不 同 、UI 切 割 得 很 乱 导 致 一 大 堆 
重复 资源 浪费 了 资源 包 空 间 。 


6.5.2 资源 制作 标准 设 定 建议 


一 般 来 说 ， 如 果 我 们 使 用 Unity 和 NGUI 搭 配 起 来 开发 一 个 游戏 的 客 
户 端 ， 可 以 为 项 目 提出 一 些 资源 制作 标准 的 设 定 技巧 。 

1. 所 有 的 UI 资 源 全 部 采用 PNG 导 出 

因为 Unity 不 支持 外 部 压缩 ， 所 以 ， 不 论 使 用 PNG 还 是 JPG， 只 
尺寸 相同 ， 资 源 量 在 引 警 中 都 会 是 一 样 大 。 所 以 ， 可 以 大 胆 地 采用 
PNG 进 行 输出 ， 以 保留 和 实现 更 好 的 色彩 效果 。 

2， 设 定 好 一 个 客户 端的 标准 分 辨 率 

这 将 会 影响 美术 人 员 制 作 图 片 ， 我 们 在 开发 游戏 时 有 义务 提前 考 
虑 好 这 个 游戏 的 客户 端 是 面向 什么 样 的 分 辨 率 的 设备 ， 是 1920*1080 还 


是 1280*768? 

3. 提前 考虑 是 否 需要 跨 平 台 

如 果 需 要 跨 平 台 ， 那 么 意味 着 不 同 平台 的 设备 之 间 可 能 会 有 屏幕 
长 宽 比 不 同 的 问题 ， 这 在 设计 人 员 设 计 UI 布 局 时 会 受到 很 大 的 影响 。 

4. 和 美术 人 员 约 定 非 常 大 的 图 片 尽 可 能 采用 九宫 格 

在 上 面 已 经 讲 过 了 九宫 格 的 优势 和 重要 性 ， 而 美术 人 员 在 设计 和 
制作 UI 时 ， 一 般 不 会 考虑 到 程序 人 员 会 怎么 实现 ， 也 不 会 考虑 到 资源 
量 大 小 的 控制 问题 。 所 以 ， 在 开发 项 目 时 ， 我 们 应 该 和 美术 人 员 沟 
通 ， 让 其 在 设计 和 制作 一 些 较 大 尺寸 的 资源 时 ， 尽 可 能 使 用 九宫 格 。 

5. 会 用 作 Sprite 的 UI 元 件 尽 量 以 最 小 尺寸 切 

对 于 大 量 的 UI 小 元 件 ， 例 如 图 标 、 按 钮 等 ， 尺 量 让 美术 人 员 以 最 
小 尺寸 切 。 所 谓 的 最 小 尺寸 ， 就 是 图 片 刚 好 包围 下 这 个 UI 元 件 。 因 为 
在 NGUI 中 ， 它 会 以 UI 元 件 在 打包 前 的 源 文件 尺寸 作为 控件 的 尺寸 ， 这 
意味 着 ， 如 果 将 一 个 明明 只 有 100*100 像 素 的 按钮 图 片 放置 在 一 张 
500*500 的 UI 图 片 中 ， 除 了 按钮 图 片 部 分 ， 其 他 地 方 都 透明 掉 ， 这 样 
制作 成 UI 图 集 之 后 ，NGUI 中 调用 这 个 Sprite 时 ， 它 的 尺寸 会 被 识别 为 
500*500。 

6. 对 于 会 用 作 Texture 的 UI 图 片 尽量 保持 长 宽 都 为 2 的 N 次 方 

在 Unity 中 ， 如 果 图 片 的 长 宽 不 为 2 的 N 次 方 ， 那 么 将 无 法 使 用 自 带 
的 压缩 格式 导致 资源 量变 大 ， 而 且 加 载 和 处 理 效率 都 会 慢 上 很 多 。 所 
以 ， 如 果 一 个 UI 图 片 将 会 被 当 作 Texture 来 使 用 ， 尽 量 让 美术 人 员 将 图 
卢 做 成 长 宽 为 2 的 N 次 方 ， 如 2048*1024 。 

7. 和 设计 人 员 沟 通 ， 将 UI 元 件 尽量 分 类 整理 避免 重复 

一 个 游戏 涉及 了 太 多 的 界面 ， 各 种 UI 元 件 特别 多 。 但 是 ， 其 实 有 
大 量 的 UI 元 件 是 重复 的 ， 例 如 ， 很 可 能 发 现在 很 多 界面 中 用 的 按钮 其 
实 都 是 同一 个 按钮 。 所 以 ， 客 户 端 人 员 在 开发 UI 时 ， 需 要 和 设计 人 员 


沟通 ， 建 议 他 们 尽量 将 UI 元 件 分 类 整理 一 下 ， 例 如 ， 游 戏 中 一 共 会 存 
在 3 种 形式 的 按钮 、 两 种 形式 的 界面 原 框 、5 种 形式 的 文字 确 框 等 。 


当 UI 图 片 导入 到 3 引擎 中 时 ， 可 能 有 时 候 会 遇 上 美术 人 员 在 用 
PhotoShop 设 计 制 作 时 尺 才 刚好 ， 但 是 放 到 客户 端 中 就 匹配 不 上 的 情 
况 。 在 这 种 情况 下 ， 首 先 确 保 一 点 : Unity 中 Game 视 窗 的 分 辨 率 设 置 
是 项 目 中 统一 的 分 辨 率 ， 美 术 人 员 也 是 按照 这 个 分 辨 率 作 为 画布 标准 
来 设计 的 UI。 然 后 进行 如 下 操作 。 

如 果 是 2DUI， 那 么 只 需要 单 击 控件 的 Snap 即 可 ， 让 图 片 还 原 为 原 
尺寸 大 小 ， 效 果 几 乎 可 以 做 到 和 美术 人 员 用 PhotoShop 做 的 一 模 一 样 的 
效果 。 

如 果 是 3DUI， 因 为 相机 不 是 正 交 相机 ， 所 以 ， 因 为 距离 、 透 视 等 
关系 ， 控 件 生 成 之 后 单 击 Snap， 控 件 尺寸 还 原 到 原文 件 的 大 小 ， 但 是 
即使 这 样 ， 在 游戏 视窗 中 它 依然 会 比 源 文 件 看 上 去 更 大 。 这 种 情况 
下 ， 会 导致 我 们 无 法 还 原 美 术 人 员 的 设计 图 ， 我 们 在 使 用 3DUI 时 需要 
将 3DUI 的 UIRoot 下 面 的 UICamera 的 Field Of View 的 值 设 为 75， 则 控件 
的 视觉 大 小 将 会 和 源 文件 应 该 有 的 大 小 保持 一 致 ， 可 以 几乎 完全 地 还 
原 美术 人 员 的 设计 效果 。 


6.5.4 针 大 平台 设置 单独 的 尺 、 了 


在 Unity 中 ， 跨 平台 时 可 以 为 每 个 图 片 设置 不 同 平台 下 的 资源 和 格 
式 ， 比 如 一 张 1024*1024 的 图 片 ， 可 以 让 它 在 iOS 平 台 下 为 1024*1024， 
在 安 卓 平台 下 就 变 为 512*512 。 

如 图 6.31 所 示 ， 我 们 选中 一 个 图 片 文件 后 ， 图 6.31 中 红 框 所 示 的 部 
分 即 为 各 个 平台 的 设置 。 


Default 为 默认 的 设置 ， 回 右 依 次 是 web 的 设置 、PC/Linux 疹 的 设 
置 、ioS 的 设置 、 安 卓 的 设置 、 墨 每 的 设置 、Flash 的 设置 等 。 可 以 为 
图 片 设置 其 在 不 同 平台 下 的 尺寸 和 格式 。 如 果 没 有 设置 ， 它 将 会 在 任 
何平 台 下 都 应 用 Default 衣 置 。 


对 于 iPhone4 手 机 : 图 片 如 果 超 过 了 2048 尺 寸 ， 将 无 法 显示 (显示 
为 一 片 黑色 ) 。 
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6.6.1 什么 是 UI 监听 的 击 


在 我 们 的 游戏 视图 中 ， 有 两 个 UI 界面 谷 在 一 起 的 时 候 ， 我 们 单 击 
一 个 空 日 处 ， 却 触发 了 被 覆盖 在 下 层 的 UI 界面 中 的 单 击 事件 ， 这 就 古 
我 们 的 单 击 击 罕 了 上 层 界面 。 

如 图 6.32 所 示 ， 我 们 在 界面 上 有 一 个 “上 层 按钮 "， 然 后 整个 界面 的 
下 层 还 有 一 个 “下 层 按钮 >， 如 果 我 们 单 击 界面 上 下 层 按钮 的 位 置 ， 事 
件 会 直接 击 罕 界 面 确 板 触发 下 层 按钮 的 响应 事件 。 


A 图 6.32 
再 比如 说 ， 假 设 我 们 场景 中 放置 了 一 个 箱子 ， 单 击 箱子 会 触发 一 
个 开 箱 事件 ， 如 果 我 们 单 击 一 个 UI， 恰 好 UI 在 视觉 上 将 箱子 覆盖 了 ， 
那么 它 也 许 就 会 触发 箱子 的 单 击 事件 。 这 些 都 是 我 们 不 愿意 看 到 的 情 
况 。 需 要 一 些 方 法 来 管理 单 击 屏幕 的 事件 监听 。 


通过 NGUI 的 事件 监听 原理 ， 我 们 知道 它 是 通过 BoxCollider 来 进行 
事件 啊 应 的 。 我 们 有 几 种 方法 去 应 对 事件 击 穿 的 情况 。 

第 一 种 方法 : 用 一 层 BoxCollider 有 覆盖 ， 进 行 遮 挡 。 

在 图 6.32 中 的 例子 中 ， 如 采 在 日 色 的 界面 压板 上 Attach 一 个 
BoxCollider， 然 后 再 单 击 下 层 按钮 的 位 置 ， 它 的 单 击 射 线 就 会 击 中 白 


色 的 界面 底板 的 BoxCollider， 从 而 避免 触发 下 层 按 钮 的 单 击 事件 。 
第 二 种 方法 : 使 用 EventMask。 
我 们 知道 Unity 的 Camera 可 以 设置 CullingMask 来 决定 演 染 的 层 ， 对 
于 NGUI 的 事件 监听 核心 组 件 UICamera 来 说 ， 也 有 一 个 EventMask 的 设 
置 。 首 先 将 下 层 物 体 和 上 层 物 体 设 为 不 同 的 层 ， 然 后 在 UICamera 中 设 
定 这 个 摄像 机 只 接收 特定 层 的 事件 即 可 ， 如 图 6.33 所 示 。 


VUICamera (Script) 


Nothing 
Everything 
Default 
TransparentFX 
Y Event Sources IJgnore Raycast 
Water 
UI 


Mouse 


v 
v 


k eyboard 


v Thresholds 


Mouse Drag 4 pixels 


A 图 6.33 
6.6.3 监听 遮挡 的 妙用 


我 们 可 以 利用 UI 事件 监听 氮 挡 的 功能 实现 一 些小 的 妙用 ， 这 里 举 
一 个 例子 。 在 很 多 游戏 中 ， 我 们 都 页 到 了 如 下 需求 : 假设 玩家 打开 了 
一 个 界面 ， 然 后 玩家 如 果 单 击 了 这 个 界面 以 外 的 任何 区 域 ， 都 将 导致 
这 个 界面 天 闭 。 

对 于 这 种 小 需求 ， 我 们 就 可 以 妙用 事件 监 昕 ， 在 界面 的 下 面 放 置 
一 个 履 盖 全屏 的 大 型 BoxCollider 底 板 ， 然 后 给 这 个 BoxCollider 物 体 写 
一 个 单 击 事件 ， 就 是 关闭 打开 的 这 个 界面 。 这 样 当 玩 家 单 击 到 界面 以 
外 的 任何 区 域 时 ， 它 都 会 啊 应 关闭 界面 的 事件 。 


0.7 之 前 思 


6.7.1 什么 是 UI 结 构 设计 


我 们 在 制作 UI 时 ， 会 涉及 大 量 的 UI 控件 ， 它 们 每 一 个 控件 都 十 一 
个 独立 的 GameObject， 往 往 一 个 场景 内 的 UI 内 容 极其 复杂 ， 做 到 后 期 
的 时 候 GameObject 的 结构 更 复杂 。 所 以 ， 我们 需要 提前 有 一 套 UI 结构 
的 设计 ， 以 此 来 方便 对 UI 体系 进行 修改 、 添 加 和 维护 。 


1. 尽量 不 要 让 UI 作 为 Camera 的 子 物体 。 

在 旧版 本 的 NGUI 中 ， 制 作 2DUI 时 ， 默 认 UI 是 在 Camera 下 面 作为 
子 物体 创建 。 但 是 ， 在 新 版 本 的 NGUI 中 ， 官 方 已 经 不 默认 这 样 做 。 
为 UI 和 摄像 机 敏感 的 关系 ， 尺 量 不 要 将 UI 作为 摄像 机 的 子 物体 ， 避 人 免 
出 现 一 些 因 为 透视 (3DUI) 等 问题 导致 的 视觉 Bug。 

2. 尽量 证 Anchor 组件 所 在 的 物体 在 最 上 层 

因为 屏幕 目 适应 的 适 配 工作 是 游戏 避免 不 了 的 一 个 问题 ，Anchor 
组 件 所 在 的 物体 因为 它 具 有 定位 目 适 应 的 重要 功能 ， 所 以 不 宜 太 多 ， 
否则 很 乱 不 宜 管理 。 最 简单 的 方法 就 是 尽量 确保 Anchor 处 于 最 上 层 。 

3. 给 UI 分 类 ， 多 做 节点 管理 

比如 一 个 场景 中 ， 有 很 多 按钮 末 单 ， 每 一 个 菜单 点 开 之 后 都 会 出 
现 一 个 相应 的 子 界面 ， 所 以 ， 可 以 用 一 个 空 物体 (注意 要 和 UI 同 层 ) 
作为 菜单 的 总 节点 ， 然 后 用 男 一 个 空 物体 作为 所 有 子 界面 的 总 方 点 。 
给 每 一 种 UI 类 型 都 做 一 个 节点 以 此 来 管理 ， 避 人 免 各 种 UI 直接 放 在 一 起 
难以 管理 和 维护 。 

4. 重视 深度 管理 并 巧 用 Panel 


我 们 知道 界面 在 画面 上 的 显示 次 序 是 根据 深度 来 的 ， 这 个 深度 主 
要 指 Panel 的 深度 和 每 一 个 控件 的 深度 。 其 中 Panel 的 深度 优先 ， 只 要 是 
深度 更 大 的 Panel， 它 下 面 的 所 有 子 UI 物体 ， 几 平 都 将 显示 在 更 上 层 。 
利用 这 一 点 可 以 轻松 地 放置 一 些 UI 之 间 的 层次 错乱 问题 ， 例 如 ， 主 界 
面 的 按钮 菜单 和 屏幕 中 央 的 子 界面 面板 不 能 重 登 ， 可 以 让 所 有 的 沫 单 
按钮 都 处 于 一 个 深度 更 低 的 Panel 之 中 ， 然 后 让 子 界面 内 容 处 于 一 个 深 
度 更 高 的 Panel 之 中 。 

5， 重视 命名 

因为 所 有 的 控件 本 质 上 都 是 一 个 GameObject，NGUI 的 实现 全 是 依 
赖 一 个 又 一 个 的 组 件 来 实现 相应 的 控件 功能 。 所 以 ， 这 将 导致 我 们 的 
UI 从 名 称 上 识别 起 来 很 因 难 ， 这 个 时 候 命 名 的 作用 就 体现 了 出 来 。 例 
如 ， 一 个 Label 物 体 ， 希 望 用 这 个 Label 来 显示 名 称 ， 可 以 给 这 个 Label 物 
体 命名 为 :Name_Label， 这 样 我 们 一 眼看 过 去 束 能 知道 它 的 类 型 


(label) 和 用 途 (显示 name) 。 


图 6.34 展 示 了 一 个 比较 简单 的 UI 结构 的 范例 。 
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6.7.3 避让 场景 以 ; 日 


因为 UI 图 集 在 使 用 时 ， 会 以 一 整个 图 集 全 部 加 载 到 内 存 当中 。 如 
条 有 10 个 系统 ， 每 一 个 系统 的 界面 都 是 全 屏 界 面 ， 都 有 一 张 巨大 的 办 


面 独 有 的 背景 图 ， 那 么 这 10 个 系统 的 界面 所 用 到 的 资源 将 会 导致 内 存 
很 大 。 

而 Unity 有 一 个 机 制 是 切换 场景 之 后 ， 会 清除 以 前 的 内 存 ， 所 以 ， 
在 适当 的 情况 下 ， 可 以 考虑 分 场景 来 制作 UI， 以 减轻 内 存 的 负担 。 相 
当 于 护 开 一 个 UI 实则 是 进入 了 一 个 新 的 场景 ， 看 上 去 束 像 古 全 屏 界 面 
的 效 琳 一样， 退出 UI 面板 就 相当 于 回 到 了 之 前 的 场景 。 


全 UI 


7.1 代 碟 NGUI 的 原理 
7.1.1 与 组 件 的 概念 


Unity 引 警 的 核心 架构 理念 就 是 游戏 物体 (GameObject) 与 组 件 
(Component) 构成 世界 ， 物 体 是 游戏 世界 中 的 核心 单位 ， 也 几乎 是 惟 

一 单位 ， 灯 光 是 一 个 物体 、 角 色 是 一 个 物体 、 地 形 是 一 个 物体 ， 
GameObject 构 成 了 整个 游戏 世界 。 

而 组 件 ， 则 是 物体 产生 工作 的 核心 单位 ， 每 一 个 物体 都 有 一 个 或 
者 多 个 组 件 ， 这 些 组 件 决 定 着 这 个 物体 拥有 哪些 功能 ， 如 最 基础 的 
Transform 组 件 。 

NGUI 中 ， 每 一 个 UI 控件 ， 本 质 上 都 是 一 个 GameObject， 它 工作 的 
原理 是 这 些 GameObject 上 说 赋 予 了 NGUI 的 一 些 脚 本 组 件 。 

所 以 ， 可 以 通过 正常 地 操作 物体 一 样 ， 获 取 物 体 、 获 取 它 喘 上 的 
组 件 类 ， 然 后 修改 其 中 的 成 员 实 现 对 NGUI 的 控制 。 


7.1.2 怎样 用 代 GUI 


我 们 来 演示 一 个 最 简单 的 例子 ， 用 代码 来 修改 一 个 Sprite 皖 件 的 颜 
色 ， 如 图 7.1 所 示 。 图 7.1 中 我 们 在 场景 中 创建 了 一 套 UI， 并 新 增 了 一 个 
UI 控件 ， 它 目前 是 白色 的 。 


首先 我 们 先 创建 一 个 C# 脚 本 (JavaScript 也 可 以 但是， 因为 C# 在 
商业 级 项 目 开 发 中 有 更 广泛 的 应 用 ， 所 以 ， 本 书 均 使 用 C# 作 为 讲 
解 ) ， 命 名 为 ChangeColor， 然 后 双击 打开 : 

Using UnityEngine; 

using System.Collections; 

public class ChangeColor : MonoBehaviour { 

// Use this for initialization 

void Start () { 

} 

// Update is called once per frame 
void Update () { 

} 


A 图 7.1 
这 是 一 个 Unity 中 创建 的 C# 脚 本 的 默认 状态 ， 默 认 生成 了 一 个 和 
文件 名 同名 的 类 、 一 个 Start0 玉 数 、 一 个 Update0 函 数 。 其 中 Start 只 会 


在 第 一 帧 Update 运 行 前 运行 一 次 ， 而 Update 会 在 游戏 中 每 一 帆 都 运行 一 
次 ， 这 些 基础 的 Unity 代 码 知 识 这 里 束 不 多 资 述 了 。 


首先 ， 我 们 要 在 类 中 声明 一 个 GameObject 类 型 的 共有 变量 ， 命 名 
为 : target_sprite， 我 们 将 会 使 用 这 个 变量 作为 要 修改 的 Sprite 的 物体 引 
用 ， 然 后 获取 这 个 Sprite 物体 嘲 上 被 赋予 的 NGUI 的 Sprite 组 件 ， 在 Start 
中 修改 它 的 颜色 为 红色 ， 最 终 代 码 如 下 : 
using UnityEngine; 
using System.Coljections; 
public class ChangeColor : MonoBehaviour { 
public GameObject target_sprite; 
// Use this for initialization 
void Start () { 
/获取 目标 物体 的 Sprite 组 件 
UISprite theSpriteComponent = 
target_sprite.GetComponent<UISprite>(); 
// 修 改 Sprite 组 件 的 color 成 员 变 量 
theSpriteComponent.color = Color.red; 
1 
// Update is called once per frame 
void Update () { 
} 
} 
然后 我 们 将 这 个 脚本 挂 在 任意 一 个 物体 上 (最 好 挂 在 最 上 层 物 
体 ， 方 便 寻 找 和 管理 ; ， 然 后 将 目标 Sprite 拖 入 到 组 件 中 的 共有 变量 引 


用 中 ， 如 图 7.2 所 示 。 
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A 图 7.2 
最 后 运行 游戏 ， 我 们 会 发 现 ， 精 灵图 片 从 最 开始 的 白色 ， 变 成 了 
红色 。 


7.1.3 获取 组 件 的 几 种 方法 


由 上 一 小 节 例子 可 以 看 到 ， 我 们 获取 NGUI 组 件 的 方式 是 声明 
public 变 量 去 引用 物体 ， 获 得 物体 身上 的 组 件 ， 然 后 对 组 件 进行 修改 。 
而 在 游戏 开发 中 ， 经 常会 涉及 大 量 的 UI 控件 ， 如 果 全 部 都 用 Public 变 量 
去 进行 引用 的 话 ， 会 造成 序列 化 过 程 耗 时 太 长 ， 并 且 极其 难以 维护 。 
如 图 7.3 所 示 的 UI 物体 结构 ， 控 件 量 非常 大 ， 很 难 全 部 public 变 量 去 保存 
引用 。 


重 MainUI 
Camera 
Child_Panel 
Anchor_Centel 


reen_MainUI 
Anchor_BottomLeft 


Bulld_Button 
Anchor_Lef 人 t 
Ingot_ Panel 
Anchor_TopLeft 
Ingot 


iIve 

Anchor_Top 

PlayerInfo 
Anchor_TopRight 

Cloth 

Iron 

Medician 

RightMenu 
Anchor_Right 
Anchor_BottomRight 

B attle_B utton 


A 图 7.3 
因为 获取 组 件 这 个 操作 是 NGUI 的 代码 调用 里 最 最 核心 的 一 步 前 提 
操作 ， 下 面 来 了 解 一 下 几 种 获取 UI 组 件 的 方法 。 
1. 方法 1: 引用 物体 


声明 Public 物 体 变量 ， 然 后 把 物体 拖 上 去 保存 该 物体 的 引用 ， 用 
Awake0 或 者 StartO 函 数 获取 组 件 。 

2. 方法 2: 引用 组 件 

声明 一 个 Public 的 、 明 确 的 组 件 类 型 的 变量 (如 声明 一 个 public 
UIButton myBut) ， 然 后 将 物体 拖 上 去 即 可 保存 该 组 件 的 引用 (前 提 是 
这 个 GameObject 上 确实 有 该 类 型 的 组 件 ) 。 值 得 注意 的 是 ，NGUI 的 组 
件 一 般 都 是 以 UI 开 头 的 ， 如 UISprite、UIButton 等 。 

3. 方法 3 寻找 子 物体 

通过 FindChild 方 法 来 一 级 一 级 地 找到 组 件 ， 例 如 上 一 小 节 中 ， 将 
ChangeColor 脚 本 挂 在 了 UIRoot 上， 那么 可 以 修改 代码 成 如 下 来 获取 引 
用 : 


using UnityEngine; 


using System.Collections; 
public class ChangeColor : MonoBehaviour { 
public UISprite target_sprite; 
// Use this for initialization 
void Start () { 
// 先 找到 目标 物体 上 的 组 件 
target_sprite = 
transform.FindChild("Sprite").GetComponent<UISprite>(); 
/修改 Sprite 组 件 的 color 成 员 
target_sprite.color = Colorred; 
} 
// Update is called once per frame 
void Update () { 
} 


4. 方法 4: Find 方 法 〈( 耗 时 ， 不 推荐 ) 

使 用 GameObject.Find() 方 法 来 寻找 一 个 特定 的 特殊 UI 物体 ， 但 是 ， 
这 种 方法 将 会 遇 历 场景 中 的 所 有 物体 ， 非 常 耗 时 ， 不 推荐 使 用 。 

5. 方法 5: FindWithTag (尽量 不 要 使 用 ) 

使 用 GameObject.FindGameObjectWithTag 方法 去 寻找 带 有 某 种 特 
殊 标 签 的 物体 ， 这 种 方法 性 能 上 比 Find 更 快 一 点 ， 但 是 与 本 章 前 3 个 方 
法 相 比 并 没有 优势 ， 并 且 会 涉及 标签 Tag 的 管理 工作 ， 不 是 很 利于 维护 
修改 ， 尽 量 少 使 用 。 


7.1.4 迅速 判断 可 以 修改 的 成 员 


当 我 们 可 以 获取 NGUI 的 组 件 时 ， 那 么 需要 知道 这 个 组 件 到 底 哪些 
成 员 是 可 以 供 我 们 修改 的 ， 否 则 ， 即 使 获取 到 了 组 件 也 没有 用 。 而 我 
们 并 不 可 能 在 需要 时 去 详细 阅读 NGUI 的 源 代码 ， 那 样 将 会 非常 耗 时 
间 ， 而 且 也 失去 了 这 个 插件 便捷 开发 者 的 意义 了 。 所 以 ， 需 要 学 会 判 
断 哪些 成 员 是 可 以 修改 的 成 员 。 

一 般 来 说 ，NGUI 的 每 一 个 组 件 ， 都 将 会 有 一 个 组 件 设置 界面 ， 如 
图 7.4 所 示 的 UISprite 界 面 。 

NGUI 的 组 件 中 ， 提 供 大 家 可 以 修改 的 成 员 有 两 部 分 ， 一 部 分 是 直 
妆 暴 露 在 组 件 界面 中 的 ， 例 如 图 7.4 中 的 界面 中 的 各 个 设置 项 分 别 对 应 
着 : atlas、spriteName 等 变量 。 也 束 是 说 : NGUI 组 件 的 设置 界面 中 的 
几乎 所 有 设置 项 都 有 一 个 相应 的 成 员 变 量 或 者 成 员 函 数 可 以 进行 控制 
和 修改 。 如 果 你 有 需求 去 修改 某 一 个 设置 项 ， 而 你 又 不 知道 它 对 应 的 
是 哪个 变量 ， 那 么 可 以 直接 试 着 输入 这 个 设置 项 的 名 称 ， 一 般 来 说 IDE 
(VS 和 Mono 均 可 以 ) 会 自动 提示 出 相应 的 变量 和 函数 。 
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A 图 7.4 
而 另 一 部 分 可 以 修改 的 成 员 没 有 暴露 出 来 ， 需 要 翻 看 源 代码 才能 
知道 。 我 们 将 在 下 面 罗 列 出 常用 的 组 件 中 的 可 修改 成 员 变 量 。 


7.2 动态 加 载 UI 元 素 
7.2.1 为 什么 中 会 用 到 动态 加 载 UI 元 素 


在 游戏 中 ， 我 们 经 营 会 用 到 动态 加 载 UI 元 素 的 预 设 体 ， 比 如 进入 
一 个 场景 后 ， 场 景 内 的 UI 是 动态 加 载 的 。 又 比如 单 击 一 个 页 面 ， 会 根 
据 玩 家 的 信息 动态 地 生成 一 系列 妆 单 ， 这 个 时 候 菜 单 UI 因 为 会 随 着 玩 
家 的 信息 不 同 而 改变 ， 可 能 就 会 用 到 动态 加 载 和 摧毁 UI。 

为 什么 我 们 会 用 到 动态 加 载 UI? 因为 ， 如 果 我 们 预先 就 把 所 有 的 
UI 部 在 场景 中 做 好 ， 那 么 在 加 载 这 个 场景 时 ， 这 些 所 有 的 UI 部 将 会 在 
加 载 过 程 中 全 部 加 载 进去 并 在 初始 状态 时 一 次 性 全 部 部 嗜好 ， 如 果 UTI 


体系 过 于 庞大 ， 这 样 可 能 导致 会 有 卡 顿 的 体验 。 所 以 ， 避 免不了 会 在 
一 些 特殊 的 地 方 使 用 到 动态 加 载 。 


直接 将 UI 物体 拖 到 Project 视 图 中 ， 则 会 目 动 生成 一 个 Prefab， 这 整 
苹 这 个 UI 的 预 设 体 ， 如 图 7.5 所 示 。 
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A 图 7.5 

我 们 为 什么 要 用 UI 元 素 的 预 设 体 ? 首先 ， 只 有 将 UI 元 素 事 先 保存 
为 预 设 体 ， 才 能 够 允许 在 游戏 运行 过 程 中 由 代码 去 控制 动态 加 载 。 

其 次 ， 游 戏 中 的 UI 体 系 一 般 都 非 党 庞大， 而且， 其 中 有 非常 多 的 
重复 性 ， 所 以 ， 在 游戏 开发 中 要 学 会 擅 用 UI 元 素 的 Prefab。 例 如 ， 一 个 
背包 有 100 个 格子 ， 可 以 只 做 一 个 格子 ， 然 后 将 这 个 格子 保存 为 一 个 
Prefab ， 然 后 目 动 生成 100 个 。 

使 用 UI 元 素 的 Prefab 还 有 一 个 非常 好 的 地 方 在 于 : 修改 的 时 候 ， 可 
以 只 修改 一 个 就 将 所 有 的 同类 元 素 修改 了 。 我 们 依然 拿 背 包 做 例子 ， 
假设 保存 了 一 个 背包 单个 格子 的 Prefab， 现 在 我 们 得 到 需求 ， 需 要 给 每 


一 个 背包 格子 加 上 一 个 外 框 ， 这 个 时 候 如 果 我 们 一 个 格子 一 个 格子 地 
去 加 ， 将 会 非常 痕 费时 间 而 且 容 易 出 错 ， 我 们 就 可 以 在 Heirarchy 窗 口 
中 对 其 中 的 一 个 格子 的 预 设 体 进 行 修改 ， 修 改 完 了 之 后 单 击 如 网 7.6 所 
示 的 Apply 按 钮 即 可 自动 让 所 有 用 到 这 个 预 设 体 的 UI 都 更 新 到 最 新 的 状 


NGUITools. a 


NGUITools.AddChild0 是 NGUI 提 供 的 工具 类 中 最 利用 的 一 个 方 
法 ， 它 可 以 直接 将 一 个 物体 设置 为 男 一 个 物体 的 子 物体 ， 并 且 这 个 子 
物体 的 位 置 直接 束 在 父 物体 所 在 的 位 置 。 

NGUITools.AddChild 函 数 可 以 传人 两 个 参数 : 父 物 体 和 子 物 体 ， 
例如 ， 如 下 所 示 的 脚本 展示 了 动态 加 载 NGUI 的 元 素 的 使 用 方法 ， 该 脚 
本 动态 加 载 了 一 个 UI 元 素 到 Root 下 : 

using UnityEngine; 

using System.Collections; 

public class LoadPrefab : MonoBehaviour { 

/声明 UIRoot 这 个 物体 的 引用 ， 待 会 儿 将 会 在 这 个 物体 下 生成 子 
物体 


public GameObject uiRoot; 


1/ 声明 要 加 载 的 子 物体 预 设 的 名 称 
string prefabName = "Template'"; 
void Start () { 
让 (uiRoot!=nul]) 
{ 
/根据 路 径 将 预 设 加 载 进 内 存 作 为 一 个 GameObject 存 在 
GameObject go = Resources.Load("UI/" + prefabName) as 
GameObject; 
// 使 用 NGUITools.AddChild 方 法 挂 子 物体 
GameObject newObj = NGUITools.AddChild(uiRoot, go); 
// 可 以 将 新 物体 的 名 称 打印 出 来 
Debug.Log(" 新 生成 了 一 个 子 物体 名 叫 : " + newObj.name); 
} 
} 
void Update () { 
} 


7.2.4 NGUITools.AddChild() 和 Instantiate 的 区 别 


我 们 知道 Unity 中 本 号 有 一 个 实例 化 预 设 的 方法 : Instantiate。 那么 
束 来 了 解 一 下 这 两 种 方法 。 其 实 这 两 种 方法 本 质 上 是 完全 一 样 的 ， 只 
不 过 是 NGUI. AddChild 方法 进行 了 包装 ， 以 便 更 快捷 地 增加 于 物体 而 
i 

NGUITools.AddChild(parent,child) 方 法 主要 用 于 快速 给 父 物体 增加 
一 个 子 物 体 ， 如 果 要 使 用 Instantiate 方 法 来 实现 ， 则 需要 以 下 代码 : 


GameObject newObj2 = Instantiate(go, uiRoot.transform.position, 
uiRoot.transform.rotation)as GameObject; 

newObj2.transform.parent = uiRoot.transform; 

其 实 这 两 种 方法 本 质 上 完全 一 样 ，NGUITools.AddChild 方法 在 源 
代码 中 也 是 通过 Instantiate 去 实现 的 。 所 以 ， 在 开发 中 不 必 为 这 两 种 方 
法 纠结 ， 根 据 个 人 喜好 和 需求 灵活 决定 使 用 哪 种 方法 即 可 。 


7.3 擅 用 EventDelegate 事 件 委托 
7.3.1 什么 是 EventDelegate 事 件 委托 


EventDelegate 事 件 委 托 是 NGUI 3.0 以 后 统一 的 底层 传递 消息 、 监 听 
事件 的 机 制 ， 在 NGUI 3.0 版 本 以 前 NGUI 用 的 是 SendMessage 方法 ， 但 
是 效率 太 低 。NGUI 3.0 版 本 以 后 全 部 改 为 了 EventDelegate 机 制 来 进行 
事件 的 监听 ， 效 率 提 高 了 100 倍 。 

EventDelegate 本 质 上 和 C# 的 Delegate 没 有 任何 区 别 ， 它 将 会 负责 
NGUI 中 所 有 的 事件 监听 、 回 调 等 。 例 如 ， 单 击 Button 按 钮 触发 一 个 事 
件 ， 那 么 Button 组 件 中 瓯 会 有 OnClick 的 回调 。 

对 于 熟悉 C# 中 委托 的 读者 可 能 会 更 轻松 地 理解 EventDelegate， 不 
熟悉 的 读者 ， 可 以 将 EventDelegate 理 解 为 一 个 特殊 类 型 的 变量 ， 它 可 以 
赋值 在 任何 一 个 带 有 如 图 7.7 所 示 的 Notify 界 面 中 。 
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A 图 7.7 
7.3.2 I 用 法 


使 用 事件 委托 ， 可 以 将 一 个 函数 整体 当 作 一 个 变量 ， 来 赋值 给 各 
个 组 件 的 回调 模块 ， 也 束 古 图 7.7 中 红 六 所 未 的 Neti 模块 。NGUI 组 件 
的 Notify 模 块 是 一 个 事件 回调 的 List， 它 可 以 支持 多 个 回调 事件 ， 例 如 
一 个 按钮 的 OnClick 的 Notify 中 ， 可 以 挂 载 无 数 个 事件 。 

以 下 代码 示范 了 如 何 将 一 个 范 数 ， 由 代码 动态 赋值 给 Button 的 单 击 
回调 事件 组 ， 让 Button 单 击 后 能 调用 这 个 函数 ; 

using UnityEngine; 


using System.Coljections; 
public class ButtonClick : MonoBehaviour { 
/声明 UIButton 这 个 组 件 的 引用 ， 待 会 儿 将 会 为 这 个 组 件 的 单 击 
事件 屿 值 
public UIButton myButton; 
void Start () { 


if (myButton != null) 
{ 
// 首 先 将 本 脚本 中 的 ClickTheButton() 方 法 变 成 一 个 
EventDelegate 类 型 的 事件 委托 
EventDelegate theED = new EventDelegate(this， 
"ClickTheButton"); 
/方法 1: EventDelegate.Add (组 件 的 Notify 回 调 组 名 称 , 一 个 
EventDelegate 类 型 的 事件 ) 
EventDelegate.Add(myButton.onClick, theED); 
/方法 2: 因为 Notify 回 调 本 喘 殉 是 一 个 事件 组 ， 所 以 直接 Add 
一 个 EventDelegate 类 型 的 事件 
myButton.onClick.Add(theED); 
} 
} 
void Update () { 
4 
/要 作为 EventDelegate 类 型 的 单 击 事件 ， 一 定 要 是 Public 的 
public void ClickTheButton() 
{ 
Debug.Log(" 我 单 击 了 这 个 按钮 ! "); 
} 
} 
我 们 将 这 个 脚本 挂 到 一 个 物体 上 ， 将 一 个 沉 有 BoxCollider 和 


UIButton 组 件 的 物体 拖 到 这 个 脚本 组 件 的 myButton 引用 中 ， 然 后 运 
行 ， 单 击 这 个 按钮 ， 将 会 看 到 控制 全 打印 出 一 句 话 : “我 单 击 了 这 个 按 


”， 证 明 我 们 通过 代码 动态 地 给 UIButton 赋 予 了 一 个 单 击 事件 。 并 


且 在 运行 状态 下 ， 我 们 选中 这 个 Button 物 体 ， 可 以 看 到 它 的 UIButton 组 


件 的 单 击 回 调 部 分 如 图 7.8 所 示 ， 再 次 证 明 我 们 动态 赋值 单 击 事件 成 功 
\ 必 须 运 行 状态 下 赋值 代码 执行 了 之 后 才 看 得 到 ) 。 

注 : 图 7.8 中 我 们 看 到 OnClick 在 运行 后 们 赋予 了 两 个 相同 的 单 击 事 
件 ， 是 因为 我 们 的 脚本 中 为 了 展示 两 种 赋值 的 方法 (上 文 代码 中 的 方 
法 1 和 方法 2) ， 所 以 被 赋值 了 两 裔 ， 实 际 开发 过 程 中 要 避免 这 一 点 。 


A 图 7.8 


7.3.3 哪些 地 方 可 以 使 用 事件 委托 


NGUI 中 ， 所 有 市 有 Notify 回 调 模块 的 组 件 ， 都 可 以 使 用 事件 委 
托 ， 比 如 Tween 动 画 组 件 的 OnFinshed、 按 钮 组 件 的 OnClick、Toggle 开 
天 组 件 的 OnValueChange 等 。 这 些 组 件 的 事件 回调 全 部 都 是 
EventDelegate 类 型 的 ， 使 用 方法 和 上 一 小 万 中 按钮 的 单 击 事件 赋值 一 
样 。 


7.4 巧 用 EventTIrigger 组 件 
7.4.1 什么 是 EventTrigger 组 件 


EventTrigger 组 件 ， 是 新 版 NGUI 中 提供 的 一 种 统一 的 监听 各 种 事件 
的 组 件 。 增 加 方法 为 ， 依 次 选择 
AddComponent 一 NGUI 一 Interaction EventTIrigger。 它 可 以 监听 单 击 、 
按 下 、 选 中 、 拖 虑 等 各 种 事件 ， 组 件 界面 如 图 7.9 所 示 。 

其 中 。 

OnHoverOver: 鼠标 光标 移动 到 目标 上 之 后 触发 。 

OnHoverOut: 鼠标 光标 从 目标 上 移 开 之 后 触发 。 

OnPress: 按 下 的 时 候 触 发 一 次 ， 松 开 的 时 候 再 触发 一 次 。 

OnDragOver: 拖 动 停 住 时 触发 。 

OnDragOut: 拖 动 松手 后 触发 。 

以 上 为 最 弟 用 的 效果 ， 其 他 事件 效果 欢迎 大 家 目 己 去 笑 试 ， 这 里 


就 不 多 资 述 。 


UIEvent Trigger (Script) 


YY On Hover Over 


OnHowerOut 


Notity None (I | 


YY On Press 


TY On Release 


Notity None (Mon 


¥ On Select 


¥ On Deseler 


Notity lone (Mon 


Y On Click/Tap 


Notity None (Mon 
vv On Double-Click /Tap 
Notity None (Mon 
YY On Drag Over 


Notity None (I | 


Vv On Drag Out 


Notity None (I | 


A 图 7.9 


EventTrigger 本 质 上 束 是 一 个 事件 监 昕 的 集合 ， 每 一 种 事件 都 有 一 
个 Notify 回 调 事件 组 ， 我 们 可 以 像 为 UIButton 的 单 击 事件 赋值 一 样 来 为 
它 赋 值 ， 比 如 可 以 拖 动物 体 到 这 个 Notity 设 置 项 中 ， 会 出 现 这 个 物体 带 
有 的 所 有 脚 体 组 件 中 的 所 有 的 公共 函数 (只 有 Public 公 共 画 数 才 会 在 这 
里 显示 ， 非 Public 是 无 法 外 部 访问 调用 的 ) ， 然 后 我 们 在 这 些 出 现 的 公 
共 函 数 中 选择 一 个 我 们 想 要 在 该 事件 触发 时 执行 的 函数 ， 融 完成 了 这 
个 事件 触发 的 赋值 ， 具 体 代码 如 下 : 

void OnPress() 


Debug.Log("Press"); 
} 
void OnDragOut() 


{ 
Debug.Log("DragOut"); 


7.5.1 UILabel 


首先 ， 我 们 假定 获取 了 一 个 UILabel 的 实例 label: 
UILabel label= GetComponent<UILabel>(); 


label.enabled = false/true; 


label.gameobject.SetActive(false/true); 


第 一 种 方法 息 头 财 组 件 ， 第 二 种 方法 站 直接 隐藏 物体 。 


We 
label.text = "这 里 是 给 文本 赋予 内 容 " 
ah 


label.fontsize = 100; 

这 里 需要 注意 的 是 ，Label 的 区 域 限制 类 型 ， 如 果 是 ShrinkContent 
则 字体 会 被 始终 目 动 缩放 以 限制 在 控件 范围 内 。 

e 整 体 改变 文本 颜色 : 

label.color = new Color(1,1,1,1); 


label.color = Colorred; 

在 改变 颜色 时 ， 如 果 使 用 new Color 给 颜色 赋值 ， 要 注意 new 
Color 需要 的 参数 依次 是 RGBA 值 ， 其 中 最 后 的 A 值 可 以 没有 。 对 于 
RGBA 值 ， 需 要 将 其 从 0~255 转 换 为 0 一 1 的 一 个 小 数 ， 转 换 方式 为 颜色 
的 色 值 除 以 255。 另 外 ，Color 提供 了 一 些 静 态 的 色 值 供 直接 调用 ， 如 
红色 red、 黄 色 yellow、 绿 色 green 等 。 

e 使 文本 某 些 文字 不 受 闫 色 影 响 : 

label.text = "不 受 影响 的 文字 内 容 是 : [c] 这 里 的 文字 "; 

在 这 里 我 们 在 文本 中 插入 了 “关键 子 ”[c]， 所 谓 的 关键 字 ， 束 是 指 
在 文本 中 一 旦 出 现 ， 它 驳 会 被 当成 一 种 指令 不 会 被 显示 在 文本 中 ， 而 
会 影 啊 其 后 面 的 文字 。 在 这 里 的 例句 中 ， 关 键 字 [da] 后 面 的 文字 都 将 不 
受 整 体 颜 色 的 影响 而 保持 白色 。 

e 局 部 改变 某 些 字 的 颜色 。 

如 果 要 改变 Label 文 本 中 的 字体 颜色 ， 可 以 插入 十 六 进 制 的 颜色 值 
实现 ， 例 如 ; 

label.text=" 我 将 会 改变 颜色 为 [FF0000] 红 色 "; 

在 这 行 代码 中 ，[FF0000] 会 作为 关键 字 不 会 在 文本 显示 出 来 ， 它 会 
将 它 之 后 的 文本 内 容 全 部 变 成 红色 。 

e 修 改 深度 : 

label.depth = 10; 


7.5.2 UISprite 


首先 ， 我 们 假定 获取 了 一 个 UISprite 的 实例 sprite: 
UISprite sprite = GetComponent< UISprite >(); 
e 显 示 / 隐 减 图 集 : 


sprite.enabled = false/true; 


sprite.gameobject.SetActive(false/true); 

第 一 种 方法 是 关闭 组 件 ， 第 二 种 方法 是 直接 隐藏 物体 。 

e 修 改 精灵 图 片 : 

sprite.spriteName = newName ; 

修改 图 片 的 名 称 后 ， 会 目 动 调用 当前 图 集 下 的 该 名 称 图 片 。 如 果 
当前 图 集 下 不 存在 该 名 称 的 精灵 ， 则 将 不 会 显示 任何 图 像 内 容 。 

e 修 改 颜 色 和 深度 。 

和 修改 字体 颜色 深度 一 样 。 


7.5.3 UITTexture 


首先， 我 们 假定 获取 了 一 个 UITexture 的 实例 texture: 

UITexture texture = GetComponent< UIlTexture >(); 

e 获 取 并 修改 图 像 内 容 : 

texture.mainTexture = Resources.Load(" 这 里 是 新 图 片 的 路 径 ") as 
Texture; 

e 修 改 尺 寸 : 

texture.SetDimensions(200,200); 

这 是 一 个 所 有 控件 (label 和 sprite) 都 可 以 使 用 的 方法 ， 需 要 传 入 
两 个 参数 : 视 度 和 高 度 。 

e 修 改 颜 色 和 深度 。 

和 文字 的 颜色 深度 修改 方法 一 样 。 


7.5.4 UIButton 


首先 ， 我 们 假定 获取 了 一 个 UIButton 的 实例 button: 
UIButton button = GetComponent< UIButton>(); 
既然 是 一 个 按钮 控件 ， 那 必须 带 有 BoxCollider 来 接收 操作 输入 : 


BoxCollider boxcollider = GetComponent<BoxCollider>(); 

e 让 按钮 禁用 : 

boxcollider.enabled = false; 

特别 需要 注意 的 是 ， 按 钮 的 禁用 是 非常 特殊 的 一 种 情况 ， 因 为 ， 
即使 没有 UIButton 组 件 ， 也 能 通过 OnClick 等 事件 监听 方式 (如 
EventTrigger 中 那些 ) 实现 按键 效果 ， 所 以 ， 要 至 用 按钮 ， 我 们 应 该 茶 
用 的 是 接收 事件 的 根本 组 件 : BoxCollider 。 

也 只 有 当 BoxCollider 被 禁用 了 ，UIButton 才 会 变 成 Disabled 的 颜 
色 。 

e 给 按钮 赋予 事件 。 

前 文 讲解 EventDelegate 已 经 讲 过 ， 不 再 警 述 。 


7.5.5 UIGrid 


首先 ， 我 们 假定 获取 了 一 个 UIGrid 的 实例 grid: 
UIGrid grid = GetComponent< UIGrid>(); 

e 获 取 并 改变 网 格 的 间距 : 

grid.cellHeight = 500; 

grid.cellWidth = 500; 

e 使 网 格 立 即 重新 排列 : 

方法 1: grid.repositionNow = true; 

方法 2: grid.Reposition(O: 


7.5.6 UISlider 


首先 ， 我 们 假定 获取 了 一 个 UISlider 的 实例 Slider: 
UISlider slider = GetComponent< UISlider>(); 
e 获 取 并 更 改进 度 条 的 进度 值 : 


slider.value = 1.23f; 

这 里 进度 值 的 动态 赋值 应 该 是 一 个 0 一 1 的 浮 点 数 ， 因 为 进度 的 范 
围 就 是 0%~1009%。 当 对 它 进 行 实 时 赋值 时 ， 就 是 常见 的 血 量 条 等 。 例 
如 : 

slider.value = currentHP/maxHP:; 

e 获 取 并 更 改进 度 条 的 透明 度 值 : 

slider.alpha = 1.35f; 

e 获 取 并 更 改进 度 条 每 一 步 变 动 的 步 幅 值 : 

slider.numberOfSteps = 10; 

这 里 赋值 可 以 设置 进度 条 一 共有 几 个 点 ， 也 就 是 进度 条 将 会 一 段 
一 段 地 变化 。 例 如 ， 填 入 5， 则 进度 条 只 会 存在 0、0.25、0.5、0.75、1 
5 种 情况 。 

e 进 度 条 的 进度 值 变动 的 事件 回调 : 

slider.onChange.Add( new EventDelegate(this,"A") ); 

这 里 赋值 的 方法 ， 与 前 面 讲解 EventDelegate 一 样 。 

e 可 拖 动 进度 条 拖 动 结束 后 的 事件 回调 ; 

slider.onDragFinished.Add( new EventDelegate(this,"A") ); 


7.5.7 UIToggle 


首先 ， 我 们 假定 获取 了 一 个 UIToggle 的 实例 toggle: 
UIToggle toggle = GetComponent< UIToggle>(); 

e 获 取 并 修改 它 的 选中 状态 : 

toggle.value = false/true; 

e 获 取 并 修改 它 所 属 的 开关 组 : 

toggle.group = 10; 

选中 状态 改变 后 的 事件 回调 : 


芒 


toggle.onChange.Add( new EventDelegate(this,"A") ); 
7.5.8 UIInput 


首先 ， 我 们 假定 获取 了 一 个 UIInput 的 实例 input: 

UIInput input = GetComponent< UIInput>(); 

e 获 取 并 修改 用 户 输入 的 内 容 的 值 : 

input.value = "这 里 是 输入 框 的 值 "; 

这 是 Input 最 常用 的 一 个 变量 ， 因 为 经 常 需要 获取 玩家 输入 的 内 


， 这 个 变量 是 一 个 string 类 型 的 。 


e 改 变 文 本 颜色 : 
input.activeTextColor = new Color(1,1,1,1); 


这 个 功能 在 登录 、 注 册 等 功能 上 很 单 匈 ， 比 如 当 用 户 输入 的 文本 


不 符合 某 种 要 求 时 ， 殉 让 文本 变 红 ， 如 账号 错误 。 


e 提 区 文本 和 改变 的 事件 回调 : 
input.onSubmit.Add( new EventDelegate(this,"A") ); 
input.onChange.Add( new EventDelegate(this,"A") ); 


7.5.9 UIPanel 


首先 ， 我 们 假定 获取 了 一 个 UIPanel 的 实例 panel: 
UIPanel panel = GetComponent< UIPanel>(); 

e 改 变 Panel 的 透明 度 : 

panel.alpha = 0.5f; 

e 改 变 Panel 的 深度 : 

panel.depth = 100; 

e 改 变 Panel 的 泻 染 次 序 : 

panel.renderQueue = UIPanel.RenderQueue.StartAt; 


panel.startingRenderQueue = 3000; 

这 个 功能 会 和 Depth 有 一 些 神 突 ， 因 为 它 是 最 决定 渔 染 次 序 的 。 
当 我 们 使 用 粒子 系统 在 UI 界 面 上 一 起 显示 时 ， 粒 子 系统 的 RenderQueue 
一 般 为 3000， 如 果 Pnael 的 RenderQueue 高 于 3000， 则 永远 会 遮挡 粒子 ， 
反之 则 粒子 会 在 Panel 前 面 。 

e 重 新 泻 染 画 面 : 

panel.RebuildAllDrawCalls(); 

这 是 重新 建立 所 有 的 DrawCall， 我 们 知道 DrawCall 是 CPU 发 送 给 
GPU 的 绘图 指令 ， 可 见 这 是 一 个 非常 霸道 的 功能 ， 将 会 有 更 长 的 延迟 
消耗 ， 所 以 ， 一 般 情况 不 要 使 用 。 它 一 般 用 在 NGUI 某 些 层级 改变 了 之 
后 ， 没 有 及 时 刷新 的 情况 下 。 

例如 ， 我 们 在 游戏 中 ， 假 设 有 Panel A 深度 为 1、Panel B 深度 为 2。 
我 们 动态 地 将 一 个 控件 由 PanelA 下 面 移 到 Panel B 下 面 ， 我 们 有 时 候 会 
发 现 这 个 控件 并 没有 立即 因为 Panel B 的 高 深度 而 立即 显示 在 Panel A 的 
上 层 ， 这 个 时 候 我 们 就 需要 手动 刷新 显示 ， 束 可 以 使 用 这 个 
RebuildAllDrawCallO 方 法 。 


7.5.10 UICamera 


UICamera 组 件 一 般 会 极 少 去 调用 它 ， 下 面 来 了 解 儿 个 可 能 用 得 上 
的 静态 方法 或 者 变量 。 

UICamera.IsSOverUI， 返 回 一 个 bool 值 ， 我 们 单 击 控件 之 类 的 操作 
在 NGUI 底 层 都 是 依赖 射线 实现 的 ， 这 个 方法 是 判断 最 后 一 个 射线 是 否 
击 打 在 UI 上 。 

UICamera.IsPressed(Gameobject go)， 这 个 方法 是 检验 当前 情况 


下 ， 是 人 否 按 住 了 某 一 个 物体 ， 比 如 传 入 这 个 物体 作为 方法 的 参数 。 


另外 ， 我 们 可 以 像 操控 其 他 控件 一 样 ， 去 获取 UICamera 的 实例 组 
件 ， 然 后 修改 它 的 组 件 面板 中 的 各 项 值 ， 方 法 和 操控 其 他 组 件 一 模 一 
样 。 因 为 对 UICamera 的 操作 一 般 很 少见 ， 一 般 也 就 偶尔 改 一 下 Depth 之 
类 的 ， 所 以 ， 这 里 就 不 多 描述 了 ， 大 家 可 以 按照 操控 其 他 组 件 的 方式 
自主 进行 尝试 。 


7.6.1 为 什么 动画 单独 出 


在 这 里 ， 我 们 将 NGUI 的 动画 (主要 指 Tween 动 画 ) 单独 讲解 ， 主 
要 是 因为 动画 它 有 一 个 最 大 的 特点 ， 它 不 停 地 进行 插值 改变 。 例 如 ， 
我 们 执行 一 个 位 置 从 (0,0,0) 变换 到 (0,10,0) 的 Tween 动画 ， 当 执行 
到 一 半 的 时 候 也 就 是 移动 到 (0,5,0) 的 位 置 时 ， 我 们 关闭 动画 组 件 ， 
会 发 现 物 体 停 在 了 (0,5,0) 的 位 置 。 

正 因 为 动画 的 这 种 实时 改变 的 特性 ， 所 以 ， 经 常会 碰 到 以 下 很 多 
问题 。 

(1 


5 


动画 播放 完了 ， 表 播放 第 二 裔 整 没 有 戏 末 了 。 

2 ee 半 ， 再 重新 播放 它 还 是 会 从 一 半 的 地 方 开始 。 

(3) 很 多 其 他 的 问题 .…… 

在 游戏 的 运用 中 ， 除 了 一 些 基 本 的 、 简 单 的 动 
画 可 以 依靠 组 件 激 活 时 的 自动 播放 去 执行 以 外 (如 Pingpong 和 Loop 动 
画 ) ， 很 多 时 候 都 需要 代码 去 手动 控制 动画 


a 


7.6.2 Tween 动 画 


获取 Tween 动 画 组 件 最 简单 的 方法 就 是 直接 获取 指定 类 型 的 组 件 ， 
比如 对 于 TweenPosition 组 件 ， 我 们 可 以 通过 
GetComponent<TweenPosition>() 来 获得 这 个 位 移动 画 的 组 件 。 

Tween 动 画 都 继承 上 自 UITweener 类 ， 所 以 ， 如 果 一 个 物体 号 上 有 很 
多 种 Tween 动 画 ， 而 我 们 要 一 起 控制 它们 ， 可 以 直接 获取 物体 号 上 的 
UITweener。 比 如 一 个 物体 届 上 有 3 个 Tween 动 画 ， 一 个 位 置 动画 、 一 个 
放 缩 动画 、 一 个 变色 动画 ， 我 们 可 以 通过 GetComponents<UITweener> 
0 获得 一 个 数组 ， 这 个 数组 内 容 丈 是 物体 号 上 所 有 的 Tween 动 男 。 这 里 
一 定 要 注意 GetComponents (获取 多 个 组 件 ) 和 GetComponent (获取 单 
个 组 件 ) 的 区 别 。 

需要 注意 的 是 ， 如 果 获 取 具 体 类 型 的 组 件 ， 可 以 修改 所 有 值 ， 如 
果 获 取 的 是 UITweener， 因 为 这 是 一 个 基 类 ， 所 以 只 能 修改 所 有 动画 都 
共有 的 那些 变量 。 

e 激 活 关 闭 Tween 动 画 组 件 : 

tween.enabled = true/false; 

这 一 个 方法 在 针对 Loop 和 Pingpong 动 画 时 极其 有 用 ， 因 为 Loop 和 
Pingpong 动 画 都 是 没有 结束 的 ， 它 们 属于 激活 就 播放 、 禁 用 束 和 暂停 。 需 
要 注意 的 是 ， 禁 用 后 物体 的 状态 将 会 停 在 动画 被 禁用 的 那 一 刹那 ， 如 
宁 禁 用 后 希望 动画 复原 需要 手动 用 代码 进行 复原 。 

e 播 放 Tween 动 画 。 

对 于 一 次 性 播放 的 动画 ， 也 残 是 Once 类 型 的 动画 ， 播 放 一 次 后 它 
将 不 会 再 播放 第 二 次 ， 这 个 时 候 如 果 我 们 需要 用 代码 手动 去 控制 它 播 
放 ， 则 可 以 使 用 : 

正 同 播放 : tween.Play(true); 或 者 tween.PlayForward(); 

反问 播放 : tween.Play(false); 或 者 tween.PlayReverse(): 

如 果 有 多 个 同类 组 件 ， 例 如 有 3 个 TweenPosition 组 件 ， 我 们 希望 在 
一 定 的 场合 下 只 控制 其 中 一 个 去 播放 ， 可 以 给 这 3 个 组 件 分 别 设 为 不 同 


的 Group， 例 如 分 别 设 为 1、2、3， 然 后 再 进行 判断 播放 ， 有 具体 代码 如 
下 : 
UITweener tweeners = GetComponents<UITweener>(); 


for (inti = 0; i < tweeners.Length; i++ ) 


{ 
if (tweeners[i].group==1) 
{ 
tweeners[il].Play(true); 
break; // 找 到 需要 播放 的 动画 后 ， 就 跳出 循环 
} 
} 


e 复 原 Tween 动 画 。 
动画 是 不 会 目 动 复原 鸭 ， 所 以 ， 播 放 时 如 果 碰 到 没有 复原 导致 的 
现象 时 ， 可 以 手动 通过 代码 进行 复原 : 


UITweener tween = GetComponent<UITweener>(); 


tween.ResetIoBegining(); 

这 种 方法 会 使 动画 回 到 原点 ， 这 个 原点 并 不 是 指 的 是 起 点 ， 如 采 
动画 是 正 问 播放 ， 这 个 原点 束 是 起 点 ， 如 采 动 男 当 时 是 反 回 播放 的 ， 
这 个 原点 就 是 终点 。 

e 改 变 Tween 动 男 变 量 。 

首先 我 们 可 以 轻易 地 改变 UITweener 部 分 的 变量 ， 例 如 修改 动画 持 
续 时 间 : tween.duration = 1.0f 。 

例如 修改 动画 的 所 属 组 : tween.group = 3。 

如 果 要 修改 非 Tweener 部 分 的 变量 ， 就 需要 获取 具体 类 型 的 组 件 ， 
例如 ， 假 设 要 修改 一 个 位 移动 画 的 初始 值 和 结束 什 ， 这 个 时 候 获 取 
Tweener 束 没有 用 了 ， 因 为 UITweener 是 一 个 基 类 ， 所 以 ， 这 种 情况 下 
需要 获取 这 个 位 移动 画 : 


TweenPosition tween = GetComponent<TweenPosition>(); 
tween.from = new Vector3(1,1,1); 

tween.to = new Vector3(2,2,2); 

eTween 功 男 播 放 完 毕 的 事件 回调 : 

tween.onFinished.Add( new EventDelegate (this,"A") ); 

这 里 需要 注意 的 是 ，Loop 和 Pingpong 动 画 是 没有 结束 的 。 


7.6.3 关于 PlayTween 和 PlayAnimation 


天 于 PlayTween 和 PlayAnimation 最 重要 的 就 症 两 个 用 法 : 播放 和 复 
原 。 对 于 播放 ， 如 有 果 和 希望 手动 控制 动画 进行 播放 ， 那 么 PlayTween 和 
By mn 是 Forward 方 同 的 ， 然 后 可 以 通过 Play(true/false) 来 进 

行 正 同 / 反 辣 播放。 

我 们 可 以 在 播放 前 通过 playtween.resetIfDisabled = true 来 使 动画 在 
播 完 禁用 后 目 动 复原 。 

我 们 可 以 使 用 onFinished 来 对 PlayTween 和 PlayAnimation 进 行 结 
事件 的 回调 ， 这 样式 可 以 避免 了 去 对 具体 的 Tween 动 画 进行 结束 事件 设 
置 ， 更 易于 管理 和 维护 。 

天 于 动画 的 一 些 更 多 的 成 员 变 量 和 函数 ， 大 家 可 以 多 进行 笑 试 。 
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在 本 章 中 ， 我 们 将 会 进行 一 系列 的 案例 实战 讲解 ， 包 含 目前 主流 
游戏 中 的 各 种 主流 模块 。 由 于 篇 幅 有 限 ， 我 们 只 会 挑选 最 常用 的 游戏 
UI 模块 来 讲解 制作 ， 其 中 将 会 包括 : 

e 模 块 需求 分 析 

eUI 制 作 讲 解 

e 使 用 逻辑 讲解 

e 源 码 讲 解 

需要 说 明 的 是 ， 本 章 讲解 的 案例 ， 需 要 Unity 4.0 及 更 高 的 版 本 ， 
需要 NGUI 3.6.0 及 更 高 的 版 本 。 本 章 使 用 的 是 Unity 4.5.4 和 NGUI 
3.7.2。 为 了 让 大 家 能 够 更 方面 地 学 习 案例 ， 在 本 章 所 有 的 案例 中 ， 我 
们 都 将 使 用 NGUI 目 市 的 资源 ， 不 会 使 用 特殊 资源 。 

NGUI 大 多 数 的 知识 点 都 已 经 在 前 文 当 中 包含 了 ， 所 以 本 章 只 挑选 
了 几 个 UI 模 块 来 讲解 。 如 果 读 者 对 NGUI 的 一 些 模块 有 疑问 ， 建 议 详 细 
回顾 前 面 章节 中 与 该 模块 相关 的 内 容 ， 或 者 直接 参看 第 9 章 一 些 常 见 问 
题 的 解答 。 

如 果 需 要 更 多 的 案例 ， 欢 迎 进 入 Project 面 板 : 
Assets/NGUI/Examples/Scenes 中 观看 官方 提供 的 一 系列 案例 。 


8.1.1 示意 图 和 和 需求 分 析 


在 本 章 中 ， 我 们 将 会 制作 一 个 如 图 8.1 所 示 的 角色 头像 状态 栏 界 
面 。 这 个 界面 在 RPG 游 戏 中 几乎 是 必 备 界面 。 

下 面 我 们 来 了 解 一 下 这 个 界面 的 功能 需求 : 

e 显 示 角 色 的 头像 ， 

e 显 示 角 色 的 名 称 ; 

e 实 时 更 新 角色 的 血 量 百分比 ， 精 确 到 小 数 点 后 两 位 ; 

e 实 时 更 新 角色 的 魔法 量 百分比 ， 精 确 到 小 数 点 后 两 位 ; 

e 界 面 开 发 分 辨 率 标准 为 1920x1080| 

e 这 个 界面 模块 始终 处 于 屏幕 左上 和 角 ; 

e 角 色 名 称 最 多 4 个 字 。 


二 我 是 小 明 
| 83.55% 


A 图 8.1 
8.1.2 设 二 UI 


我 们 将 会 按照 以 下 步骤 来 制作 UI。 

1. 创建 UI 

我 们 在 场景 中 创建 一 个 3DUI， 将 UIRoot 命 名 为 MainUI 。 
2.， 设置 分 辨 率 


因为 开发 分 辩 率 标准 为 1920x1080， 所 以 ， 将 Game 的 视窗 大 小 调 
整 为 1920x1080， 并 且 将 UIRoot 的 缩放 模式 (Scaling Style) 改 为 “ 缩 
放 ”， 并 设置 Height 为 1080。 

3. 设置 销 点 

由 需求 知道 这 个 界面 模块 始终 处 于 左上 角 ， 所 以 ， 在 UIRoot 下 创 
建 一 个 Anchor， 创 建 方 法 为 Unity 顶 部 ， 依 次 选择 NGUI 羔 单 
一 Creat 一 Anchor， 并 将 Anchor 设 置 为 TopLeft。 为 了 方便 管理 ,将 
Anchor 物 体 命名 改 为 Anchor_TopLeft 。 

4. 制作 头像 

我 们 为 了 管理 这 个 模块 ， 先 在 Anchor 下 创建 一 个 Panel， 命 名 为 
RoleStateUI， 意 为 角色 状态 界面 。 然 后 在 Panel 下 创建 一 个 Sprite，Atlas 
选用 NGUI 自 带 的 FantasyAtlas，Sprite 选 择 Glow， 这 就 是 我 们 要 拿 来 当 
作 头 像 图 标底 的 精灵 ， 为 了 美观 ， 我 们 将 这 个 Sprite 设 置 为 Sliced 模 
式 ， 并 命名 为 Head 。 

然后 我 们 移动 它 到 左上 和 角 最 合适 的 位 置 上 ， 在 它 下 面 创建 一 个 子 
物体 Sprite， 命 名 为 HeadIcon， 然 后 Sprite 图 片 选 用 OrcArmor-Bracers 。 
我 们 就 用 这 个 图 片 来 当 作 角色 的 头像 图 标 。 

5. 制作 血 条 

我 们 在 RoleStateUI 下 面 再 创建 一 个 Sprite， 命 名 为 HP_Slider， 意 为 
血 条 的 意思 ， 图 片 选用 图 集中 的 Glow， 设 为 Sliced 模 式 ， 然 后 调整 尺寸 
到 一 个 我 们 需要 的 血 条 大 小 ， 它 将 会 是 角色 血 条 的 底子 。 然 后 在 这 个 
HP_Slider 上 增加 一 个 组 件 : UISlider， 增 加 方式 为 ， 点 中 这 个 物体 ， 在 
Inspector 面 板 中 依次 单 击 AddComponent 一 NGUI~ Interaction 一 NGUI 
Slider ° 

在 这 个 血 条 底子 HP_Slider 下 创建 一 个 子 物体 Sprite， 命 名 为 
Foreground， 它 将 作为 表示 血 条 进度 的 条 子 ，Sprite 图 片 选 用 图 集中 的 
Glow， 设 置 好 尺寸 大 小 后 ， 将 它 的 颜色 改 为 红色 ， 表 示 这 是 一 个 血 


条 。 并 将 这 个 Foreground 物体 拖 动 到 HP_Slider 物体 的 UISlider 组 件 中 
的 Foreground 设 置 项 中 ， 将 它 和 进度 条 组 件 关 联 起 来 。 

在 这 个 血 条 底子 HP_Slider 下 再 创建 一 个 子 物体 Label， 命 名 为 
PercentLabel， 意 为 百分比 文本 ， 调 整 文本 的 大 小 和 位 置 ， 为 了 让 文字 
看 上 去 更 清晰 ， 我 们 可 以 去 掉 Gradient 的 勾 让 它 纯 日 色 显 示 。 

6. 制作 魔法 条 

将 刚 制作 好 的 血 条 复制 一 份 《直接 使 用 Ctrl+C、Ctl+rV 复 制 即 
可 ) ， 然 后 调整 它 的 位 置 到 血 条 下 方 ， 将 它 的 物体 名 称 重 新 命名 为 : 
MP Slider 。 

7. 制作 角色 名 文本 

在 RoleStateUI 下 创建 一 个 Label， 命 名 为 NameLabel， 调 整 这 个 文本 
物体 到 血 条 上 方 ， 调 整 好 尺寸 大 小 ， 并 去 掉 Gradient 的 勾 让 它 没有 渐变 
纯 日 显示 。 

因为 角色 名 称 最 多 4 个 字 ， 所 以 ， 我 们 需要 提前 输入 4 个 字 上 去 ， 

看 看 Label 控 件 的 尺寸 是 否 合适 。 
制作 好 后 的 UI 结构 图 就 如 图 8.2 所 示 。 


€ Game 
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A 图 8.2 


这 个 UI 结构 目前 来 看 ， 是 一 个 比较 合理 并 且 清 晰 的 UI 结构 ， 我 们 
来 梳理 检查 一 下 UI 有 没有 少 关键 点 。 
1) 分 辨 率 相关 的 设置 (UIRoot) 。 
销 点 设置 。 
血 条 上 的 Slider 组 件 是 否 天 联 了 Foreground 。 
蓝 条 上 的 Slider 组 件 是 否 天 联 了 Foreground 。 
各 个 Label 的 大 小 和 最 大 文字 数量 是 否 已 经 测试 好 效果 本。 
注意 : 因为 大 多 数 时 候 NGUI 会 自动 给 新 增加 的 控件 的 Depth 增 加 
1， 所 以 ， 这 里 我 们 没有 去 检查 Depth， 但 是 在 实际 开发 中 ， 大 家 要 养 
成 检查 Depth 的 习惯 。 


8.1.3 设 ; 写 代 


声明 : 本 章节 所 涉及 的 代码 部 分 ， 均 只 为 它 所属 的 案例 服务 ， 主 
要 目的 是 给 读者 讲 清楚 一 个 简易 的 UI 模块 功能 的 完整 开发 的 思路 ， 并 
不 代表 实际 开发 中 的 标准 代码 。 在 实际 开发 中 ， 具 体 项 目 有 具体 的 代 
码 设计 和 书写 规范 ， 请 读者 重点 理解 思路 。 

一 般 来 说 ， 游 戏 中 会 有 一 个 单 例 脚本 来 管理 角色 的 一 些 数据 信 
居 ， 这 个 脚本 不 继承 目 Mono 类 ， 属 于 一 个 单 例 脚本 ， 主 要 起 一 个 存 取 
并 管理 数据 的 作用 。 我 们 先 创 建 一 个 脚本 ， 命 名 为 Player.cs， 然 后 打开 
它 ， 删 掉 它 对 Mono 类 的 继承 ， 删 掉 上 自 带 的 Start 和 Update 函 数 (因为 这 
两 个 函数 没有 用 处 了 ) 。 

首先 ， 需 要 在 这 个 脚本 中 声明 一 个 静态 的 实例 ， 并 书写 一 个 公共 
的 获取 静态 实例 的 静态 方法 ， 让 它 像 单 例 一 样 运作 ， 方 便 我 们 存 取 数 
据 。 

然后 在 这 个 脚本 中 声明 5 个 私有 变量 : playerName (string 类 型 ， 表 
示 和 角色 名 称 ) 、maxHp (float 类 型 ， 表 示 最 大 生命 值 ) 、currentHp 
float 类 型 ， 表 示 当 前 生命 值 ) 、maxMp (float 类 型 ， 表 示 最 大 魔法 
值 ) 、currentMp _ (float 类型， 表示 当前 魔法 值 ) ， 我 们 将 名 称 变量 暂 
时 赋值 为 “ 张 三 "， 男 外 4 个 私有 变量 全 部 都 临时 赋值 为 1000， 并 为 它们 
书写 公有 的 设置 /获取 函数 。 

注 1: 声明 私有 变量 ， 然 后 书写 共有 的 设置 /获取 函数 ， 不 但 可 以 保 
护 访问 的 安全 性 ， 还 可 以 在 以 后 可 能 出 现 的 复杂 的 数据 存 取 操作 中 更 
加 方便 。 

注 2， 因 为 UISlider 组 件 的 进度 值 是 一 个 浮 点 数 ， 我 们 也 需要 将 进 
度 显 示 到 小 数 点 后 两 位 的 百分比 ， 所 以 ， 这 里 对 生命 HP 和 魔法 MP 全 部 
都 采用 float 类 型 ， 以 方便 使 用 。 

具体 代码 如 下 (Player.cs) : 


using UnityEngine; 
using System.Collections; 
public class Player { 
/声明 静态 实例 
private static Player Instance; 
/获取 静态 实例 
public static Player GetInstancel() 
{ 
if (Instance == null) 
{ 
Player ins = new Player(); 
Instance = ins; 
return Instance; 
} 
else 
{ 


return Instance; 


} 

// 声 明 私 有 变量 

private string playerName = " 张 三 "; 
private float maxHp = 1000; 

private float currentHp = 1000; 
private float maxMp = 1000; 
private float currentMp = 1000; 

// 公 有 的 设置 获取 方法 


public void Set_playerName(string value) 


playerName = value; 


} 
public string Get_playerName() 


{ 


return playerName; 


} 
public void Set_maxHp(float value) 


{ 


maxHp = value; 


} 
public float Get_maxHp() 


{ 


return maxHp; 


} 
public void Set_currentHp(float value) 


{ 
currentHp = Mathf.Min(value, maxHp); 


} 
public float Get_currentHp() 


{ 


return currentHp; 


} 
public void Set maxMp(float value) 


{ 
maxMp = Mathf.Min(value, maxMp); 


public float Get_maxMp() 
{ 


return maxMp; 


} 
public void Set_currentMp(float value) 


{ 


current Mp = value; 


} 
public float Get_current Mp() 


{ 


return currentMp; 


} 
现在 我 们 需要 做 的 是 制作 UI 脚 本 ， 创 建 一 个 新 的 脚本 ， 命 名 为 


RoleStateUI， 然 后 打开 ， 在 其 中 声明 UI 组 件 的 引用 并 书写 逻辑 ， 为 了 
方便 ， 在 Update 中 书写 一 个 “ 扣 血 ”和 “加 血 ” 的 功能 ， 来 验证 我 们 的 逻 


辑 。 


我 们 先 来 看 看 代码 : 
using UnityEngine; 
using System.Coljections; 
public class RoleStateUI : MonoBehaviour { 
public UILabel playerNameLabel; 
public UISlider hpSlider; 
public UISlider mpSlider; 
public UILabel hpPercentLabel; 
public UILabel mpPercentLabel; 
void Start () { 


/检查 引用 的 健全 性 ， 这 是 一 个 查 错 的 好 习惯 
让 (playerNameLabel == null) 
{ 
Debug.Log(" 角 色 名 称 Label 的 引用 丢失 了 1 让 ); 
} 
else 
{ 
// 为 角色 名 称 赋值 
playerNameLabel.text = 
Player.GetInstance().Get_playerNamel(); 
} 
if (hpSlider == null) 
{ 
Debug.Log(" 角 色 血 条 的 引用 丢失 了 ! "); 
} 
if (mpSlider == nul]) 
{ 
Debug.Log(" 角 色魔 法 条 的 引用 丢失 了 1 "); 
} 
if (hpPercentLabel == null) 
{ 
Debug.Log(" 角 色 血 量 文字 的 引用 丢失 了 1! "); 
} 
让 (mpPercentLabel == null) 
{ 
Debug.Log(" 角 色魔 法 量 文 字 的 引用 丢失 了 1! "); 
} 


} 
void Update () { 
// 书 写 一 个 测试 用 的 方法 ， 来 扣 血 和 加 血 
// 按 下 A， 则 扣 血 182， 按 下 B 加 血 114 
if (Input.GetKeyDown(KeyCode.A)) 
{ 
Player.GetInstance().Set_currentHp(Player.GetInstance().Get 
_currentHp() - 182); 
} 
if (Input.GetKeyDown(KeyCode.B)) 
{ 
Player.GetInstance().Set_currentHp(Player.GetInstance().Get 
_CcurrentHp() + 114); 
} 
} 
void LateUpdate() 
{ 
/在 每 一 帧 更 新 完成 后 之 后 ， 更 新 血 条 和 魔法 量 
float hppercent = Player.GetInstance(O.Get_currentHpO / 
Player.GetInstance(). Get_maxHp(); 
hpSlider.value = hppercent; 
hpPercentLabel.text = (hppercent * 100).ToString(".00") + "%",; 
float mppercent = Player.GetInstance().Get_currentMp() / 
Player.GetInstance(). Get_maxMp(); 
mpSlider.value = mppercent; 


mpPercentLabel.text = (mppercent * 100).ToString(".00") + "%"; 


} 

我 们 在 脚本 中 首先 声明 了 UI 组 件 的 引用 ， 然 后 在 Start 中 给 角色 名 
称 赋 值 ， 并 且 检 查 了 所 有 的 组 件 引用 是 否 存在 ， 这 是 一 个 写 代 码 的 好 
习惯 ， 因 为 ， 一 旦 因为 不 存在 引用 而 导致 了 Bug 我 们 就 能 第 一 时 间 知 道 
问题 所 在 。 然 后 我 们 在 Update 中 写 了 两 个 测试 用 的 功能 : 按 A 扣 血 和 按 
B 加 血 。 最 后 ， 我 们 在 LateUpdate 中 更 新 角色 的 血 量 和 魔法 量 的 UI 显 
未 本 

我 们 将 代码 挂 在 MainUI (也 就 是 UIRoot) 上 ， 然 后 将 引用 的 各 个 
组 件 依次 拖 上 去 赋值 给 它 。 运 行 游戏 ， 在 运行 状态 下 ， 我 们 按 A 会 扣 
血 ， 按 B 会 加 血 ， 血 量 进度 条 和 文字 会 跟着 一 起 实时 显示 ， 如 图 8.3 所 
未 。 

根据 这 个 模块 ， 我 们 还 可 以 扩充 更 多 的 功能 : 比如 头像 图 标 也 会 
根据 职业 或 者 角色 来 显示 不 同 的 ， 再 比如 血 量 低 于 一 定 百 分 比 之 后 角 
色 名 称 和 血 条 会 变色 等 。 

角色 状态 栏 一 般 都 和 其 他 的 一 些 主 界面 菜单 一 起 构成 了 “ 主 界 
面 ”>， 这 个 界面 一 般 是 在 游戏 中 长 期 存在 的 ， 如 果 是 永久 存在 ， 可 以 在 
主 界面 的 脚本 的 开始 部 分 写 上 这 样 一 句 代 码 
DontDestroyOnLoad(this.gameObject)， 就 可 以 让 它 在 场景 中 永远 存在 。 
如 果 一 部 分 地 方 存在 一 部 分 地 方 不 存在 ， 可 以 考虑 将 主 界面 做 成 一 个 
预 设 体 ， 然 后 在 进入 新 场景 时 ， 判 断 这 个 场景 是 否 需 要 主 界面 ， 以 此 
决定 是 否 需 要 加 载 Prefab。 


8.2 场景 加 载 的 进度 条 界面 制 人 
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在 游戏 中 ， 我 们 经 闻 会 涉及 场景 切换 ，Unity 切 换 场 景 时 ， 会 清 衬 
旧 场 景 的 内 存 ， 然 后 将 新 场景 的 资源 全 部 加 载 到 内 容 中 。 而 新 场景 的 
内 容 如 果 稍 大 ， 则 会 在 切换 场景 的 时 候 出 现 卡 顿 ， 这 个 卡 顿 是 由 于 在 
加 载 和 货源 到 内 存 造 成 的 。 而 在 稍微 大 型 点 的 项 目 中 ， 经 闻 会 有 资源 量 
很 大 的 场景 ， 这 个 时 候 我 们 需要 做 一 个 加 载 界 面 ， 来 告诉 玩家 我 们 正 
在 加 载 新 场景 ， 并 告知 玩家 加 载 的 进度 如 何 了 。 

这 就 是 我 们 所 谓 的 Loading 界 面 ， 如 图 8.4 所 示 。 


8.2.2 异步 加 载 的 概念 


在 NGUI 中 ， 加 载 新 场景 分 为 同步 加 载 和 异步 加 载 ， 所 谓 的 同步 加 
载 束 是 加 载 完 了 新 场景 才 会 继续 执行 别 的 事 。 所 请 的 异步 加 载 ， 就 是 
程序 会 在 后 台 加 载 新 场景 ， 在 此 过 程 中 还 可 以 执行 其 他 的 事情 。 


加 载 进 度 : 


A 图 8.4 

同步 加 载 : Application.LoadLevel(); 

异步 加 载 : Application.LoadLevelAsync(); 

为 了 显示 这 个 进度 条 ， 我 们 可 以 在 加 载 场景 的 时 候 ， 先 加 载 进 一 
个 专门 的 Loading 场 景 ， 因 为 这 个 场景 只 有 Loading 信 息 ， 所 以 加 载 非常 
快 ， 然 后 在 这 个 场景 中 立马 进行 新 场景 的 加 载 ， 并 实时 地 显示 加 载 进 
度 。 

需要 注意 的 是 ， 异 步 加 载 虽 然 是 后 台 在 加 载 ， 但 是 ， 因 为 程序 在 
对 内 存 进 行 着 大 量 的 操作 ， 所 以 依然 会 导致 有 一 定 的 卡 顿 。 


8.2.3 一 个 单独 的 加 载 界 面 场 


我 们 新 创建 一 个 场景 ， 将 场景 命名 为 LoadingScene。 然 后 在 这 个 场 
景 中 制作 图 8.4 所 示 的 加 载 界 面 。 

制作 步 又 如 下 。 

1. 创建 UI 

在 这 里 我 们 可 以 创建 一 个 2DUI 在 场景 中 ， 并 将 UIRoot 命 名 为 
LoadingUI。 

2.， 设 定 分 辨 率 

这 里 我 们 假定 项 目标 准 分 辨 率 是 1920x1080， 于 是 将 Game 视 窗 调 
为 1920x1080， 然 后 将 UIRoot 设 为 缩放 模式 ，Height 为 1080 。 

3. 创建 锚 点 

因为 进度 条 是 靠 底部 的 ， 在 这 个 案例 中 假设 进度 条 需要 靠近 底部 
定位 。 所 以 ， 先 在 UIRoot 下 创建 一 个 Anchor， 创 建 方法 为 Unity 顶 痢 
NGUI 荣 单 ， 依 次 选择 Creat ~ Ancho。 然 后 我 们 将 Anchor 的 销 点 设置 为 
Bottom， 并 将 Anchor 重 命名 为 Anchor_Bottom 。 

4. 创建 进度 条 

我 们 移 在 Anchor_Bottom 下 创建 一 个 Sprite， 命 名 为 LoadingSlider， 
将 它 的 尺寸 调整 到 我 们 所 需要 的 展板 的 大 小 ， 然 后 调整 好 在 屏幕 中 的 
位 置 。 为 它 附加 一 个 UISlider 的 组 件 ， 这 个 Sprite 将 作为 进度 条 的 底板 
使 用 。 

在 LoadingSlider 下 创建 一 个 子 物体 Sprite， 命 名 为 Foreground， 这 个 
Sprite 将 会 作为 显示 进度 的 上 层 条 使 用 ， 调 整 它 的 大 小 和 位 置 。 然 后 ， 
将 这 个 Sprite 物体 拖 动 到 LoadingSlider 物体 的 UISlider 组 件 的 
Foreground 设 置 项 中 。 

在 LoadingSlider 下 创建 一 个 子 物体 Label， 命 名 为 ProgressLabel， 它 
将 作为 进度 的 文字 显示 ， 将 Label 的 文本 先 设 定 为 :“ 加 载 进 度 : 


100%”， 然 后 调整 文本 的 字体 大 小 和 颜色 。 
制作 好 后 ， 如 图 8.5 所 示 。 
这 样 我 们 的 加 载 场景 和 界面 基本 就 算 制作 完成 了 。 


8.2.4 设计 写 代 


我 们 在 加 载 新 场景 时 ， 利 用 Loading 场 景 非常 小 的 特点 ， 先 同步 加 
载 Loading 场 景 ， 在 加 载 的 同时 ， 将 真正 要 加 载 的 场景 名 称 作为 一 个 参 
数 传 入 到 一 个 全 局 变量 (可 以 用 单 例 或 者 静态 变量 来 实现 ) 中 保存 起 
来 ， 然 后 Loading 场 景 加 载 后 ， 立 即 获 取 这 个 变量 ， 立 即 开始 加 载 真正 
要 加 载 的 场景 ， 并 实时 显示 加 载 进 度 。 这 里 的 代码 逻辑 如 图 8.6 所 示 。 
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我 们 准备 用 一 个 静态 变量 来 临时 保存 要 加 载 场景 的 名 称 。 我 们 新 
创建 一 个 C# 脚 本 ， 命 名 为 LoadingScene.cs， 并 双击 打开 ， 写 上 如 下 代 
码 : 

using UnityEngine; 

using System.Collections; 

public class LoadingScene : MonoBehaviour { 

/多 声明 一 个 静态 字符 串 变 量 来 保存 要 加 载 场 景 的 名 称 
public static string LoadingName; 
/引用 UI 组 件 
public UISlider slider; 
public UILabel label; 
/声明 一 个 异步 进度 变量 
ASsyncOperation asyn; 
void Start () { 

/检查 组 件 引 用 的 正确 性 

if (slider == null) 

{ 

Debug.Log(" 进 度 条 组 件 丢失 ! "); 


} 
if Label == null) 
{ 
Debug.Log(" 进 度 显示 文字 丢失 ! "); 
} 
// 进 入 这 个 场景 就 立即 协 程 加 载 新 场景 
StartCoroutine("BeginLoading"); 
} 
void Update () { 
/更 新 UIl 
slider.value = asyn.progress; 
label.text = "加 载 进 度 : [FF0000]" + (slider.value * 
100).ToString(".00") + "%"; 
| 
// 加 载 日 标 场景 的 范 数 
IEnumerator BeginLoading() 


{ 
asyn = Application.LoadLevelAsync(LoadingName); 


yield return asyn; 
} 
1/ 设计 一 个 封 狼 好 的 静态 函数 
public static void LoadNewScene(string value) 
{ 
LoadingName = value; 


Application.LoadLevel("LoadingScene"); 


在 代码 中 可 以 看 到 ， 声 明了 一 个 静态 变量 LoadingName 来 保存 要 加 
载 的 目标 场景 的 名 称 ， 然 后 封 狂 了 一 个 静态 函数 LoadNewScene() 来 供 
切换 场景 时 调用 。 如 果 需 要 切换 场景 B， 我 们 就 调用 : 

LoadingScene. LoadNewScene("B"); 

然后 的 逻辑 是 立即 将 B 保存 到 静态 变量 LoadingName 中 ， 并 且 加 
载 Loading 场景 ， 当 Loading 场 景 被 加 载 进 来 之 后 ， 在 Start 函 数 中 束 开 
启 了 一 个 协同 程序 去 执行 BeginLoading 方 法 并 加 载 目标 场景 ， 同 时 返回 
asyn 异 步 实 例 ， 然 后 再 利用 这 个 asyn 在 Update 中 实时 地 更 新 UI 信息 。 

因为 需要 加 载 进度 后 面 的 百分比 数字 显示 为 红色 ， 所 以 ， 给 赋值 
时 加 入 了 Label 的 文本 关键 字 : [FF0000]， 当 Label 识 别 到 这 个 关键 字 ， 
它 束 不 会 显示 这 个 关键 字 ， 而 古 将 天 键 字 后 面 的 文本 内 容 全 部 变 成 红 
色 。 

当 异 步 的 进度 达到 100% 之 后 ， 就 相当 于 后 侣 进行 加载 完成 了 ， 程 
序 会 自动 切换 场景 到 目标 场景 中 。 

一 次 完整 的 加 载 流程 就 到 这 里 结束 。 因 为 这 个 过 场 加 载 需要 目标 
场景 的 内 容 足 够 的 大 ， 这 样 加 载 起 来 Loading 进 度 看 着 才 明 显 ， 所 以 ， 
大 家 可 以 目 己 进行 尝试 ， 本 文 束 不 配 图 标示 了 。 制 作 Loading 的 原理 虽 
然 如 此 ， 但 是 代码 并 不 一 定 非 要 如 此 组 织 ， 大 家 可 以 在 理解 了 这 个 原 
理 之 后 ， 根 据 目 己 的 喜好 目 由 地 去 进行 代码 组 织 。 

特别 注 明 一 点 : Loading 场景 和 需要 加 载 的 目标 场景 ， 一 定 要 已 经 
放 到 了 BuildSetting 中 才 可 以 进行 加 载 ! 在 Unity 顶 部 菜单 ， 依 次 选择 
File 一 BuildSetting， 弹 出 界面 ， 然 后 将 场景 文件 拖 动 到 界面 中 即 可 ， 如 
图 8.7 所 示 。 
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8.3 技能 = 也 


8.3.1 示意 图 和 需求 分 析 


技能 快捷 栏 ， 是 大 部 分 游戏 中 都 存在 的 一 种 界面 ， 不 管 是 RPG 游 
戏 、 策 略 游 戏 、 苋 技 游 戏 等 ， 部 有 技能 快捷 栏 的 影子 。 如 图 8.8 所 示 为 
一 个 标准 的 简易 反 能 快捷 栏 。 这 也 十 我 们 这 万 要 完成 的 案例 目标 。 


和 图 8.8 
从 图 8.8 中 ， 我 们 先 来 罗列 以 下 制作 这 个 案例 的 需求 。 


(1) 一 共 4 个 技能 格子 ， 需 要 显示 图 标 。 
(2) 单 击 格子 后 ， 技 能 开始 CD， 并 出 现 CD 进 度 的 遮 罩 。 
(3) CD 时 需要 实时 显示 CD 剩余 秒 数 。 

(4) CD 过 程 中 无 法 再 次 单 击 技能 。 

(5) 假定 项 目标 准 分 辨 率 为 1920x1080 。 

(6) UI 需要 永远 处 于 屏幕 底部 位 置 。 


5 
6 


8.3.2 设 二 UI 


我 们 新 创建 一 个 场景 ， 命 名 为 SkillUIScene， 然 后 将 在 这 个 新 场景 
中 完成 技能 快捷 栏 的 制作 ， 读 者 也 可 以 在 其 他 场景 中 进行 制作 ， 原 理 
是 一 样 的 。 先 来 了 解 一 下 制作 步骤 。 

1. 创建 UI 

然后 在 场景 中 创建 一 个 2DUI， 将 UIRoot 命 名 为 MainUI 。 

2， 设置 分 辨 率 

每 当 新 创建 UIRoot 后 ， 一 定 不 要 忘记 设置 项 目 开 发 标准 分 辨 率 。 
在 这 里 我 们 将 UIRoot 设 为 缩放 模式 ，Height 为 1080。 并 将 Game 视 窗 的 


分 辩 率 调整 为 1920x1080 。 

3. 设置 销 点 

每 当 在 新 的 UIRoot 下 制作 UI 时 ， 除 了 分 辩 率 以 外 ， 一 定 不 要 漏 掉 
锚 点 的 考虑 。 因 为 这 直接 关系 到 屏幕 适 配 的 问题 。 

在 本 文 的 案例 目标 中 ， 我 们 看 到 技能 快捷 栏 偏 于 屏幕 下 方 ， 在 
UIRoot 下 创建 一 个 Anchor， 设 置 销 点 位 置 为 Bottom， 并 将 Anchor 物 体 
重 命名 为 Anchor_Bottom。 

4. 制作 技能 格子 UI 

因为 技能 快捷 栏 有 多 个 格子 ， 所 以 ， 移 在 Anchor_Bottom 下 创建 一 
个 Panel 来 管理 所 有 的 技能 格子 ， 将 这 个 Panel 重 命名 为 SkillPanel 。 

然后 在 Panel 下 创建 一 个 Sprite， 命 名 为 SkillTemplate， 这 个 Sprite 将 
作为 技能 格子 的 底子 。 因 为 这 个 格子 要 承担 被 单 击 的 任务 ， 所 以 ， 为 
它 Attach 一 个 BoxCollider。 然 后 在 这 个 Sprite 下 创建 一 个 Sprite 子 物体 ， 
命名 为 Icon 。 

在 这 个 案例 中 ， 我 们 是 假设 4 个 技能 都 已 经 装备 上 了 ， 上 所以， 提前 
把 Icon 设置 好 ， 可 以 从 Atlas 中 选择 一 个 图 标 作为 技能 图 标 。 

然后 继续 在 SkillTemplate 这 个 物体 下 创建 一 个 Sprite 子 物体 ， 命 名 
为 Cover， 选 择 一 个 白色 的 色 块 图 片 作为 Cover， 百 先 我 们 将 Cover 的 凑 
色调 为 纯 黑 色 ， 并 让 它 半 透明 。 然 后 ， 将 它 的 模式 设 为 Filed， 并 将 
Filled Dir 设 为 Radial360。 这 样 在 技能 CD 时 ， 这 个 遮 音 就 可 以 转圈 表示 
CD 进度 了 。 

最 后 我 们 在 SkillTemplate 下 再 创建 一 个 Label 子 物体 ， 命 名 为 CD， 
用 来 表示 技能 剩余 的 CD 时 间 的 文本 。 

做 到 这 一 步 ， 调 整 好 各 个 控件 的 尺寸 大 小 到 合适 的 大 小 ， 并 调整 
SkillTemplate (这 个 物体 目前 就 已 经 代表 了 一 个 完整 的 技能 格子 ， 到 合 
适 的 位 置 。 然 后 要 进行 一 件 很 重要 的 事情 : Depth 深 度 检 查 ， 因 为 技能 
界面 层级 较 多 ， 而 且 层 级 关系 不 能 刘 乱 ， 所 以 ， 一 定 不 要 了 乐 记 检 得 


Depth， 从 技能 格子 的 需求 来 看 ， 深 度 关 系 应 该 为 : CD 的 Label > 技能 
遮 量 的 Sprite > 技能 图 标的 Sprite > 技能 确 板 的 Sprite 。 
图 8.9 表 示 了 制作 好 的 UI 界面 锥 形 。 图 8.10 表 示 了 Cover 氮 章 的 


Sprite 组 件 设 置 。 
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A 图 8.10 

5. 利用 预 设 ， 完 成 技能 快捷 栏 

从 案例 需求 分 析 中 可 以 得 知 : 每 一 个 技能 格子 其 实 都 是 一 模 一 样 
的 。 所 以 ， 这 里 我 们 就 可 以 使 用 Prefab 预 设 体 来 制作 技能 格子 ， 也 就 
是 将 刚才 制作 好 的 一 个 技能 格子 保存 为 一 个 预 设 体 ， 然 后 利用 复制 更 
多 预 设 体 来 完成 拉 能 快捷 栏 的 制作 。 这 样 做 除了 可 以 更 快捷 、 更 方便 
外 ， 还 有 一 个 更 重要 的 意义 : 修改 的 时 候 ， 只 需要 修改 一 个 技能 格 
子 ， 然 后 在 Inspector 面 板 中 Apply 即 可 让 修改 内 容 应 用 到 所 有 的 技能 格 
子 上 。 如 果 不 使 用 预 设 体 ， 那 么 修改 的 时 候 ， 束 得 每 个 格子 都 修改 一 
遍 ， 如 采 游 戏 中 有 30 个 技能 格子 ， 修 改 任何 东西 都 需要 修改 30 遍 ， 这 
是 一 个 极 不 科学 的 设计 。 

我 们 现在 将 制作 好 的 技能 格子 直接 拖 动 到 Project 面 板 中 ， 它 就 会 目 
动 你 存 为 一 个 预 设 体 ， 如 图 8. 11 所 示 。 


A 图 8.11 
然后 我 们 在 SkillPanel 下 ， 再 拖 进 去 3 个 预 设 体 ， 一 共 构 成 4 个 预 设 


体 ， 调 整 好 这 4 个 预 设 体 的 位 置 ， 惑 完成 了 反 能 快捷 栏 的 制作 ， 如 疼 


8.12 所 示 。 
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8.3.3 设计 并 编写 代码 


在 开始 本 章 市 的 代码 讲解 之 前 ， 先 声明 一 些 注意 事项 。 

(1) 在 一 般 游戏 中 ， 技 能 快捷 栏 里 面 的 技能 数据 (也 就 是 这 个 技 
能 格子 代表 的 是 哪个 技能 ) 是 需要 传 入 进去 的 ， 在 这 里 为 了 方便 讲 
解 ， 让 读者 明日 原理 ， 束 直接 将 技能 数据 录入 到 格子 上 。 

(2) 本 章节 的 代码 只 负责 讲 明 技 能 快捷 栏 UI 的 原理 ， 所 以 很 多 东 
西 是 固定 的 ， 并 不 是 游戏 开发 中 的 标准 代码 ， 建 议 大 家 重点 学 习 技 能 
UI 的 工作 原理 ， 在 实际 开发 中 以 项 目 组 的 需求 为 准 。 

(3) 为 了 方便 讲解 ， 在 本 章节 做 了 一 个 前 提 假 设 技能 快捷 栏 上 
已 经 有 4 个 技能 了 。 

首先 ， 需 要 创建 一 个 C# 脚 本 ， 命 名 为 SkillTemplate。 这 个 脚本 的 
主要 用 途 是 管理 单个 技能 格子 的 UI 逻辑 ， 我 们 将 会 把 这 个 脚本 挂 到 技 
能 格子 的 预 设 上 ， 证 每 一 个 技能 格子 都 拥有 这 人 么 个 脚本 。 

打开 SkillTemplate 脚 本 ， 写 上 以 下 代码 : 

using UnityEngine; 


using System.Collections; 


public class SkillTemplate : MonoBehaviour { 
/声明 瓜 能 的 CD 时 长 
public float CDTime = 10.0f; 
1/ 声明 UI 控件 的 引用 
UISprite icon; 
UISprite cover; 
UILabel cdLabel; 
/记录 剩余 CD 时 间 的 变量 
float leftCD = 0; 
1/ 标示 拉 能 是 否 CD 好 的 变量 
bool isReady = true; 
void Start () { 
1/ 找到 UI 控件 的 引用 
icon = transform.FindChild("Icon").GetComponent<UISprite>(); 
cover = transform.FindChild("Cover").GetComponent<UISprite> 
0; 
cdLabel = transform.FindChild("CD").GetComponent<UILabel> 
0; 
/引用 的 检查 


if (icon == null) 


{ 
Debug.Log(" 技 能 图 标 引 用 丢失 ! "); 
} 
if (cover == null) 
{ 


Debug.Log(" 技 能 CD 遮 罩 引 用 丢失 ! "); 


让 (cdLabel == null) 
{ 
Debug.Log("CD 文 本 引用 丢失 ! "); 
} 
/初始 化 UIl 
InitSkillUIO: 
} 
/初始 化 这 个 技能 格子 
void InitSkillUI() 
{ 
让 (isReady) 
{ 
cover.fill Amount = 0; 


cdLabel.text = ""; 


， 
/检查 技能 CD 的 函数 
void CheckCD() 
{ 
if (isReady == false) 
{ 
if (leftCD > 0) 
{ 
leftCD -= Time.deltaTime; 
coverfillAmount = leftCD / CDTime: 
cdLabel.text = ((int)leftCD).ToString(); 


else 

{ 
isReady = true; 
cover.fillAmount = 0; 


cdLabel.text = ""; 


} 
// 单 击 技能 格子 的 触发 事件 
void OnClick() 
{ 
if (isReady) 
{ 
isReady = false; 
leftCD = CDTime:; 
} 
else 
{ 
Debug.Log(" 拉 能 还 没有 CD 好 "); 
} 
} 
void Update () { 
// 在 Update 中 检查 CD 
CheckCD(O); 


} 
在 代码 中 我 们 可 以 得 到 以 下 思路 。 


(1) 首先 需要 在 这 个 技能 格子 类 中 ， 知 道 这 个 格子 代表 的 技能 是 
什么 ， 这 样 才 能 知道 它 的 一 些 与 UI 有 关 的 关键 属性 ， 比 如 CD 时 间 。 在 
本 章 中 ， 为 了 演示 方便 ， 直 接 声明 了 一 个 公共 变量 CDTime 来 表示 技能 
的 CD 时 间 。 

(2) 因为 技能 格子 的 UI 全 部 都 是 这 个 格子 的 子 物体 ， 所 以 ， 没 
有 必要 去 声明 Public 的 UI 组 件 引用 然后 去 拖 动 ， 可 以 很 方便 地 直接 在 
代码 中 使 用 transform.FindChild 的 方法 来 找到 这 些 UI 组 件 的 引用 。 

(3) 在 脚本 运行 时 ， 要 先 初始 化 这 个 技能 ， 让 它 显 示 出 正常 的 状 


太 。 

(4) 我 们 需要 写 一 个 使 用 技能 的 方法 ， 单 击 技 能 格子 就 会 调用 这 
个 方法 ， 可 以 为 技能 格子 添加 一 个 UIButton 组 件 ， 并 在 Button 里 面 设置 
单 击 的 回调 事件 ， 但 是 ， 这 样 做 很 麻烦 。 所 以 ， 直 接 在 技能 脚本 中 使 
用 了 事件 监听 方法 : void OnClick0。 只 要 技能 格子 被 单 击 了 ， 就 会 调 
用 这 个 格子 身上 的 脚本 中 的 OnClick 方 法 。 

(5) 单 击 技能 格子 后 ， 技 能 的 isReady 变 为 了 false， 于 是 技能 开始 
进入 了 CD 状态 。 

(6) Update 函数 中 加 入 了 CD 的 检测 ， 如 果 技 能 进入 了 CD， 立 即 
开始 执行 走 CD 时 间 的 逻辑 ， 并 实时 、 正 确 地 显示 在 UI 上 。 

我 们 将 脚本 挂 到 技能 格子 SkillTemplate 的 预 设 体 上 ， 单 击 Apply 按 
钮 ， 让 每 一 个 技能 格子 都 拥有 了 这 个 脚本 ， 可 以 在 这 个 脚本 的 组 件 中 
去 修改 它 的 CD 时 间 ， 如 图 8.13 所 示 。 
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A 图 8.13 
然后 运行 游戏 ， 就 可 以 看 到 4 个 技能 格子 已 经 处 于 准备 好 的 状态 ， 
单 击 格子 之 后 ， 技 能 遮 旱 开始 转圈 ，CD 文 本 实时 地 显示 着 技能 还 有 多 
少 秒 瓯 CD 完成 ， 并 且 在 CD 过 程 中 再 次 单 击 技能 ， 会 在 控制 台 打 印 出 一 
句 话 : 技能 还 没有 CD 好 。 当 技能 CD 完成 之 后 ， 技 能 又 回 到 了 初始 状 


O 


太 
1 


8.4 角色 头顶 血 条 的 跟随 
8.4.1 角色 头顶 血 条 的 跟随 分 析 


在 很 多 RPG 话 戏 或 者 竞技 游戏 中 ， 在 玩 游 戏 中 操控 看 一 个 角色 进 
行 游戏 ， 这 个 角色 头顶 一 般 都 跟着 一 个 血 条 ， 不 管 角 色 跑 到 什么 地 
方 ， 这 个 血 条 在 视觉 上 ， 看 上 去 就 好 像 永 远 都 处 于 角色 的 头顶 上 方 一 
样 。 这 融 是 音 见 的 角色 头顶 血 条 跟随 。 

我 们 知道 ， 要 让 一 个 物体 相对 于 另 一 个 物体 永远 都 保持 相对 位 置 
不 变 ， 最 简单 的 做 法 丈 是 : 让 这 两 个 物体 形成 父子 物体 关系 ， 这 样子 
物体 将 永远 和 父 物体 保持 相对 的 位 置 不 会 改变 。 但 是 ， 如 果 头 顶 的 血 
条 当 作 角 色 的 子 物 体 来 做 有 几 个 问题 。 

(1) 角色 是 会 转换 方向 的 ， 这 会 导致 血 条 也 跟着 旋转 。 

(2) 在 3D 游 戏 中 ， 角 色 是 有 透视 关系 的 ， 而 血 条 作为 UI 一 般 都 是 
没有 透视 关系 的 。 也 就 是 说 ， 人 物 跑 远 了 会 变 小 ， 但 古 血 条 作为 承载 
看 重要 信息 的 UI 并 不 会 随 着 人 物 跑 远 而 变 小 。 

当然 ， 如 采 项 目的 需求 很 简单 ， 可 以 使 用 父子 物体 的 方法 解决 固 
然 更 好 。 如 有 不 能 催 单 地 通过 父子 物体 来 解决 ， 可 以 用 以 下 思路 来 制 
作 : 让 血 条 在 UI 摄像 机 中 实时 地 和 角色 的 屏幕 坐标 进行 同步 。 


8.4.2 制作 血 条 的 UI 


血 条 的 UI 很 简单 ， 就 是 一 个 UISlider， 我 们 在 第 一 个 案例 中 就 已 经 
专门 讲 过 Slider 的 做 法 ， 这 里 了 束 不 多 摘 述 制作 过 程 了 。 

需要 注意 的 是 ， 很 可 能 在 很 多 角色 上 都 使 用 这 个 血 条 ， 比 如 角色 
头顶 有 血 条 ， 各 种 各 样 的 怪物 NPC 头 顶 也 可 能 会 有 血 条 ， 所 以 ， 我 们 
需要 将 这 个 血 条 保存 为 一 个 Prefab 预 设 体 。 


我 们 创建 一 个 新 场景 ， 创 建 一 个 2DUI， 将 UIRoot 命 名 为 MainUI 之 
后 ， 在 MainUI 下 面 制作 好 一 个 血 条 ， 将 它 保存 为 一 个 预 设 ， 命 名 为 
BloodBar。 然 后 我 们 即将 来 学 习 一 下 怎样 让 它 跟随 角色 的 头顶 。 

注意 : 

(1) 血 条 如 果 需 要 动态 加 载 或 者 多 人 共用 ， 一 定 要 做 成 预 设 。 

(2) 血 条 不 能 放 在 任何 一 个 Anchor 下 面 ， 因 为 血 条 不 能 根据 屏幕 
进行 适 配 ， 它 只 能 和 目标 角色 保持 相对 位 置 不 变 。 

图 8.14 表 示 了 一 个 做 好 的 血 条 。 


8.4.3 设计 并 编写 代码 


首先 ， 我 们 在 场景 中 创建 一 个 Plane 平 面 和 一 个 Cube 立 方 体 〈 创 建 
方式 为 Unity 顶 部 菜单 ， 依 次 选择 


GameObject 一 CreatOther Cube/Plane) ， 这 个 平面 表示 地 面 ， 这 个 立 
方 体 表 示 角 色 ， 然 后 调整 好 相机 角度 ， 创 建 一 个 平行 光 ， 如 图 8.15 所 
不 o 


A 图 8.14 


和 图 8.15 
我 们 创建 一 个 C# 脚 本 ， 命 名 为 RoleControl。 将 会 用 这 个 脚本 来 欣 
制 角 色 移 动 ， 并 让 UI 跟随 角色 并 进行 绑 定 。 
具体 代码 如 下 : 


using UnityEngine; 


using System.Collections; 
public class RoleControl : MonoBehaviour { 
// 声 明 血 条 的 引用 
public GameObject bloodUI; 
// 声 明 角 色 移 动 的 速度 
float speed = 5.0f; 
void Start () { 
/检查 引用 的 正确 性 
让 (bloodUI == null) 
{ 
Debug.Log(" 血 条 引用 丢失 了 ! "); 


} 
void Update () { 
/用 WASD 来 控制 角色 
if (Input.GetKey(KeyCode.W)) 
{ 
transform.position += Vector3.forward * Time.deltaTime * 
Speed; 
} 
if (Input.GetKey(KeyCode.A)) 
{ 
transform.position += Vector3.left * Time.deltaTime * Speed; 
} 
if (Input.GetKey(KeyCode.S)) 
{ 
transform.position += Vector3.back * Time.deltaTime * Speed; 
} 
if (Input.GetKey(KeyCode.D)) 
{ 


transform.position += Vector3.right * Time.deltaTime * Speed; 


| 

void LateUpdatel() 

{ 
// 每 一 帧 渔 染 完成 后 ， 实 时 更 新 血 条 的 位 置 
/得 到 主 摄像 机 中 人 物 头 顶 1 米 处 在 屏幕 上 的 坐标 
Vector3 pt = Camera.main.WorldToScreenPoint(new 


Vector3(this.transform.position.x, this.transform.position.y + 1, 


this.transform.position.z)); 

// 然 后 将 它 转换 为 NGUI 摄 像 机 的 坐标 

bloodUTI.transform.position 
=UICamera.FindCameraForLayer(bloodUTI.layer).camera.ScreenToWor 
ldPoint(new Vector3(pt.x,pt.y, 1)); 

} 

} 
将 脚本 挂 到 Cube 上 去 ， 然 后 将 血 条 UI 拖 到 RoleControl 组 件 的 引用 
上 ， 如 图 8.16 所 示 。 
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A 图 8.16 
然后 运行 游戏 ， 按 下 键盘 上 的 WASD 可 以 控制 这 个 立方 体 前 后 左 
右 移 动 ， 可 以 看 到 血 条 也 会 跟随 这 个 立方 体 移动 ， 并 永远 处 于 立方 体 
头顶 跟随 ， 并 且 UI 的 大 小 永远 不 会 改变 ， 如 图 8.17 所 示 。 
核心 原理 残 是 先 将 角色 头顶 1 米 处 的 坐标 转换 为 屏幕 坐标 ， 将 这 个 
屏幕 坐标 转换 为 UI 相 机 的 世界 坐标 ， 然 后 将 这 个 坐标 实时 赋予 UI， 视 
觉 上 就 达到 了 跟随 的 效果 。 


所 请 的 本 地 化 ， 可 以 理解 为 游戏 的 多 语言 切换 管理 。 因 为 游戏 可 
能 销 往 世界 各 地 ， 而 世界 各 地 的 语言 又 不 尽 相 同 ， 我 们 希望 玩家 能 够 
根据 自己 的 母语 来 选择 语言 ， 例 如 ， 美 国 玩家 选择 英文 进行 游戏 、 中 
国 大 陆 玩家 选择 简体 中 文 进行 游戏 ， 这 就 是 本 地 化 。 


本 地 化 并 不 是 指 制作 多 个 游戏 包 发 往 不 同 的 地 方 ， 而 是 所 有 人 用 
的 都 是 同一 个 游戏 ， 然 后 在 里 面 可 以 自由 地 选择 语言 种 类 。 

NGUI 目 这 的 本 地 化 系统 目前 文 持 所 有 UILabel 的 文本 进行 语言 切 
换 。 


8.5.2 NGUI 本 地 化 的 原理 


旧版 本 的 NGUI 可 能 需要 Localization 对 象 来 设置 不 同 的 语言 文件 。 
而 在 新 版 本 的 NGUI 中 ， 进 一 步 简化 了 本 地 化 的 操作 。 现 在 以 NGUI 
3.7.2 版 本 为 例 进行 讲解 。 

NGUI 的 本 地 化 系统 ， 需 要 用 到 3 个 东西 : 语言 选择 组 件 、 文 本 读 
取 组 件 、 语 言 配置 文件 。 

1. LanguageSelection 组 件 

这 个 组 件 的 路 径 为 ; 

AddComponent =» NGUI— Interaction 一 LanguageSelection 。 

这 个 组 件 附加 到 一 个 UI 控件 上 之 后 ， 会 目 动 在 该 控件 上 生成 一 个 
UIPopupList 组 件 用 来 选择 语言 。 当 运行 游戏 时 ， 这 个 PopupList 会 被 
LanguageSelection 组 件 应 用 ， 目 动 读 取 语言 配置 文件 ， 从 而 变 成 一 个 语 
言 选 择 的 PopupList 。 

图 8.18 演 示 了 NGUI 的 LanguageSelection 语 言 选 择 控件 的 组 件 结 
构 ， 它 必须 包含 一 个 Sprite、 一 个 BoxCollider、 一 个 
LanguageSelection、 一 个 PopupList (会 被 LanguageSelection 自 动 生 
成 ， 也 可 以 手动 添加 ) 
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A 图 8.18 
值得 注意 的 是 ， 如 果 UIPopupList 和 LanguageSelection 组 件 一 起 存在 
于 控件 上 ， 那 么 这 个 PopupList 控件 将 会 强制 变 成 一 个 语言 选择 的 下 拉 
羔 单 。 也 就 是 说 ， 此 种 情况 下 ， UIPopupList 中 录入 的 各 种 选项 都 将 无 


效 ， 在 游戏 运行 时 ， 里 面 的 选项 会 日 动 变 成 语言 配置 文件 中 的 语言 选 


项 。 
2. UILocalize 组 件 
任何 一 个 需要 语言 切换 的 UILabel， 都 必须 附加 上 这 个 组 件 ， 如 图 


8.19 所 示 。 
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图 尽 UILocalize (Script) 


和 图 8.19 
这 个 组 件 需要 填 入 一 个 “Key”， 这 个 Key 就 是 这 个 Label 在 不 同 语 
言 中 的 索引 。 我 们 会 有 一 个 语言 配置 文件 ， 它 的 结构 如 表 8.1 所 示 。 
表 8.1 


Key 英文 
NameLabel 名 称 Name 
Label2 这 是 一 个 新 文本 This is a new label 


Label3 专 为 中 文 使 用 For English 


然后 在 UILabel 控 件 上 挂 上 UILocalize 之 后 ， 填 入 Key， 例 如 填 入 
Key 为 Label2， 那 么 当 切 换 到 中 文 时 ， 这 个 UILabel 会 根据 Key 从 刚才 的 
表格 中 寻找 显示 的 值 ， 会 显示 “这 是 一 个 新 文本 ”;， 切换 到 英文 之 后 ， 
UILabel 会 显示 “This is a new label”。 

3 .Localization.txt 文 本 文件 

这 个 文本 文件 惑 是 刚才 提 到 的 语言 配置 文件 ，NGUI 中 有 一 个 供 调 
用 的 文本 文件 ， 我 们 只 需要 修改 它 即 可 ， 路 径 为 : 
Assets/NGUIExamples/Resources/Localization。 注 意 ， 这 是 一 个 txt 文 


件 ， 路 径 如 图 8.20 所 示 。 
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A 图 8.20 
ab EE 看 到 如 图 8.21 所 示 的 内 容 。 
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A 图 8.21 
这 个 文本 文档 其 实 和 刚才 讲 的 表 8.1 是 一 模 一 样 的 结构 ， 只 不 过 它 
是 用 逗号 (一 定 要 是 英文 输入 法 下 的 逗号 ) 隔 开 的 ， 可 以 将 这 个 文件 
中 NGUI 目 前 目 己 写 的 苑 例 部 分 翻译 成 一 个 表格 ， 可 以 更 容易 理解 ， 如 
表 8.2 所 示 。 


表 8.2 


Key English Francais 
Flag | Flag-US | Flag-FR 


Language | English | Francais 


Info Localization example Par exemple la localisation 


这 样 就 可 以 很 清晰 看 到 这 个 文本 文档 其 实 就 是 一 个 表格 格式 。 凡 
是 市 有 UILacolize 组 件 的 UILabel 都 将 会 从 语言 配置 文件 中 ， 根 据 Key 值 


寻找 当前 选择 的 语言 模式 下 应 该 显示 的 文本 内 容 。 
这 3 个 元 素 之 间 的 关系 如 图 8.22 所 示 。 
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A 图 8.22 


8.5.3 本 地 化 案例 演示 


我 们 新 创建 一 个 场景 ， 来 进行 一 个 本 地 化 案例 的 演示 
首 移 ， 归 纳 好 需要 多 语言 切换 的 Labeal 有 哪些 ， 然 后 完善 


Localization.txt 配 置 文件 ， 我 们 从 
Assets/NGUIExamples/Resources/Localization 中 打开 这 个 文件 


的 内 容 改 为 图 8.23 所 示 的 内 容 。 
KEY, English, 中 文 


Name, Lucy, 路 西 
女性 


exX， Fema | Ce, 
Age, Ten, 十 尹 


然后 在 场景 中 创建 一 个 Sprite 控 件 ， 为 它 Attach 一 个 BoxCollider 组 
件 。 并 日 为 它 添加 一 个 LanguageSelection 组 件 (会 自动 生成 UIPopupList 
组 件 ) ， 然 后 在 自动 生成 的 PopupList 组 件 中 设置 好 Background 和 
Highlight 的 图 片 。 我 们 在 这 个 PopupList 物 体 下 创建 一 个 Label 子 物体 ， 
并 拖 动 到 PopupList 的 OnValueChange 事 件 回 调 中 ， 让 它 实 时 显示 这 个 
PopupList 当 前 选中 的 选项 。PopupList 的 选项 内 容 不 需要 录入 ， 因 为 它 
在 游戏 运行 时 会 自动 被 LanguageSelection 组 件 设 置 好 ， 如 图 8.24 所 示 。 
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A 图 8.24 
其 次 我 们 在 场景 中 制作 3 个 Label， 如 图 8.25 所 示 。 
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A 图 8.25 
我 们 为 这 3 个 Label 分 别 添加 一 个 UILocalize 组 件 ， 它 们 的 Key 值 分 
别 设置 为 图 8.23 中 我 们 填写 的 Key 值 ，Name、Sex、Age， 如 图 8.26 所 
示 Oo 


半 关 V UILocalize (Script) 病 交 VUILocalize (Script) 


Ke 


A 图 8.26 
我 们 运行 游戏 ， 可 以 看 到 图 8.27 所 示 的 画面 。 
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A 图 8.27 
单 击 选择 语言 的 PopupList 会 出 现 图 8.28 所 示 的 画面 。 


A 图 8.28 
我 们 从 语言 选择 中 选中 中 文 ， 会 出 现 图 8.29 所 示 的 画面 。 


A 图 8.29 


第 9 章 常见 疑难 问题 解答 


9.1 NGUI 忆 


NGUI 作 为 世界 上 最 流行 的 Unity 界 面 制作 插件 ， 一 直 以 来 都 更 新 
迭代 非常 频繁 ， 也 许 很 多 人 对 NGUI 的 版 本 很 困扰 ， 下 面 我 们 就 来 统一 
了 解 一 下 与 版 本 有 关 的 一 些 问题 。 

(1) 我 们 可 以 在 Project 窗 口中 选中 NGUI 文 件 夹 ， 可 以 看 到 有 一 
个 ReadMe 的 版 本 说 明文 件 ， 这 个 文件 标明 了 该 NGUI 是 哪个 版 本 ， 打 
开 之 后 里 面 写 了 NGUI 最 近 几 次 版 本 更 新 的 内 容 。 

(2) NGUI 的 版 本 ， 只 有 过 一 次 革命 性 的 更 新 ， 就 是 从 NGUI 2.X 
版 本 更 新 到 NGUI 3.X 版 本 ，NGUI 3.0 以 后 的 版 本 只 要 版 本 号 相差 不 
远 ， 功 能 几乎 都 一 样 。 比 如 说 NGUI 3.6.0 及 以 后 的 版 本 ， 区 别 都 很 
小 。 需 要 特别 说 明 的 是 ，NGUI 的 版 本 不 管 怎 么 更 新 ， 它 的 知识 点 都 大 
同 小 异 ， 不 用 为 版 本 担心 。 

(3) NGUI 版 本 更 新 之 后 ， 如 果 要 使 用 新 版 本 的 NGUI， 可 以 将 旧 
版 本 的 NGUI 删 掉 ， 导 入 新 版 本 NGUI， 然 后 检查 一 下 已 经 做 好 的 UI 有 
没有 组 件 丢 失 的 情况 ， 如 果 有 重新 赋值 一 下 组 件 。 


9.2 导入 NGUI 资 源 包 出 错 


(1) 如 果 已 经 导入 了 NGUI 的 一 个 版 本 的 资源 包 了 ， 此 时 再 次 导 
入 NGUI 的 资源 包 会 有 什么 结果 ? 

答 : 会 根据 路 径 蔡 换 掉 同名 文件 ， 并 和 额外 导入 新 的 文件 。 

(2) 导入 解压 后 ， 并 没有 弹出 资源 包 内 容 预 宽 窗 口 ， 而 是 在 
Unity 编 辑 器 窗口 底部 报 出 了 一 行 如 图 9.1 所 示 的 错误 ， 怎 么 办 ? 


A 图 9.1 
答 : 这 是 因为 将 NGUI 资 源 包 放 在 了 一 个 带 有 中 文 名 称 的 文件 夹 路 
径 下 ，Unity 导 入 任何 带 有 中 文 路 径 的 资源 包 时 ， 都 会 弹出 这 个 错误 导 
致 无 法 导入 。 请 将 要 导入 的 资源 包 放 在 一 个 没有 任何 中 文 的 路 径 下 再 
进行 导入 。 


NGUI 中 严格 意义 上 是 不 能 直接 创建 两 套 UI 的 ， 如 果 已 经 创建 了 
一 个 UI， 不 管 是 3D 还 是 2D 的 UI， 那 么 ，Unity 顶 部 NGUI 荣 单 中 创建 UI 
的 选项 都 会 变 灰 无 法 再 创建 。 

但 是 ， 也 许 会 碰 到 需要 两 套 UI 的 情况 ， 这 时 可 以 把 场景 中 已 有 的 
UI 的 UIRoot 组 件 关闭 (也 就 是 把 组 件 激活 的 勾 去 掉 ) ， 然 后 再 进行 创 
建 即 可 。 


NGUI 中 ， 演 染 的 层级 关系 是 由 Depth 决 定 的 ， 但 是 ， 最 本 质 的 还 
是 由 泻 染 的 Render Queue 决 定 的 ， 这 是 一 个 Shader 中 常见 的 参数 。 在 
NGUI 中 ， 每 一 个 Panel 上 也 有 一 个 RenderQ 的 设置 项 ，RenderQ 越 高 的 
将 会 越 上 层 显 示 。 

粒子 系统 的 RenderQ 一 般 是 3000， 所 以 ， 如 果 我 们 和 希望 粒子 处 于 
两 个 Panel 之 间 ， 只 需要 将 其 中 一 个 Panel 的 RenderQ 改 为 StartAt 模 式 ， 
将 值 设 为 3000 以 下 的 值 ， 然 后 将 男 一 个 Panel 的 RenderQ 设 为 3000 以 上 
的 值 ， 融 可 以 让 粒子 在 两 个 Panel 之 间 显 示 了 。 

当然 ， 如 有 果 只 需要 让 粒子 显示 在 最 上 层 ， 最 简单 的 办 法 就 是 加 入 
一 个 摄像 机 ， 给 这 个 粒子 设置 一 个 单独 的 Layer， 让 新 加 入 的 摄像 机 
只 泻 染 粒子 所 在 的 Layer， 将 这 个 摄像 机 的 Clear Flags 设 为 Depth 
Only， 然 后 将 渲染 的 Depth 值 设 为 最 高 的 即 可 。 


也 许 有 时 候 我 们 会 这 样 做 : 用 一 个 父 物 体 来 管理 N 多 个 子 物 体 控 
件 ， 比 如 让 5 个 Sprite 都 处 于 同一 个 父 物体 下 ， 这 样 就 可 以 通过 对 父 
物体 进行 位 移 实现 所 有 控件 一 起 位 移 等 效果 。 

在 这 种 情况 下 ， 我 们 让 父 物 体位 移动 画 、 放 缩 动画 等 都 能 带 着 子 
物体 一 起 运动 。 但 是 ， 透 明度 动画 却 有 时 候 不 会 市 肴 子 物 体 一 起 变 得 
透明 ， 这 是 为 什么 呢 ? 

因为 透明 度 ， 可 以 理解 为 属于 颜色 的 一 种 (RGBA4 种 ) ， 它 是 
NGUI 中 继承 了 Widget 的 控件 类 才 有 的 属性 ， 如 Sprite、Texture、 
Label。 如 果 父 物体 导 上 没有 任何 组 件 继承 Widget， 则 改变 透明 度 不 会 
影响 到 子 物体 。 在 这 种 情况 下 ， 如 果 我 们 又 不 能 故意 为 父 物体 赋予 一 


个 Sprite、Texture、Label 等 组 件 ， 可 以 给 父 物体 增加 一 个 Widget 组 
件 ， 增 加 方式 为 : 在 Inspector 面 板 上 ， 依 次 单 击 

AddComponent 一 NGUI 一 UI NGUI Widget。 然 后 父 物体 身上 的 透明 
度 动画 就 会 带 着 子 物体 一 起 变化 了 。 


9.6 为 什么 动画 播放 一 遍 之 后 无 法 再 次 正 


Tween 动 画 播放 如 果 是 Once 类 型 的 ， 那 么 它 播放 一 明之 后 ， 这 个 
动画 就 永久 结束 了 ， 它 的 信息 就 永远 是 终点 信息 了 。 不 管 怎 样 去 关闭 
再 激活 这 个 动画 组 件 ， 它 都 无 法 再 次 进行 播放 。 

如 有 果 要 多 次 播放 动画 ， 可 以 实现 将 动画 组 件 天 闭 ， 然 后 在 需要 播 
放 的 地 方 使 用 代码 去 对 它 进 行 手动 播放 。 操 作 方 法 见 7.6 广 。 

我 们 也 许 还 需要 对 动画 进行 复位 操作 ， 复 位 操作 也 可 以 在 7.6 方 中 
看 到 。 

在 项 目 开 发 中 如 果 要 使 用 Tween 动 画 ， 如 果 这 个 动画 是 Once 类 型 
并 且 需 要 多 次 调用 ， 那 么 最 好 是 事先 将 动 男 组 件 关 闭 禁 用 ， 然 后 手动 
使 用 代码 调用 它 的 播放 函数 进行 播放 ， 这 样 可 以 更 深度 地 控制 动画 。 


有 了 时候 有 这 么 一 种 情况 ， 美术 切 出 一 个 资源 源 文件 ， 它 的 大 小 按 
理 说 应 该 占 屏幕 十 分 之 一 的 高 度 ， 但 是 放 到 NGUI 中 使 用 时 ， 发 现 使 用 


Snap 还 原 它 的 原 像 素 尺 寸 后 ， 占 屏幕 的 高 度 比例 明显 地 比 十 分 之 一 大 
或 者 小 ， 这 种 情况 有 两 种 原因 。 

(1) 检查 UIRoot 的 缩放 类 型 和 标准 分 辩 率 设置 ， 看 是 否 和 美术 人 
员 作 图 使 用 的 分 辨 率 是 一 致 的 。 一 个 游戏 项 目 中 一 定 会 有 一 个 标准 参 
照 分 辨 率 。 

(2) 在 NGUI 某 些 版 本 中 的 3DUI 中 ， 会 明显 地 出 现 这 个 问题 ， 在 
这 种 情况 下 ， 只 需要 将 NGUI 的 Camera 的 Filed Of View 设 为 75 即 可 。 


有 时 候 我 们 希望 NGUI 的 控件 能 够 受 灯 光影 响 ， 比 如 我 们 硕 望 界面 
能 反光 。 但 是 ， 无 论 怎么 调整 灯光 的 位 置 和 Layer， 痢 无 法 影响 到 
NGUI 的 控件 ， 这 是 因为 图 片 的 Shader 导 致 的 ， 比 如 我 们 在 制作 图 集 的 
时 候 ， 生 成 的 图 集 的 材质 球 的 默认 Shader 古 不 受 光 照 影响 的 。 

我 们 以 Sprite 精 灵图 片 为 例 ， 如 采 布 望 它 受 光照 影响 ， 那 么 制作 图 
集 的 时 候 ， 在 生成 图 集 的 材质 球 (制作 图 集会 生成 3 个 文件 ， 材 质 球 
是 其 中 一 个 ) 之 后 ， 将 图 集 的 材质 球 的 Shader 更 换 为 一 个 可 以 反光 的 


Shader， 如 Reflective 等 。 


图 片 的 单位 是 像 紊 ， 而 Unity 是 个 3D 引 擎 ， 在 Unity 的 世界 里 单位 
征 米 ， 而 不 是 像 率 。 为 了 让 图 片 能 在 Unity 中 按照 像素 级 别 进行 显示 ， 


就 需要 UIRoot 这 个 组 件 来 对 整个 UI 进行 放 缩 ， 原 理 就 是 将 米 转 换 为 像 
素 。 

所 以 ， 当 把 一 个 长 宽 高 一 米 的 三 维 模型 放 到 UIRoot 下 之 后 ， 和 希望 
它 被 一 起 泻 染 时 ， 会 发 现 放 到 UIRoot 下 之 后 它 看 不 见 了 ， 因 为 它 的 长 
宽 高 一 米 被 UIRoot 变 成 了 一 个 像素 单位 (可 以 理解 为 1 米 变 成 了 1 像 
素 ) ， 所 以 看 不 见 了 。 这 个 时 候 可 以 修改 模型 的 Scale 缩放 比例 来 让 它 
显示 出 足够 的 大 小 来 。 


9.10 为 什么 UI 单 击 后 无 法 播放 音 


这 种 情况 ， 检 查 4 个 问题 。 
(1) 播放 声音 的 组 件 或 者 逻辑 是 否 正 确 。 
(2) 使 用 设备 (如 计算 机 或 者 手机 ) 的 声音 是 否 已 经 打开 。 

(3) 场景 中 是 否 有 一 个 物体 具有 AudioListner 组 件 (也 就 是 
MainCamera 呈 上 那个 组 件 ) ， 如 采 没 有 这 个 组 件 ， 场 景 中 所 有 的 声音 
都 听 不 见 。 可 以 在 任何 一 个 物体 遇 上 添加 AudioListner 组 件 。 

(4) 检查 声音 的 多 普 勒 效应 。 在 使 用 3D 声 首 的 情况 下 ， 首 源 离 
AudioListner 所 在 的 物体 越 远 ， 声 音 会 越 小 ， 受 多 普 勒 效应 的 影响 。 


9.11 为 什么 Depth 更 大 的 图 片 反 而 被 Depth 
小 的 图 片刻 住 


在 NGUI 中 ， 如 果 显 示 顺 序 与 自己 预想 的 不 一 样 ， 那 么 检查 以 下 两 
局 * 


(1) 这 两 个 图 片 是 否 属于 不 同 的 Panel? 如 果 是 ， 那 么 不 论 这 两 
个 图 片 的 Depth 怎 么 设置 ， 具 有 更 高 Depth 的 Panel 的 子 物体 ， 会 永远 让 
挡 更 低 Depth 的 Panel 的 子 物体 。 
(2) 如 果 Panel 的 Depth 和 图 片 本 身 的 Depth 的 关系 都 没有 问题 ， 
那么 检查 Panel 有 的 RenderQ 的 值 。 
普遍 来 说 ， 第 一 种 情况 占 大 多 数 。 


9.12 怎样 判断 点 中 的 东西 是 UI 


有 时 候 我 们 在 玩 游 戏 时 ， 单 击 行为 除了 操作 UI 以 外 ， 还 有 一 些 其 
他 的 游戏 逻辑 ， 例 如 ， 单 击 地 面 时 移动 角色 等 。 在 这 种 情况 ， 我 们 也 
许 会 碰 到 一 些 事件 击 穿 的 问题 ， 例 如 ， 单 击 了 一 个 按钮 ， 按 钮 的 单 击 
事件 触发 了 了， 但 是 角色 也 跟着 一 起 移动 了 。 

这 种 情况 下 ， 我 们 也 许 需 要 在 逻辑 的 某 些 地 方 判断 一 下 单 击 的 地 
方 是 否 是 UI 所 处 的 地 方 。 例 如 ， 我 们 可 以 在 玩家 单 击 屏幕 移动 角色 
时 ， 加 入 以 下 判断 即 可 : 

if 〈UICamera.IsSOverUJ) 


{ 
/此 时 鼠标 光标 正在 UL 上 ， 不 能 移动 角色 
} 
else 
IL 


/鼠标 光标 不 在 UL 上， 点 中 的 是 地 面 ， 可 以 移动 角色 
} 
或 者 使 用 UICamera.IsPressed(GameObject go) 方 法 判断 是 否 正点 住 
了 某 一 个 物体 。 


9.13 为 什么 Label 扩 终 不 够 清晰 、 晶 
亮 
有 时 候 我 们 使 用 Label 时 ， 发 现 文 字 不 论调 多 大 都 不 够 清晰 、 明 
党， 有 以 下 可 能 性 。 

(1) 使 用 的 静态 字体 。 我 们 知道 静态 字体 是 一 张 预先 制作 好 的 
厂 ， 调 用 静态 字体 就 像 调用 Sprite 一 样 ， 所 以 当 字 体 太 大 时 ， 就 相当 于 
把 图 片 放大 了 。 目 然 会 模糊 。 改 成 动态 字体 或 者 重 做 分 辨 率 更 高 的 静 
态 字 体 可 以 获得 更 好 的 效果 。 

(2) 一 般 来 说 NGUI 中 创建 出 来 的 新 Label 默 认 是 勾 选 上 了 
Gradient 潮 变 的， 并 且 默 认 的 渐变 色 是 从 上 往 下 、 从 日 到 灰色 渐变 ， 把 
这 个 勺 选取 消 ， 字 体 也 会 显得 更 明亮 。 

(3) 如 果 项 目 质量 《Quality 设置 ) 过 低 也 可 能 导致 UI 模糊 ， 不 
仅 是 Label 模 糊 。 我 们 可 以 在 Unity 顶 部 Edit 菜 单 中 ， 选 择 
ProjectSetting， 选 择 Quality 设 置 (操作 方法 如 图 9.2 所 示 ) ， 然 后 将 会 
在 mspector 面 板 中 显示 图 9.3 所 示 的 质量 设置 面板 ， 在 其 中 将 质量 调 高 
印 可 。 
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A 图 9.3 


9.14 为 什么 创建 区 BoxCollider 


YY 
\ 


我 们 都 知道 NGUI 接 收 用 户 的 操作 事件 几乎 全 部 都 依赖 
BoxCollider， 但 是 ， 如 果 创 建 的 物体 有 BoxCollider， 却 无 法 接收 到 用 
户 的 操作 事件 ， 例 如 单 击 、 拖 动 等 ， 可 以 从 以 下 几 个 方面 检查 。 

(1) 检查 这 个 物体 的 Layer 是 否 被 UICamera 所 在 的 相机 泻 染 到 。 

(2) 检查 这 个 物体 的 Layer 在 UICamera 组 件 中 的 EventMask 中 是 
否 被 屏 菩 了 。 

(3) 检查 这 个 物体 上 层 是 否 有 另 一 个 具有 BoxCollider 的 控件 给 挡 
性 也 

(4) 检查 我 们 的 事件 监听 逻辑 是 否 写 得 正确 。 


这 是 一 个 比较 令 人 头疼 的 问题 。 例 如 ， 有 了 两 个 Panel， 分 别 为 PA 和 
PB， 其 中 PA 的 Depth 是 1、PB 的 Depth 是 2。 有 一 个 控件 X， 它 是 PA 的 
子 物体 ， 深 度 为 10;: 有 为 一 个 控件 Y， 它 是 PB 的 子 物体 ， 深 上 度 为 8。 

在 正常 情况 下 ， 因 为 PB 的 深度 大 于 PA 的 深度 ， 所 以 ， 即 使 Y 的 深 
度 低 于 X 的 深度 ， 依 靠 Y 所 在 的 Panel 的 深度 更 高 ，Y 会 显示 在 X 上 层 。 

这 个 时 候 ， 如 果 在 游戏 运行 过 程 中 ， 使 用 代码 动态 地 去 改变 X 的 
父 物体 ， 例 如 : 

X.transform.parent = PB .transform; 

这 个 时 候 ，X 确 实处 于 PB 下 面 作 为 子 物体 了 ， 而 且 Depth 也 依然 是 
10， 问 题 来 了 : 此 时 X 和 Y 都 处 于 同一 个 Panel 下 ， 并 且 X 的 Depth 为 10 
高 于 Y 的 Depth=8， 但 是 X 很 有 可 能 依然 像 原 来 一 样 显示 在 Y 的 下 层 。 

这 种 情况 是 因为 在 代码 动态 修改 之 后 ，NGUI 没 有 刷新 泻 染 信息 导 
致 的 ， 要 解决 这 个 问题 ， 可 以 通过 手动 刷 狐 解决 : 


X.GetComponent<UISprite>().RemoveFromPanel(); 


X.transform.parent = PB .transform; 

PB.GetComponent<UIPanel>().RebuildAllDrawCalls(); 

这 样 ， 就 相当 于 手动 将 X 从 原来 的 Panel 上 移 除 ， 为 它 赋 予 狐 的 
Panel 父 物体 ， 然 后 刷新 这 个 新 的 Panel 组 件 ， 让 它 重 狐 构建 一 次 
DrawCall ° 


9.16 ScrollView 滑 动 的 三 


ScrollView 的 用 法 因为 涉及 多 个 组 件 ， 所 以 ， 也 是 经 
地 方 ， 下 面 就 米 了 解 一 下 ScrollView 的 一 些 常 见 问题 的 检 

1. 消 动 不 了 ScrollView 了 J 了 

如 有 果 出 现 这 种 情况 ， 从 以 下 几 点 开始 检查 。 


党 过 到 问题 的 
才 6 


eScrollView 下 包含 的 内 容 是 否 有 BoxCollider 并 能 够 正常 接收 事 
件 (如 单 击 等 。 如 果 没 有 BoxCollider 或 者 BoxCollider 不 能 正常 接 
收 事件 (如 物体 的 Layer 不 对 、 被 其 他 的 BoxCollider 遮 挡 等 ) ， 则 无 
法 拖 动 ScrollView 下 的 内 容 来 滚动 浏览 。 

e 检 查 ScrollView 下 包含 的 内 容 是 否 有 DragScrollView 组 件 ， 
ScrollView 要 正常 工作 ， 必 须要 内 容 物 体 上 有 这 个 组 件 ， 这 个 组 件 和 
BoxCollider 缺 一 不 可 。 

2 .ScrollView 的 滑动 效果 不 是 日 己 想 要 的 

比如 我 们 滑动 时 ， 硕 望 它 不 要 弹 一 下 ， 或 者 到 合适 的 程度 束 不 能 
滑动 了 等 ， 可 以 在 Scroll View 组 件 中 进行 设置 。 具 体 参 看 第 3 草 中 对 
ScrollView 的 讲解 。 


